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

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

Browse Source 
Feature/christina/tiny mce
This commit is contained in:
Don Mitchell
2013-01-23 09:14:42 -08:00
parent c7d9eb23f1 2609ba4093
commit b0bbb34644
11 changed files with 256 additions and 57 deletions
Download Patch File Download Diff File Expand all files Collapse all files

145
cms/static/css/tiny-mce.css
View File

@@ -1,89 +1,140 @@
@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%;
}
pre {
margin: 1em 0;
color: #3c3c3c;
font-family: monospace, serif;
font-size: 1em;
white-space: pre-wrap;
word-wrap: break-word;
}
code {
font-family: monospace, serif;
background: none;
}
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;
}

2
cms/static/sass/_base.scss
View File

@@ -199,7 +199,7 @@ code {
padding: 20px;
}
h4 {
.header {
padding: 6px 14px;
border-bottom: 1px solid $mediumGrey;
border-radius: 2px 2px 0 0;

2
cms/templates/edit-static-page.html
View File

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

2
cms/templates/edit_subsection.html
View File

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

4
cms/templates/unit.html
View File

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

123
common/lib/xmodule/xmodule/css/html/display.scss Normal file
View File

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

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

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

3
common/lib/xmodule/xmodule/html_module.py
View File

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

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

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

BIN
common/static/images/ico-tinymce-code.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 553 B

2
lms/static/sass/base/_variables.scss
View File

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