diff --git a/cms/templates/widgets/html-edit.html b/cms/templates/widgets/html-edit.html
index 34866321c4..a27225e36b 100644
--- a/cms/templates/widgets/html-edit.html
+++ b/cms/templates/widgets/html-edit.html
@@ -2,14 +2,8 @@
diff --git a/common/lib/xmodule/xmodule/js/src/html/edit.coffee b/common/lib/xmodule/xmodule/js/src/html/edit.coffee
index ccd95c4144..886d82a65f 100644
--- a/common/lib/xmodule/xmodule/js/src/html/edit.coffee
+++ b/common/lib/xmodule/xmodule/js/src/html/edit.coffee
@@ -7,15 +7,6 @@ class @HTMLEditingDescriptor
if @base_asset_url == undefined
@base_asset_url = null
- @advanced_editor = CodeMirror.fromTextArea($(".edit-box", @element)[0], {
- mode: "text/html"
- lineNumbers: true
- lineWrapping: true
- })
-
- @$advancedEditorWrapper = $(@advanced_editor.getWrapperElement())
- @$advancedEditorWrapper.addClass(HTMLEditingDescriptor.isInactiveClass)
-
# This is a workaround for the fact that tinyMCE's baseURL property is not getting correctly set on AWS
# instances (like sandbox). It is not necessary to explicitly set baseURL when running locally.
tinyMCE.baseURL = "#{baseUrl}/js/vendor/tiny_mce"
@@ -23,7 +14,7 @@ class @HTMLEditingDescriptor
# tinyMCE incorrectly decides that the suffix should be "", which means it fails to load files.
tinyMCE.suffix = ".min"
@tiny_mce_textarea = $(".tiny-mce", @element).tinymce({
- script_url : "#{baseUrl}/js/vendor/tiny_mce/tiny_mce.min.js",
+ script_url : "#{baseUrl}/js/vendor/tiny_mce/tinymce.min.js",
theme : "modern",
skin: 'studio-tmce4',
schema: "html5",
@@ -48,8 +39,7 @@ class @HTMLEditingDescriptor
},
# We may want to add "styleselect" when we collect all styles used throughout the LMS
# Can have a single toolbar by just specifying "toolbar". Splitting for now so all are visible.
- toolbar1: "formatselect | fontselect | bold italic underline forecolor | bullist numlist outdent indent",
- toolbar2: "link unlink image | blockquote wrapAsCode code",
+ toolbar: "formatselect | fontselect | bold italic underline forecolor | bullist numlist outdent indent | link unlink image | blockquote wrapAsCode | code",
# TODO: i18n
block_formats: "Paragraph=p;Preformatted=pre;Heading 1=h1;Heading 2=h2;Heading 3=h3",
width: '100%',
@@ -62,14 +52,6 @@ class @HTMLEditingDescriptor
init_instance_callback: @initInstanceCallback
})
- @showingVisualEditor = true
- # Doing these find operations within onSwitchEditor leads to sporadic failures on Chrome (version 20 and older).
- $element = $(element)
- @$htmlTab = $element.find('.html-tab')
- @$visualTab = $element.find('.visual-tab')
-
- @element.on('click', '.editor-tabs .tab', @onSwitchEditor)
-
setupTinyMCE: (ed) =>
ed.addButton('wrapAsCode', {
title : 'Code',
@@ -84,6 +66,8 @@ class @HTMLEditingDescriptor
@visualEditor = ed
ed.on('change', @changeHandler)
+ ed.on('ShowCodeMirror', @showCodeEditor)
+ ed.on('SaveCodeMirror', @saveCodeEditor)
# Intended to run after the "image" plugin is used so that static urls are set
# correctly in the Visual editor immediately after command use.
@@ -91,59 +75,27 @@ class @HTMLEditingDescriptor
# The fact that we have to listen to all change events and act on an event actually fired
# from undo (which is where the "level" comes from) is extremely ugly. However, plugins
# don't fire any events in TinyMCE version 4 that I can hook into (in particular, not ExecCommand).
+ debugger
if e.level and e.level.content and e.level.content.match(/
content = rewriteStaticLinks(e.target.getContent(), '/static/', @base_asset_url)
e.target.setContent(content)
- onSwitchEditor: (e) =>
- e.preventDefault();
+ showCodeEditor: (codeEditor) =>
+ # Called with the CodeMirror Editor is displayed to convert links to show satic prefix.
+ content = rewriteStaticLinks(codeEditor.getValue(), @base_asset_url, '/static/')
+ codeEditor.setValue(content)
- $currentTarget = $(e.currentTarget)
- if not $currentTarget.hasClass('current')
- $currentTarget.addClass('current')
-
- # Initializing $mceToolbar if undefined.
- if not @$mceToolbar?
- @$mceToolbar = $(@element).find('table.mceToolbar')
- @$mceToolbar.toggleClass(HTMLEditingDescriptor.isInactiveClass)
- @$advancedEditorWrapper.toggleClass(HTMLEditingDescriptor.isInactiveClass)
-
- visualEditor = @getVisualEditor()
- if $currentTarget.data('tab') is 'visual'
- @$htmlTab.removeClass('current')
- @showVisualEditor(visualEditor)
- else
- @$visualTab.removeClass('current')
- @showAdvancedEditor(visualEditor)
-
- # Show the Advanced (codemirror) Editor. Pulled out as a helper method for unit testing.
- showAdvancedEditor: (visualEditor) ->
- if visualEditor.isDirty()
- content = rewriteStaticLinks(visualEditor.getContent({no_events: 1}), @base_asset_url, '/static/')
- @advanced_editor.setValue(content)
- @advanced_editor.setCursor(0)
- @advanced_editor.refresh()
- @advanced_editor.focus()
- @showingVisualEditor = false
-
- # Show the Visual (tinyMCE) Editor. Pulled out as a helper method for unit testing.
- showVisualEditor: (visualEditor) ->
- # In order for isDirty() to return true ONLY if edits have been made after setting the text,
- # both the startContent must be sync'ed up and the dirty flag set to false.
- content = rewriteStaticLinks(@advanced_editor.getValue(), '/static/', @base_asset_url)
- visualEditor.setContent(content)
- visualEditor.startContent = visualEditor.getContent({format : 'raw'})
- @focusVisualEditor(visualEditor)
- @showingVisualEditor = true
+ saveCodeEditor: (codeEditor) =>
+ # Called when the CodeMirror Editor is saved to convert links back to the full form.
+ content = rewriteStaticLinks(codeEditor.getValue(), '/static/', @base_asset_url)
+ codeEditor.setValue(content)
initInstanceCallback: (visualEditor) =>
- visualEditor.setContent(rewriteStaticLinks(@advanced_editor.getValue(), '/static/', @base_asset_url))
+ visualEditor.setContent(rewriteStaticLinks(visualEditor.getContent({no_events: 1}), '/static/', @base_asset_url))
@focusVisualEditor(visualEditor)
focusVisualEditor: (visualEditor) =>
visualEditor.focus()
- if not @$mceToolbar?
- @$mceToolbar = $(@element).find('table.mceToolbar')
getVisualEditor: () ->
###
@@ -155,9 +107,7 @@ class @HTMLEditingDescriptor
return @visualEditor
save: ->
- @element.off('click', '.editor-tabs .tab', @onSwitchEditor)
- text = @advanced_editor.getValue()
visualEditor = @getVisualEditor()
- if @showingVisualEditor and visualEditor.isDirty()
+ if visualEditor.isDirty()
text = rewriteStaticLinks(visualEditor.getContent({no_events: 1}), @base_asset_url, '/static/')
data: text
)