Andal.LND/edx-platform
6
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

studio HTML editor - codemirror/tinymce toggle work - wip

Browse Source
This commit is contained in:
Brian Talbot
2013-01-16 14:54:28 -05:00
parent ed6134ea11
commit e8ba078d4e
6 changed files with 92 additions and 60 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
cms/templates/component.html
View File

@@ -3,8 +3,10 @@
<div class="module-editor">
${editor}
</div>
<a href="#" class="save-button">Save</a>
<a href="#" class="cancel-button">Cancel</a>
<div class="row module-actions">
<a href="#" class="save-button">Save</a>
<a href="#" class="cancel-button">Cancel</a>
</div>
</div>
</div>

21
cms/templates/widgets/html-edit.html
View File

@@ -1,13 +1,12 @@
<%include file="metadata-edit.html" />
<section class="html-edit">
<div class="row">
<div class="editor-bar">
<ul class="editor-tabs">
<li><a href="#" class="visual-tab tab current" data-tab="visual">Visual</a></li>
<li><a href="#" class="html-tab tab" data-tab="advanced">Advanced</a></li>
</ul>
</div>
<textarea class="tiny-mce">${data}</textarea>
<div name="" class="edit-box">${data}</div>
</div>
<section class="html-editor editor">
<ul class="editor-tabs">
<li><a href="#" class="visual-tab tab current" data-tab="visual">Visual</a></li>
<li><a href="#" class="html-tab tab" data-tab="advanced">HTML</a></li>
</ul>
<div class="row">
<textarea class="tiny-mce">${data}</textarea>
<div name="" class="edit-box">${data}</div>
</div>
</section>

85
common/lib/xmodule/xmodule/css/editor/display.scss
View File

@@ -1,49 +1,58 @@
.editor-bar {
.editor {
position: relative;
@include linear-gradient(top, #d4dee8, #c9d5e2);
padding: 5px;
border: 1px solid #3c3c3c;
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;
float: left;
padding: 3px 10px 7px;
margin-left: 7px;
border-radius: 2px;
&:hover {
background: rgba(255, 255, 255, .5);
}
.row {
position: relative;
}
.editor-tabs {
position: absolute;
top: 10px;
right: 10px;
.editor-bar {
position: relative;
@include linear-gradient(top, #d4dee8, #c9d5e2);
padding: 5px;
border: 1px solid #3c3c3c;
border-radius: 3px 3px 0 0;
border-bottom-color: #a5aaaf;
@include clearfix;
// TODO: I added this -- Brian to fix roperly
height: 34px;
li {
a {
display: block;
float: left;
padding: 3px 10px 7px;
margin-left: 7px;
border-radius: 2px;
&:hover {
background: rgba(255, 255, 255, .5);
}
}
.tab {
height: 24px;
padding: 7px 20px 3px;
border: 1px solid #a5aaaf;
border-radius: 3px 3px 0 0;
@include linear-gradient(top, rgba(0, 0, 0, 0) 87%, rgba(0, 0, 0, .06));
background-color: #e5ecf3;
font-size: 13px;
color: #3c3c3c;
box-shadow: 1px -1px 1px rgba(0, 0, 0, .05);
.editor-tabs {
position: absolute;
top: 10px;
right: 10px;
&.current {
background: #fff;
border-bottom-color: #fff;
li {
float: left;
}
.tab {
display: block;
height: 24px;
padding: 7px 20px 3px;
border: 1px solid #a5aaaf;
border-radius: 3px 3px 0 0;
@include linear-gradient(top, rgba(0, 0, 0, 0) 87%, rgba(0, 0, 0, .06));
background-color: #e5ecf3;
font-size: 13px;
color: #3c3c3c;
box-shadow: 1px -1px 1px rgba(0, 0, 0, .05);
&.current {
background: #fff;
border-bottom-color: #fff;
}
}
}
}

20
common/lib/xmodule/xmodule/css/html/edit.scss
View File

@@ -0,0 +1,20 @@
.html-editor {
@include clearfix();
.CodeMirror {
display: none;
position: absolute;
top: 46px;
width: 100%;
height: 378px;
background: #fff;
color: #3c3c3c;
@include box-sizing(border-box);
}
.editor-tabs {
top: 11px;
right: 30px;
z-index: 99;
}
}

19
common/lib/xmodule/xmodule/js/src/html/edit.coffee
View File

@@ -8,11 +8,11 @@ class @HTMLEditingDescriptor
mode: "text/html"
lineNumbers: true
lineWrapping: true})
$(@advanced_editor.getWrapperElement()).hide()
@tiny_mce_textarea = $(".tiny-mce", @element).tinymce({
script_url : '/static/js/vendor/tiny_mce/tiny_mce.js',
theme : "advanced",
skin: 'studio',
schema: "html5",
# TODO: we should share this CSS with studio (and LMS)
content_css : "/static/css/tiny-mce.css",
@@ -27,7 +27,7 @@ class @HTMLEditingDescriptor
height: '400px',
# 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
init_instance_callback: @initializeVisualEditor
})
@showingVisualEditor = true
@@ -41,17 +41,18 @@ class @HTMLEditingDescriptor
$(e.currentTarget).addClass('current')
visualEditor = @getVisualEditor()
$('table.mceToolbar').toggleClass('is-inactive')
$(@advanced_editor.getWrapperElement()).toggleClass('is-inactive')
if $(e.currentTarget).attr('data-tab') is 'visual'
$(@advanced_editor.getWrapperElement()).hide()
@showVisualEditor(visualEditor)
else
visualEditor.hide()
@tiny_mce_textarea.hide()
# @tiny_mce_textarea.hide()
@showAdvancedEditor(visualEditor)
# Show the Advanced (codemirror) Editor. Pulled out as a helper method for unit testing.
showAdvancedEditor: (visualEditor) ->
$(@advanced_editor.getWrapperElement()).show()
# $(@advanced_editor.getWrapperElement()).show()
if visualEditor.isDirty()
@advanced_editor.setValue(visualEditor.getContent({no_events: 1}))
@advanced_editor.setCursor(0)
@@ -61,16 +62,16 @@ class @HTMLEditingDescriptor
# Show the Visual (tinyMCE) Editor. Pulled out as a helper method for unit testing.
showVisualEditor: (visualEditor) ->
visualEditor.show()
# visualEditor.show()
visualEditor.setContent(@advanced_editor.getValue())
# 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.
visualEditor.startContent = visualEditor.getContent({format: "raw", no_events: 1});
visualEditor.isNotDirty = true
@focusVisualEditor(visualEditor)
visualEditor.focus()
@showingVisualEditor = true
focusVisualEditor: (visualEditor) ->
initializeVisualEditor: (visualEditor) ->
visualEditor.focus()
getVisualEditor: ->

1
common/lib/xmodule/xmodule/self_assessment_module.py
View File

@@ -524,6 +524,7 @@ class SelfAssessmentDescriptor(XmlDescriptor, EditingDescriptor):
js = {'coffee': [resource_string(__name__, 'js/src/html/edit.coffee')]}
js_module_name = "HTMLEditingDescriptor"
css = {'scss': [resource_string(__name__, 'css/html/edit.scss')]}
@classmethod
def definition_from_xml(cls, xml_object, system):