Skip to content

E
edx-platform
Commit b0bbb346 by Don Mitchell
Options

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

Feature/christina/tiny mce
parents c7d9eb23 2609ba40
Showing with 257 additions and 58 deletions
cms/static/css/tiny-mce.css
@font-face{font-family:'Open Sans';font-style:normal;font-weight:700;src:local("Open Sans Bold"),local("OpenSans-Bold"),url(http://themes.googleusercontent.com/static/fonts/opensans/v6/k3k702ZOKiLJc3WVjuplzKRDOzjiPcYnFooOUGCOsRk.woff) format("woff")}@font-face{font-family:'Open Sans';font-style:normal;font-weight:300;src:local("Open Sans Light"),local("OpenSans-Light"),url(http://themes.googleusercontent.com/static/fonts/opensans/v6/DXI1ORHCpsQm3Vp6mXoaTaRDOzjiPcYnFooOUGCOsRk.woff) format("woff")}@font-face{font-family:'Open Sans';font-style:italic;font-weight:700;src:local("Open Sans Bold Italic"),local("OpenSans-BoldItalic"),url(http://themes.googleusercontent.com/static/fonts/opensans/v6/PRmiXeptR36kaC0GEAetxhbnBKKEOwRKgsHDreGcocg.woff) format("woff")}@font-face{font-family:'Open Sans';font-style:italic;font-weight:300;src:local("Open Sans Light Italic"),local("OpenSansLight-Italic"),url(http://themes.googleusercontent.com/static/fonts/opensans/v6/PRmiXeptR36kaC0GEAetxvR_54zmj3SbGZQh3vCOwvY.woff) format("woff")}@font-face{font-family:'Open Sans';font-style:italic;font-weight:400;src:local("Open Sans Italic"),local("OpenSans-Italic"),url(http://themes.googleusercontent.com/static/fonts/opensans/v6/xjAJXh38I15wypJXxuGMBrrIa-7acMAeDBVuclsi6Gc.woff) format("woff")}@font-face{font-family:'Open Sans';font-style:normal;font-weight:400;src:local("Open Sans"),local("OpenSans"),url(http://themes.googleusercontent.com/static/fonts/opensans/v6/cJZKeOuBrn4kERxqtaUH3bO3LdcAZYWl9Si6vvxL-qU.woff) format("woff")}
.mceContentBody {
padding: 10px;
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;
padding: 10px;
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;
}
h1 {
color: #3c3c3c;
font-weight: normal;
font-size: 2em;
line-height: 1.4em;
letter-spacing: 1px;
color: #3c3c3c;
font-weight: normal;
font-size: 2em;
line-height: 1.4em;
letter-spacing: 1px;
margin: 0 0 1.416em 0;
}
h2 {
color: #646464;
font-weight: normal;
font-size: 1.2em;
line-height: 1.2em;
letter-spacing: 1px;
margin-bottom: 15px;
text-transform: uppercase;
-webkit-font-smoothing: antialiased;
color: #646464;
font-weight: normal;
font-size: 1.2em;
line-height: 1.2em;
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;
font-weight: 600;
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;
margin-bottom: 1.416em;
font-size: 1em;
line-height: 1.6em !important;
color: #3c3c3c;
}
em, i {
font-style: italic;
font-style: italic;
}
strong, b {
font-style: bold;
font-style: bold;
}
p + p, ul + p, ol + p {
margin-top: 20px;
margin-top: 20px;
}
ol, ul {
margin: 1em 0;
padding: 0 0 0 1em;
margin: 1em 0;
padding: 0 0 0 1em;
color: #3c3c3c;
}
ol li, ul li {
margin-bottom: 0.708em;
margin-bottom: 0.708em;
}
ol {
list-style: decimal outside none;
list-style: decimal outside none;
}
ul {
list-style: disc outside none;
list-style: disc outside none;
}
a, a:link, a:visited, a:hover, a:active {
color: #1d9dd9;
}
color: #1d9dd9;
}
img {
max-width: 100%;
max-width: 100%;
}
code {
pre {
margin: 1em 0;
color: #3c3c3c;
font-family: monospace, serif;
background: none;
}
\ No newline at end of file
font-size: 1em;
white-space: pre-wrap;
word-wrap: break-word;
}
code {
font-family: monospace, serif;
background: none;
color: #3c3c3c;
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;
}
cms/static/sass/_base.scss
......@@ -199,7 +199,7 @@ code {
padding: 20px;
}
h4 {
.header {
padding: 6px 14px;
border-bottom: 1px solid $mediumGrey;
border-radius: 2px 2px 0 0;
......
cms/templates/edit-static-page.html
......@@ -20,7 +20,7 @@
</div>
<div class="sidebar">
<div class="unit-settings window">
<h4>Page Settings</h4>
<h4 class="header">Page Settings</h4>
<div class="window-contents">
<div class="row visibility">
<label class="inline-label">Visibility:</label>
......
cms/templates/edit_subsection.html
......@@ -48,7 +48,7 @@
<div class="sidebar">
<div class="unit-settings window id-holder" data-id="${subsection.location}">
<h4>Subsection Settings</h4>
<h4 class="header">Subsection Settings</h4>
<div class="window-contents">
<div class="scheduled-date-input row">
<label>Release date:<!-- <span class="description">Determines when this subsection and the units within it will be released publicly.</span>--></label>
......
cms/templates/unit.html
......@@ -98,7 +98,7 @@
<div class="sidebar">
<div class="unit-settings window">
<h4>Unit Settings</h4>
<h4 class="header">Unit Settings</h4>
<div class="window-contents">
<div class="row visibility">
<label class="inline-label">Visibility:</label>
......@@ -126,7 +126,7 @@
</div>
</div>
<div class="window unit-location">
<h4>Unit Location</h4>
<h4 class="header">Unit Location</h4>
<div class="window-contents">
<div><input type="text" class="url" value="/courseware/${section.url_name}/${subsection.url_name}" disabled /></div>
<ol>
......
common/lib/xmodule/xmodule/css/html/display.scss 0 → 100644
// 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;
}
\ No newline at end of file
common/lib/xmodule/xmodule/css/html/edit.scss
// 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()
......
lms/static/sass/base/_variables.scss
......@@ -15,6 +15,8 @@ $monospace: Monaco, 'Bitstream Vera Sans Mono', 'Lucida Console', monospace;
$body-font-size: em(14);
$body-line-height: golden-ratio(.875em, 1);
$base-font-color: rgb(60,60,60);
$baseFontColor: rgb(60,60,60);
$base-font-color: rgb(60,60,60);
$lighter-base-font-color: rgb(100,100,100);
$blue: rgb(29,157,217);
......
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