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

Pretty much works.

Browse Source
This commit is contained in:
cahrens
2013-01-11 15:50:46 -05:00
parent db9875758f
commit 29f49895d3
5 changed files with 123 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

50
cms/static/css/tiny-mce.css Normal file
View File

@@ -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;
}

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

@@ -1,15 +1,13 @@
<%include file="metadata-edit.html" />
<section class="html-edit">
<div class="html-editor editor">
<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="html">Advanced</a></li>
</ul>
</div>
<textarea class="tiny-mce">${data}</textarea>
<div name="" class="edit-box">${data}</div>
<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>

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

@@ -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;

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

@@ -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

7
common/lib/xmodule/xmodule/templates/html/empty.yaml Normal file
View File

@@ -0,0 +1,7 @@
---
metadata:
display_name: Empty
data: |
children: []