Skip to content

E
edx-platform
Commit c7dbdc12 by Tom Giannattasio
Options

added asset button to visual editor

parent 10a4d4ec
Showing with 160 additions and 82 deletions
cms/static/coffee/src/views/unit.coffee
......@@ -96,6 +96,7 @@ class CMS.Views.UnitEdit extends Backbone.View
initProblemEditors(@$editor, $preview)
when 'html'
@$editor = $($('#html-editor').html())
$preview = $('<div class="html-preview"></div>')
initHTMLEditor(@$editor, $preview)
when 'discussion'
@$editor = $($('#discussion-editor').html())
......@@ -109,8 +110,7 @@ class CMS.Views.UnitEdit extends Backbone.View
$componentActions = $($('#component-actions').html())
@$componentItem.append(@$editor)
if $preview
@$componentItem.append($preview)
@$componentItem.append($preview)
@$componentItem.append($componentActions)
@$componentItem.hide()
......
cms/static/js/html-editor.js
var $body;
var $htmlPreview;
var $htmlEditor;
var $visualEditor;
var visualEditor;
var htmlEditor;
function initHTMLEditor($editor, $prev) {
/*
$htmlEditor = $editor;
htmlEditor = CodeMirror.fromTextArea($editor.find('.edit-box')[0], {
lineWrapping: true,
mode: 'xml',
lineNumbers: true,
onChange: onHTMLEditorUpdate
});
currentEditor = htmlEditor;
$(htmlEditor.getWrapperElement()).css({
'background': '#fff'
});
$(htmlEditor.getWrapperElement()).bind('click', function() {
$(htmlEditor).focus();
});
$(htmlEditor).focus();
*/
/*
$htmlEditor = $editor;
$htmlPreview = $prev;
$('.edit-box', $editor).ckeditor();
var $newEditor = $('.edit-box', $editor).ckeditorGet();
console.log($newEditor);
$newEditor.on('setData.ckeditor', function() {
console.log('change');
// there's a race condition here. wait a bit, then init tiny
setTimeout(function() {
$editor.find('.edit-box.tinymce').tinymce({
script_url : '/static/js/tiny_mce/tiny_mce.js',
theme : "advanced",
skin: 'studio',
plugins : "autolink,pagebreak,style,layer,table,save,advhr,advimage,advlink,emotions,iespell,inlinepopups,insertdatetime,preview,media,searchreplace,print,contextmenu,paste,directionality,fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras,template",
// we may want to add "styleselect" when we collect all styles used throught the lms
theme_advanced_buttons1 : "formatselect,bold,italic,underline,bullist,numlist,outdent,indent,blockquote,studio.asset,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,h4,h5,h6,blockquote",
content_css : "/static/css/html-editor.css",
width: '100%',
height: '400px',
setup : function(ed) {
ed.addButton('studio.asset', {
title : 'Add Asset',
image : '/static/img/visual-editor-image-icon.png',
onclick : function() {
ed.focus();
ed.selection.setContent('This should open the studio asset picker.');
}
});
}
});
}, 100);
htmlEditor = CodeMirror.fromTextArea($editor.find('.html-box')[0], {
lineWrapping: true,
mode: 'text/html',
lineNumbers: true
});
*/
$htmlEditor = $editor;
$htmlPreview = $prev;
$editor.find('.edit-box.tinymce').tinymce({
// Location of TinyMCE script
script_url : '/static/js/tiny_mce/tiny_mce.js',
// General options
theme : "advanced",
skin: 'studio',
plugins : "autolink,lists,pagebreak,style,layer,table,save,advhr,advimage,advlink,emotions,iespell,inlinepopups,insertdatetime,preview,media,searchreplace,print,contextmenu,paste,directionality,fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras,template,advlist",
// Theme options
// we may want to add "styleselect" when we collect all styles used throught the lms
theme_advanced_buttons1 : "bold,italic,underline,formatselect,bullist,numlist,outdent,indent,blockquote,link,unlink,code",
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,h4,h5,h6,blockquote",
// Example content CSS (should be your site CSS)
content_css : "/static/css/html-editor.css",
width: '100%',
height: '400px'
});
$editor.find('.save-button, .cancel-button').bind('click', updatePreview);
}
function convertVisualToHTML() {
htmlEditor.setValue($('.edit-box', visualEditor).html());
}
function onHTMLEditorUpdate(e) {
// codemirror
// $htmlPreview.html(htmlEditor.getValue());
function convertHTMLToVisual() {
$('.edit-box', visualEditor).html(htmlEditor.getValue());
}
// tiny
$htmlPreview.html($('.edit-box', htmlEditor).html());
function updatePreview() {
$htmlPreview.html($('.edit-box', visualEditor).html());
}
\ No newline at end of file
cms/static/js/speed-editor.js
......@@ -11,9 +11,7 @@ var commandDown;
(function() {
$body = $('body');
$body.on('click', '.editor-bar a', onEditorButton);
$body.on('click', '.editor-tabs .tab', setEditorTab);
$body.on('click', '.cheatsheet-toggle', toggleCheatsheet);
$body.on('click', '.problem-settings-button', toggleProblemSettings);
$(document).bind('keyup', onKeyboard);
......@@ -82,24 +80,6 @@ function toggleCheatsheet(e) {
}, 10);
}
function setEditorTab(e) {
e.preventDefault();
$('.editor-tabs .current').removeClass('current');
$(this).addClass('current');
if($(this).hasClass('simple-tab')) {
currentEditor = simpleEditor;
$(simpleEditor.getWrapperElement()).show();
$(xmlEditor.getWrapperElement()).hide();
$(simpleEditor).focus();
} else {
currentEditor = xmlEditor;
$(simpleEditor.getWrapperElement()).hide();
$(xmlEditor.getWrapperElement()).show();
$(xmlEditor).focus();
}
onSimpleEditorUpdate();
}
function setFocus(e) {
$(simpleEditor).focus();
}
......
cms/static/js/tiny_mce/themes/advanced/skins/studio/ui.css
.studioSkin * {
-webkit-transition: none;
-moz-transition: none;
-ms-transition: none;
-o-transition: none;
transition: none;
}
/* Reset */
......@@ -26,6 +30,10 @@
.studioSkin table.mceToolbar, .studioSkin tr.mceFirst .mceToolbar tr td, .studioSkin tr.mceLast .mceToolbar tr td {border:0; margin:0; padding:0;}
.studioSkin td.mceToolbar {
background: -webkit-linear-gradient(top, #d4dee8, #c9d5e2);
background: -moz-linear-gradient(top, #d4dee8, #c9d5e2);
background: -ms-linear-gradient(top, #d4dee8, #c9d5e2);
background: -o-linear-gradient(top, #d4dee8, #c9d5e2);
background: linear-gradient(top, #d4dee8, #c9d5e2);
border: 1px solid #3c3c3c;
border-bottom-color: #a5aaaf;
border-radius: 3px 3px 0 0;
......@@ -64,6 +72,10 @@
/* ListBox */
.studioSkin .mceListBox {
background: -webkit-linear-gradient(top, #dbe5ef, #cfdce9);
background: -moz-linear-gradient(top, #dbe5ef, #cfdce9);
background: -ms-linear-gradient(top, #dbe5ef, #cfdce9);
background: -o-linear-gradient(top, #dbe5ef, #cfdce9);
background: linear-gradient(top, #dbe5ef, #cfdce9);
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.4) inset, 0 0 0 1px rgba(0, 0, 0, 0.2);
border-radius: 2px;
padding: 3px;
......@@ -71,6 +83,10 @@
}
.studioSkin .mceListBox:hover {
background: -webkit-linear-gradient(top, #e6eff8, #d9e8f6);
background: -moz-linear-gradient(top, #e6eff8, #d9e8f6);
background: -ms-linear-gradient(top, #e6eff8, #d9e8f6);
background: -o-linear-gradient(top, #e6eff8, #d9e8f6);
background: linear-gradient(top, #e6eff8, #d9e8f6);
}
.studioSkin .mceListBox, .studioSkin .mceListBox a {display:block}
.studioSkin .mceListBox .mceText {padding-left:4px; width:70px; text-align:left; font-size:11px; height:20px; line-height:20px; overflow:hidden}
......
cms/static/sass/_unit.scss
......@@ -83,6 +83,10 @@
.component-actions {
display: none;
}
.html-preview {
display: none;
}
}
&.component-placeholder {
......@@ -375,6 +379,55 @@
}
}
.html-editor {
.row {
position: relative;
}
textarea {
display: none;
}
.CodeMirror {
display: none;
position: absolute;
top: 47px;
width: 100%;
height: 378px;
@include box-sizing(border-box);
}
.editor-tabs {
position: absolute;
top: 31px;
right: 30px;
z-index: 99;
li {
float: left;
}
.tab {
display: block;
height: 24px;
padding: 7px 20px 3px;
margin-left: 7px;
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;
}
}
}
}
.html-preview,
.discussion-preview {
padding: 20px 30px;
......
cms/templates/unit.html
......@@ -12,10 +12,45 @@
state: '${unit_state}'
})
});
$body = $('body');
$body.on('click', '.editor-tabs .tab', setEditorTab);
function setEditorTab(e) {
e.preventDefault();
$('.editor-tabs .current').removeClass('current');
$(this).addClass('current');
switch($(this).attr('data-tab')) {
case 'simple':
currentEditor = simpleEditor;
$(simpleEditor.getWrapperElement()).show();
$(xmlEditor.getWrapperElement()).hide();
$(simpleEditor).focus();
break;
case 'xml':
currentEditor = xmlEditor;
$(simpleEditor.getWrapperElement()).hide();
$(xmlEditor.getWrapperElement()).show();
$(xmlEditor).focus();
break;
case 'visual':
$('table.mceToolbar').show();
$(htmlEditor.getWrapperElement()).hide();
convertHTMLToVisual();
break;
case 'html':
$('table.mceToolbar').hide();
$(htmlEditor.getWrapperElement()).show();
convertVisualToHTML();
break;
}
onSimpleEditorUpdate();
}
</script>
<script src="/static/js/speed-editor.js"></script>
<script src="/static/js/html-editor.js"></script>
<script src="/static/js/tiny_mce/tiny_mce.js"></script>
<script src="/static/js/tiny_mce/jquery.tinymce.js"></script>
<script type="text/template" id="simple-editor-cheatsheet">
......@@ -94,8 +129,8 @@
<li><a href="#" class="dropdown-button" data-tooltip="Dropdown"><span class="problem-editor-icon dropdown"></span></a></li>
</ul>
<ul class="editor-tabs">
<li><a href="#" class="simple-tab tab current">Simple</a></li>
<li><a href="#" class="xml-tab tab">XML</a></li>
<li><a href="#" class="simple-tab tab current" data-tab="simple">Simple</a></li>
<li><a href="#" class="xml-tab tab" data-tab="xml">XML</a></li>
<li><a href="#" class="cheatsheet-toggle" data-tooltip="Toggle Cheatsheet">?</a></li>
</ul>
</div>
......@@ -147,8 +182,13 @@
<script type="text/template" id="html-editor">
<div 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="html">HTML</a></li>
</ul>
<div class="row">
<textarea class="edit-box tinymce"></textarea>
<textarea class="html-box"></textarea>
</div>
<div class="row">
<a href="#" class="save-button">Save</a><a href="#" class="cancel-button">Cancel</a>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment