Change the event handling for image plugin.

Fixes FireFox bug, and allows us to correct the image path when we show the plugin (as opposed ot only correcting path when we close the plugin).

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

@@ -25,6 +25,7 @@ Feature: CMS.HTML Editor
     When I edit the page
     And I add an image with static link "/static/image.jpg" via the Image Plugin Icon
     Then the src link is rewritten to "c4x/MITx/999/asset/image.jpg"
+    And the link is shown as "/static/image.jpg" in the Image Plugin
 
   Scenario: TinyMCE link plugin sets urls correctly
     Given I have created a Blank HTML Page
@@ -32,6 +33,7 @@ Feature: CMS.HTML Editor
     And I add a link with static link "/static/image.jpg" via the Link Plugin Icon
     Then the href link is rewritten to "c4x/MITx/999/asset/image.jpg"
 
+
   Scenario: TinyMCE and CodeMirror preserve style tags
     Given I have created a Blank HTML Page
     When I edit the page

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

@@ -47,6 +47,14 @@ def i_click_on_image_plugin_icon(step, path):
     )
 
 
+@step('the link is shown as "(.*)" in the Image Plugin$')
+def check_link_in_image_plugin(step, path):
+    use_plugin(
+        '.mce-i-image',
+        lambda: assert_equal(path, world.css_find('.mce-textbox')[0].value)
+    )
+
+
 @step('I add a link with static link "(.*)" via the Link Plugin Icon$')
 def i_click_on_link_plugin_icon(step, path):
     def fill_in_link_fields():

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

@@ -31,6 +31,7 @@ class @HTMLEditingDescriptor
       codemirror: {
         path: "#{baseUrl}/js/vendor/CodeMirror"
       },
+      image_advtab: true,
       # We may want to add "styleselect" when we collect all styles used throughout the LMS
       toolbar: "formatselect | fontselect | bold italic wrapAsCode underline forecolor | bullist numlist outdent indent blockquote | link unlink image | code",
       block_formats: "Paragraph=p;Preformatted=pre;Heading 1=h1;Heading 2=h2;Heading 3=h3",
@@ -58,11 +59,22 @@ class @HTMLEditingDescriptor
 
     # These events were added to the plugin code as the TinyMCE PluginManager
     # does not fire any events when plugins are opened or closed.
-    ed.on('SaveImage', @linkChanged)
+    ed.on('SaveImage', @saveImage)
+    ed.on('EditImage', @editImage)
     ed.on('SaveLink', @linkChanged)
     ed.on('ShowCodeMirror', @showCodeEditor)
     ed.on('SaveCodeMirror', @saveCodeEditor)
 
+  editImage: (data) =>
+    # Called when the image plugin will be shown. Input arg is the JSON version of the image data.
+    if data['src']
+      data['src'] = rewriteStaticLinks(data['src'], @base_asset_url, '/static/')
+
+  saveImage: (data) =>
+    # Called when the image plugin in saved. Input arg is the JSON version of the image data.
+    if data['src']
+      data['src'] = rewriteStaticLinks(data['src'], '/static/', @base_asset_url)
+
   linkChanged: (e) =>
     # Intended to run after the "image" or "link" plugin is used so that static urls are set
     # correctly in the Visual editor immediately after command use.