diff --git a/modules/backend/assets/less/core/variables.less b/modules/backend/assets/less/core/variables.less index 63b648d53..6183ffbcd 100644 --- a/modules/backend/assets/less/core/variables.less +++ b/modules/backend/assets/less/core/variables.less @@ -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; diff --git a/modules/backend/formwidgets/richeditor/assets/js/richeditor.js b/modules/backend/formwidgets/richeditor/assets/js/richeditor.js index 94ae339c5..928e3f1bc 100644 --- a/modules/backend/formwidgets/richeditor/assets/js/richeditor.js +++ b/modules/backend/formwidgets/richeditor/assets/js/richeditor.js @@ -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('


') + } + + if (!$editor.children(':first-child').is(safeElements)) { + $editor.prepend('


') + } } // RICHEDITOR PLUGIN DEFINITION diff --git a/modules/backend/formwidgets/richeditor/assets/less/richeditor.less b/modules/backend/formwidgets/richeditor/assets/less/richeditor.less index 3cf906006..2ecec04b7 100644 --- a/modules/backend/formwidgets/richeditor/assets/less/richeditor.less +++ b/modules/backend/formwidgets/richeditor/assets/less/richeditor.less @@ -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 @@ } } } -} \ No newline at end of file + +} +