From 29f49895d38af825f6d0ccf1c08415d7585b05f2 Mon Sep 17 00:00:00 2001 From: cahrens Date: Fri, 11 Jan 2013 15:50:46 -0500 Subject: [PATCH] Pretty much works. --- cms/static/css/tiny-mce.css | 50 ++++++++++++++ cms/templates/widgets/html-edit.html | 18 +++-- common/lib/xmodule/xmodule/css/html/edit.scss | 3 + .../xmodule/xmodule/js/src/html/edit.coffee | 68 +++++++++++++++---- .../xmodule/xmodule/templates/html/empty.yaml | 7 ++ 5 files changed, 123 insertions(+), 23 deletions(-) create mode 100644 cms/static/css/tiny-mce.css create mode 100644 common/lib/xmodule/xmodule/templates/html/empty.yaml diff --git a/cms/static/css/tiny-mce.css b/cms/static/css/tiny-mce.css new file mode 100644 index 0000000000..7f32e59c8f --- /dev/null +++ b/cms/static/css/tiny-mce.css @@ -0,0 +1,50 @@ +body { + background-color: #fff; + font-family: 'Open Sans', Verdana, Arial, Helvetica, sans-serif; + font-size: 16px; + line-height: 1.6; + color: #3c3c3c; + scrollbar-3dlight-color: #F0F0EE; + scrollbar-arrow-color: #676662; + scrollbar-base-color: #F0F0EE; + scrollbar-darkshadow-color: #DDDDDD; + scrollbar-face-color: #E0E0DD; + scrollbar-highlight-color: #F0F0EE; + scrollbar-shadow-color: #F0F0EE; + scrollbar-track-color: #F5F5F5; +} + +a { + color: #1d9dd9; + text-decoration: none; +} + +p { + font-size: 16px; + line-height: 1.6; +} + +h2 { + color: #646464; + font-size: 19px; + font-weight: 300; + letter-spacing: 1px; + margin-bottom: 15px; + text-transform: uppercase; +} + +h3 { + font-size: 19px; + font-weight: 400; +} + +code { + margin: 0 2px; + padding: 0px 5px; + border-radius: 3px; + border: 1px solid #eaeaea; + white-space: nowrap; + font-family: Monaco, monospace; + font-size: 14px; + background-color: #f8f8f8; +} \ No newline at end of file diff --git a/cms/templates/widgets/html-edit.html b/cms/templates/widgets/html-edit.html index 8ca06a1591..2cca6ae55a 100644 --- a/cms/templates/widgets/html-edit.html +++ b/cms/templates/widgets/html-edit.html @@ -1,15 +1,13 @@ <%include file="metadata-edit.html" />
-
-
-
- -
- -
${data}
+
+
+
+ +
${data}
diff --git a/common/lib/xmodule/xmodule/css/html/edit.scss b/common/lib/xmodule/xmodule/css/html/edit.scss index f9d26d76d8..fa88a9f59f 100644 --- a/common/lib/xmodule/xmodule/css/html/edit.scss +++ b/common/lib/xmodule/xmodule/css/html/edit.scss @@ -1,3 +1,4 @@ +// TODO: this code is a subset of what is in problem editor's CSS. Should share. .editor-bar { position: relative; @include linear-gradient(top, #d4dee8, #c9d5e2); @@ -6,6 +7,8 @@ border-radius: 3px 3px 0 0; border-bottom-color: #a5aaaf; @include clearfix; + // TODO: I added this -- Brian to fix roperly + height: 34px; a { display: block; diff --git a/common/lib/xmodule/xmodule/js/src/html/edit.coffee b/common/lib/xmodule/xmodule/js/src/html/edit.coffee index 2e562a6645..e002f1a6db 100644 --- a/common/lib/xmodule/xmodule/js/src/html/edit.coffee +++ b/common/lib/xmodule/xmodule/js/src/html/edit.coffee @@ -10,27 +10,69 @@ class @HTMLEditingDescriptor lineWrapping: true}) $(@advanced_editor.getWrapperElement()).hide() - @tiny_mce = $(".tiny-mce", @element).tinymce({ + @tiny_mce_textarea = $(".tiny-mce", @element).tinymce({ script_url : '/static/js/vendor/tiny_mce/tiny_mce.js', theme : "advanced", - #skin: 'studio', - - # we may want to add "styleselect" when we collect all styles used throughout the lms - theme_advanced_buttons1 : "formatselect,bold,italic,underline,studio.asset,bullist,numlist,outdent,indent,blockquote,link,unlink", + schema: "html5", + # TODO: we should share this CSS with studio (and LMS) + content_css : "/static/css/tiny-mce.css", + # We may want to add "styleselect" when we collect all styles used throughout the LMS + theme_advanced_buttons1 : "formatselect,bold,italic,underline,bullist,numlist,outdent,indent,blockquote,link,unlink", theme_advanced_toolbar_location : "top", theme_advanced_toolbar_align : "left", theme_advanced_statusbar_location : "none", theme_advanced_resizing : true, theme_advanced_blockformats : "p,code,h2,h3,blockquote", width: '100%', - height: '400px' + height: '400px', }) -# @tiny_mce.focus() -# /tinyMCE.activeEditor.setContent(text, {format : 'raw'}); -# @tiny = tinyMCE.get($('.tiny-mce', this.element).attr('id')) -# @tiny.setContent(@edit_box.getValue(), {format : 'raw'}); -# @tiny_mce.html(@edit_box.getValue()) - @visual_editor = tinyMCE.get($('.tiny-mce', this.element).attr('id')) + + @showingVisualEditor = true + @element.on('click', '.editor-tabs .tab', @onSwitchEditor) + + onSwitchEditor: (e)=> + e.preventDefault(); + + if not $(e.currentTarget).hasClass('current') + $('.editor-tabs .current').removeClass('current') + $(e.currentTarget).addClass('current') + tinyMCE = @getVisualEditor() + + if $(e.currentTarget).attr('data-tab') is 'visual' + $(@advanced_editor.getWrapperElement()).hide() + tinyMCE.show() + tinyMCE.setContent(@advanced_editor.getValue()) + # In order for tinyMCE.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. + tinyMCE.startContent = tinyMCE.getContent({format: "raw", no_events: 1}); + tinyMCE.isNotDirty = true + @showingVisualEditor = true + else + tinyMCE.hide() + @tiny_mce_textarea.hide() + $(@advanced_editor.getWrapperElement()).show() + if tinyMCE.isDirty() + console.log('was dirty! setting text') + @advanced_editor.setValue(tinyMCE.getContent({no_events: 1})) + @advanced_editor.setCursor(0) + @advanced_editor.refresh() + @advanced_editor.focus() + @showingVisualEditor = false + + getVisualEditor: -> + ### + Returns the instance of TinyMCE. + This is different from the textarea that exists in the HTML template (@tiny_mce_textarea. + ### + return tinyMCE.get($('.tiny-mce', this.element).attr('id')) save: -> - data: @advanced_editor.getValue() + @element.off('click', '.editor-tabs .tab', @onSwitchEditor) + text = @advanced_editor.getValue() + tinyMCE = @getVisualEditor() + if @showingVisualEditor and tinyMCE.isDirty() + console.log('persist from visual editor') + text = tinyMCE.getContent({no_events: 1}) + else + console.log('persist from HTML editor') + data: text diff --git a/common/lib/xmodule/xmodule/templates/html/empty.yaml b/common/lib/xmodule/xmodule/templates/html/empty.yaml new file mode 100644 index 0000000000..1262ed37cf --- /dev/null +++ b/common/lib/xmodule/xmodule/templates/html/empty.yaml @@ -0,0 +1,7 @@ +--- +metadata: + display_name: Empty + +data: | + +children: [] \ No newline at end of file