Merge pull request #2737 from edx/dcadams/fix_tinymce

Fixes tinymce bug:

cms/djangoapps/contentstore/features/html-editor.feature

@@ -19,3 +19,9 @@ Feature: CMS.HTML Editor
     Given I have created an E-text Written in LaTeX
     When I edit and select Settings
     Then Edit High Level Source is visible
+
+  Scenario: TinyMCE image plugin sets urls correctly
+    Given I have created a Blank HTML Page
+    When I edit the page and select the Visual Editor
+    And I add an image with a static link via the Image Plugin Icon
+    Then the image static link is rewritten to translate the path
\ No newline at end of file

cms/djangoapps/contentstore/features/html-editor.py

@@ -2,6 +2,7 @@
 #pylint: disable=C0111
 
 from lettuce import world, step
+from nose.tools import assert_in  # pylint: disable=no-name-in-module
 
 
 @step('I have created a Blank HTML Page$')
@@ -28,3 +29,43 @@ def i_created_etext_in_latex(step):
         category='html',
         component_type='E-text Written in LaTeX'
     )
+
+
+@step('I edit the page and select the Visual Editor')
+def i_click_on_edit_icon(step):
+    world.edit_component()
+    world.wait_for(lambda _driver: world.css_visible('a.visual-tab'))
+    world.css_click('a.visual-tab')
+
+
+@step('I add an image with a static link via the Image Plugin Icon')
+def i_click_on_image_plugin_icon(step):
+    # Click on image plugin button
+    world.wait_for(lambda _driver: world.css_visible('a.mce_image'))
+    world.css_click('a.mce_image')
+
+    # Change to the non-modal TinyMCE Image window
+    # keeping parent window so we can go back to it.
+    parent_window = world.browser.current_window
+    for window in world.browser.windows:
+
+        world.browser.switch_to_window(window)  # Switch to a different window
+        if world.browser.title == 'Insert/Edit Image':
+
+            # This is the Image window so find the url text box,
+            # enter text in it then hit Insert button.
+            url_elem = world.browser.find_by_id("src")
+            url_elem.fill('/static/image.jpg')
+            world.browser.find_by_id('insert').click()
+
+    world.browser.switch_to_window(parent_window)  # Switch back to the main window
+
+
+@step('the image static link is rewritten to translate the path')
+def image_static_link_is_rewritten(step):
+    # Find the TinyMCE iframe within the main window
+    with world.browser.get_iframe('mce_0_ifr') as tinymce:
+        image = tinymce.find_by_tag('img').first
+
+        # Test onExecCommandHandler set the url to absolute.
+        assert_in('c4x/MITx/999/asset/image.jpg', image['src'])

common/lib/xmodule/xmodule/js/src/html/edit.coffee

@@ -42,7 +42,7 @@ class @HTMLEditingDescriptor
       # Disable visual aid on borderless table.
       visual:false,
       # We may want to add "styleselect" when we collect all styles used throughout the LMS
-      theme_advanced_buttons1 : "formatselect,fontselect,bold,italic,underline,forecolor,|,bullist,numlist,outdent,indent,|,blockquote,wrapAsCode,|,link,unlink,|,image,",
+      theme_advanced_buttons1 : "formatselect,fontselect,bold,italic,underline,forecolor,|,bullist,numlist,outdent,indent,|,link,unlink,image,|,blockquote,wrapAsCode",
       theme_advanced_toolbar_location : "top",
       theme_advanced_toolbar_align : "left",
       theme_advanced_statusbar_location : "none",
@@ -81,6 +81,15 @@ class @HTMLEditingDescriptor
 
     @visualEditor = ed
     
+    ed.onExecCommand.add(@onExecCommandHandler)
+
+  # Intended to run after the "image" plugin is used so that static urls are set
+  # correctly in the Visual editor immediately after command use.
+  onExecCommandHandler: (ed, cmd, ui, val) =>
+      if cmd == 'mceInsertContent' and val.match(/^<img/)
+        content = rewriteStaticLinks(ed.getContent(), '/static/', @base_asset_url)
+        ed.setContent(content)
+
   onSwitchEditor: (e) =>
     e.preventDefault();