TPS
/
ORIENT
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Improvements to rich editor

This commit is contained in:
Sam Georges 2014-09-13 14:09:48 +10:00
parent e63a083ca2
commit 277a2daf7b
3 changed files with 62 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
modules/backend/assets/less/core/variables.less
View File

@ -120,7 +120,12 @@
@color-scroll-indicator: #bbbbbb;
@color-scrollpanel-fix-button: #aaaaaa;
@color-form-editor-toolbar: #f6f6f6;
@color-richeditor-toolbar: #dddddd;
@color-richeditor-toolbar-btn-color: #404040;
@color-richeditor-toolbar-btn-bg: #404040;
@color-richeditor-toolbar-btn-bg-hover: #999999;
@color-richeditor-toolbar-btn-color-hover: #ffffff;
@color-form-field-border: #e0e0e0;
@color-form-field-border-focus: #808c8d;
@color-form-required-asterisk: #ff0000;

22
modules/backend/formwidgets/richeditor/assets/js/richeditor.js
View File

@ -20,7 +20,6 @@
this.$el = $(element)
this.$textarea = this.$el.find('>textarea:first')
this.$form = this.$el.closest('form')
this.editor = null
this.init();
}
@ -44,10 +43,15 @@
* Initialize Redactor editor
*/
var redactorOptions = {
observeImages: false,
focusCallback: function() { self.$el.addClass('editor-focus') },
blurCallback: function() { self.$el.removeClass('editor-focus') },
initCallback: function() { self.build() },
changeCallback: function() { self.onChange() }
changeCallback: function() {
self.sanityCheckContent(this.$editor)
// this.$editor.trigger('mutate')
self.$form.trigger('change')
}
}
if (this.options.stylesheet) {
@ -59,6 +63,8 @@
redactorOptions.fullpage = true
}
// redactorOptions.plugins = ['cleanup', 'fullscreen', 'figure', 'table', 'quote']
this.$textarea.redactor(redactorOptions)
}
@ -86,9 +92,17 @@
})
}
RichEditor.prototype.onChange = function() {
this.$form.trigger('change')
RichEditor.prototype.sanityCheckContent = function($editor) {
// First and last elements should always be paragraphs
var safeElements = 'p, h1, h2, h3, h4, h5';
if (!$editor.children(':last-child').is(safeElements)) {
$editor.append('<p><br></p>')
}
if (!$editor.children(':first-child').is(safeElements)) {
$editor.prepend('<p><br></p>')
}
}
// RICHEDITOR PLUGIN DEFINITION

58
modules/backend/formwidgets/richeditor/assets/less/richeditor.less
View File

@ -2,14 +2,19 @@
@richeditor-toolbar-size: 30px;
.field-flush .field-richeditor {
&, &.editor-focus {
border: none;
}
}
.field-richeditor {
border: 1px solid @color-form-field-border;
&, .redactor_box, .redactor_toolbar {
.border-radius(5px);
}
&.editor-focus {
border-color: @color-form-field-border-focus;
&.editor-focus {
border-color: @color-form-field-border-focus;
}
&.size-tiny textarea { height: (@size-tiny - @richeditor-toolbar-size); }
@ -20,18 +25,39 @@
.redactor_box {
border: none;
.redactor_toolbar {
.border-top-radius(3px);
.border-bottom-radius(0);
background: @color-form-editor-toolbar;
border-bottom: 1px solid @color-form-field-border;
.box-shadow(none);
}
iframe {
border: none;
}
}
.redactor_toolbar {
.border-top-radius(3px);
.border-bottom-radius(0);
background: @color-richeditor-toolbar;
border-bottom: none;
.box-shadow(none);
border: none;
li a {
zoom: 1;
font-size: 14px;
color: @color-richeditor-toolbar-btn-color;
width: 20px;
line-height: 20px;
text-align: center;
&:hover {
outline: none;
background-color: @color-richeditor-toolbar-btn-bg-hover;
color: @color-richeditor-toolbar-btn-color-hover;
}
&:active, &.redactor_act {
outline: none;
background-color: @color-richeditor-toolbar-btn-bg;
color: @color-richeditor-toolbar-btn-color-hover;
}
}
}
&.stretch {
.redactor_box {
display: block;
@ -46,16 +72,6 @@
position: absolute;
top: 0;
width: 100%;
> li:first-child:after {
position: absolute;
content: ' ';
width: 100%;
height: 1px;
left: 0;
top: 32px;
background-color: @color-form-field-border;
}
}
iframe, textarea {
@ -65,4 +81,6 @@
}
}
}
}
}