Merge pull request #1331 from MITx/feature/christina/tiny-mce

Feature/christina/tiny mce

common/lib/xmodule/xmodule/css/html/display.scss

@@ -0,0 +1,123 @@
+// HTML component display: 
+* {
+  line-height: 1.4em;
+}
+
+h1 {
+    color: $baseFontColor;
+    font: normal 2em/1.4em $sans-serif;
+    letter-spacing: 1px;
+    margin: 0 0 1.416em 0;
+  }
+
+h2 {
+  color: #646464;
+  font: normal 1.2em/1.2em $sans-serif;
+  letter-spacing: 1px;
+  margin-bottom: 15px;
+  text-transform: uppercase;
+  -webkit-font-smoothing: antialiased;
+}
+
+h3, h4, h5, h6 {
+  margin: 0 0 10px 0;
+  font-weight: 600;
+}
+
+h3 {
+  font-size: 1.2em;
+}
+
+h4 {
+  font-size: 1em;
+}
+
+h5 {
+  font-size: .83em;
+}
+
+h6 {
+  font-size: 0.75em;
+}
+
+p {
+  margin-bottom: 1.416em;
+  font-size: 1em;
+  line-height: 1.6em !important;
+  color: $baseFontColor;
+}
+
+em, i {
+  font-style: italic;
+}
+
+strong, b {
+  font-style: bold;
+}
+
+p + p, ul + p, ol + p {
+  margin-top: 20px;
+}
+
+ol, ul {
+  margin: 1em 0;
+  padding: 0 0 0 1em;
+  color: $baseFontColor;
+
+  li {
+    margin-bottom: 0.708em;
+  }
+}
+
+ol {
+  list-style: decimal outside none;
+}
+
+ul {
+  list-style: disc outside none;
+}
+
+a {
+  &:link, &:visited, &:hover, &:active {
+    color: #1d9dd9;
+  } 
+}
+
+img {
+  max-width: 100%;
+}
+
+pre {
+  margin: 1em 0;
+  color: $baseFontColor;
+  font-family: monospace, serif;
+  font-size: 1em;
+  white-space: pre-wrap;
+  word-wrap: break-word;
+}
+
+code {
+  color: $baseFontColor;
+  font-family: monospace, serif;
+  background: none;
+  padding: 0;
+}
+
+table {
+  width: 100%; 
+  border-collapse: collapse;
+  font-size: 16px;
+}
+
+th { 
+  background: #eee; 
+  font-weight: bold; 
+}
+
+table td, th { 
+  margin: 20px 0;
+  padding: 10px; 
+  border: 1px solid #ccc !important; 
+  text-align: left;
+  font-size: 14px;
+}

common/lib/xmodule/xmodule/css/html/edit.scss

@@ -1,3 +1,4 @@
+// HTML component editor: 
 .html-editor {
   @include clearfix();
 

common/lib/xmodule/xmodule/html_module.py

@@ -25,7 +25,8 @@ class HtmlModule(XModule):
                     ]
          }
     js_module_name = "HTMLModule"
-    
+    css = {'scss': [resource_string(__name__, 'css/html/display.scss')]}
+
     def get_html(self):
         return self.html
 

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

@@ -22,15 +22,24 @@ class @HTMLEditingDescriptor
       schema: "html5",
       # TODO: we should share this CSS with studio (and LMS)
       content_css : "/static/css/tiny-mce.css",
+      # Disable h4, h5, and h6 styles as we don't have CSS for them.
+      formats : {
+        h4: {},
+        h5: {},
+        h6: {}
+      },
+      # 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,bold,italic,underline,bullist,numlist,outdent,indent,blockquote,link,unlink",
+      theme_advanced_buttons1 : "formatselect,bold,italic,underline,|,bullist,numlist,outdent,indent,|,blockquote,wrapAsCode,|,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",
+      theme_advanced_blockformats : "p,pre,h1,h2,h3",
       width: '100%',
       height: '400px',
+      setup : HTMLEditingDescriptor.setupTinyMCE,
       # Cannot get access to tinyMCE Editor instance (for focusing) until after it is rendered.
       # The tinyMCE callback passes in the editor as a paramter.
       init_instance_callback: @focusVisualEditor
@@ -39,13 +48,25 @@ class @HTMLEditingDescriptor
     @showingVisualEditor = true
     @element.on('click', '.editor-tabs .tab', @onSwitchEditor)
 
+  @setupTinyMCE: (ed) ->
+    ed.addButton('wrapAsCode', {
+      title : 'Code Block',
+      image : '/static/images/ico-tinymce-code.png',
+      onclick : () ->
+        ed.formatter.toggle('code')
+    })
+
+    ed.onNodeChange.add((editor, command, e) ->
+      command.setActive('wrapAsCode', e.nodeName == 'CODE')
+    )
+
   onSwitchEditor: (e)=>
     e.preventDefault();
 
     if not $(e.currentTarget).hasClass('current')
-      $('.editor-tabs .current').removeClass('current')
+      $('.editor-tabs .current', @element).removeClass('current')
       $(e.currentTarget).addClass('current')
-      $('table.mceToolbar').toggleClass(HTMLEditingDescriptor.isInactiveClass)
+      $('table.mceToolbar', @element).toggleClass(HTMLEditingDescriptor.isInactiveClass)
       $(@advanced_editor.getWrapperElement()).toggleClass(HTMLEditingDescriptor.isInactiveClass)
 
       visualEditor = @getVisualEditor()