From d47835d829778ef544df3df5c78587abb669ec1c Mon Sep 17 00:00:00 2001 From: Alexander Ebert Date: Fri, 28 Mar 2014 18:37:41 +0100 Subject: [PATCH] Improved Redactor integration --- com.woltlab.wcf/templates/wysiwyg.tpl | 22 +++--- com.woltlab.wcf/templates/wysiwygToolbar.tpl | 74 +++++++++---------- .../js/3rdParty/redactor/plugins/wbbcode.js | 3 +- .../js/3rdParty/redactor/plugins/wbutton.js | 44 +++++++++++ .../js/3rdParty/redactor/plugins/wutil.js | 23 ++++++ wcfsetup/install/files/style/message.less | 45 ++++++++++- 6 files changed, 155 insertions(+), 56 deletions(-) diff --git a/com.woltlab.wcf/templates/wysiwyg.tpl b/com.woltlab.wcf/templates/wysiwyg.tpl index 4a1283fce4..91903e4b03 100644 --- a/com.woltlab.wcf/templates/wysiwyg.tpl +++ b/com.woltlab.wcf/templates/wysiwyg.tpl @@ -12,24 +12,22 @@ $(function() { WCF.System.Dependency.Manager.setup($callbackIdentifier, function() { var $textarea = $('#' + $editorName); + var $buttons = [ ]; - // - // TODO: toolbar configuration / 'wysiwygToolbar.tpl' - // + {include file='wysiwygToolbar'} + var $autosave = $textarea.data('autosave'); var $config = { + buttons: $buttons, linebreaks: true, minHeight: 200, - plugins: [ 'wbbcode', 'wbutton', 'wfontcolor', 'wmonkeypatch', 'wutil' ] - }; - - // autosave config - if ($textarea.data('autosave')) { - $config.wautosave = { - active: true, - key: $textarea.data('autosave') + plugins: [ 'wutil', 'wmonkeypatch', 'wbutton', 'wbbcode', 'wfontcolor' ], + wautosave: { + active: ($autosave) ? true : false, + key: ($autosave) ? $autosave : '', + saveOnInit: {if !$errorField|empty}true{else}false{/if} } - } + }; {event name='javascriptInit'} diff --git a/com.woltlab.wcf/templates/wysiwygToolbar.tpl b/com.woltlab.wcf/templates/wysiwygToolbar.tpl index ba2ef85820..446a135b22 100644 --- a/com.woltlab.wcf/templates/wysiwygToolbar.tpl +++ b/com.woltlab.wcf/templates/wysiwygToolbar.tpl @@ -1,43 +1,49 @@ -var $textStyles1 = [ ]; +$buttons.push('html'); +$buttons.push('separator'); + {if $__wcf->getBBCodeHandler()->isAvailableBBCode('b')} - $textStyles1.push('Bold'); + $buttons.push('bold'); {/if} {if $__wcf->getBBCodeHandler()->isAvailableBBCode('i')} - $textStyles1.push('Italic'); + $buttons.push('italic'); {/if} {if $__wcf->getBBCodeHandler()->isAvailableBBCode('u')} - $textStyles1.push('Underline'); + $buttons.push('underline'); {/if} -var $textStyles2 = [ ]; +if ($buttons.length) { + $buttons.push('separator'); +} + {if $__wcf->getBBCodeHandler()->isAvailableBBCode('s')} - $textStyles2.push('Strike'); + $buttons.push('deleted'); {/if} {if $__wcf->getBBCodeHandler()->isAvailableBBCode('sub')} - $textStyles2.push('Subscript'); + $buttons.push('subscript'); {/if} {if $__wcf->getBBCodeHandler()->isAvailableBBCode('sup')} - $textStyles2.push('Superscript'); + $buttons.push('superscript'); {/if} -if ($textStyles2.length) { - $textStyles1.push('-'); - $textStyles1 = $textStyles1.concat($textStyles2); +if ($buttons.length && $buttons[$buttons.length -1] != 'separator') { + $buttons.push('separator'); } -var $formatting = [ ]; {if $__wcf->getBBCodeHandler()->isAvailableBBCode('list')} - $formatting.push('NumberedList'); - $formatting.push('BulletedList'); - $formatting.push('-'); + $buttons.push('orderedlist'); + $buttons.push('unorderedlist'); + $buttons.push('outdent'); + $buttons.push('indent'); {/if} {if $__wcf->getBBCodeHandler()->isAvailableBBCode('align')} - $formatting.push('JustifyLeft'); - $formatting.push('JustifyCenter'); - $formatting.push('JustifyRight'); - $formatting.push('JustifyBlock'); + $buttons.push('alignment'); {/if} +if ($buttons.length && $buttons[$buttons.length -1] != 'separator') { + $buttons.push('separator'); +} + +{* TODO var $font = [ ]; {if $__wcf->getBBCodeHandler()->isAvailableBBCode('font')} $font.push('Font'); @@ -48,36 +54,22 @@ var $font = [ ]; {if $__wcf->getBBCodeHandler()->isAvailableBBCode('color')} $font.push('TextColor'); {/if} +*} -var $other = [ ]; {if $__wcf->getBBCodeHandler()->isAvailableBBCode('url')} - $other.push('Link'); - $other.push('Unlink'); + $buttons.push('link'); {/if} {if $__wcf->getBBCodeHandler()->isAvailableBBCode('img')} - $other.push('Image'); + $buttons.push('image'); {/if} {if $__wcf->getBBCodeHandler()->isAvailableBBCode('table')} - $other.push('Table'); + $buttons.push('table'); {/if} + {if MODULE_SMILEY && (!$permissionCanUseSmilies|isset || $__wcf->getSession()->getPermission($permissionCanUseSmilies)) && $defaultSmilies|isset && $defaultSmilies|count} - $other.push('Smiley'); + $buttons.push('smiley'); {/if} -var __CKEDITOR_TOOLBAR = [ ]; -__CKEDITOR_TOOLBAR.push(['Source', '-', 'Undo', 'Redo']); -if ($textStyles1.length) { - __CKEDITOR_TOOLBAR.push($textStyles1); -} -if ($formatting.length) { - __CKEDITOR_TOOLBAR.push($formatting); -} -if (__CKEDITOR_TOOLBAR.length > 1) { - __CKEDITOR_TOOLBAR.push('/'); -} -if ($font.length) { - __CKEDITOR_TOOLBAR.push($font); -} -if ($other.length) { - __CKEDITOR_TOOLBAR.push($other); +if ($buttons.length && $buttons[$buttons.length -1] != 'separator') { + $buttons.push('separator'); } diff --git a/wcfsetup/install/files/js/3rdParty/redactor/plugins/wbbcode.js b/wcfsetup/install/files/js/3rdParty/redactor/plugins/wbbcode.js index 0ec0169f8c..48d53ec538 100644 --- a/wcfsetup/install/files/js/3rdParty/redactor/plugins/wbbcode.js +++ b/wcfsetup/install/files/js/3rdParty/redactor/plugins/wbbcode.js @@ -14,7 +14,8 @@ RedactorPlugins.wbbcode = { init: function() { this._createSmileyDropdown(); - this.buttonAdd('wsmiley', 'Smiley', $.proxy(function(btnName, $button, btnObject, e) { + + this.buttonReplace('smiley', 'wsmiley', 'Smiley', $.proxy(function(btnName, $button, btnObject, e) { this.dropdownShow(e, btnName); }, this)); this.buttonAwesome('wsmiley', 'fa-smile-o'); diff --git a/wcfsetup/install/files/js/3rdParty/redactor/plugins/wbutton.js b/wcfsetup/install/files/js/3rdParty/redactor/plugins/wbutton.js index 168bd8383f..f251fa7d06 100644 --- a/wcfsetup/install/files/js/3rdParty/redactor/plugins/wbutton.js +++ b/wcfsetup/install/files/js/3rdParty/redactor/plugins/wbutton.js @@ -23,6 +23,50 @@ RedactorPlugins.wbutton = { for (var $i = 0, $length = __REDACTOR_BUTTONS.length; $i < $length; $i++) { this._addBBCodeButton(__REDACTOR_BUTTONS[$i]); } + + var $faIcons = { + 'alignment': 'align-left', + 'deleted': 'strikethrough', + 'html': 'file-o', + 'image': 'picture-o', + 'orderedlist': 'list-ol', + 'smiley': 'smile-o', + 'unorderedlist': 'list-ul' + }; + + var $buttons = this.getOption('buttons'); + var $lastButton = ''; + for (var $i = 0, $length = $buttons.length; $i < $length; $i++) { + var $button = $buttons[$i]; + + if ($button == 'separator') { + this.buttonGet($lastButton).parent().addClass('separator'); + + continue; + } + + // check if button does not exist + var $buttonObj = this.buttonGet($button); + var $className = ($faIcons[$button]) ? $faIcons[$button] : $button; + if ($buttonObj.length) { + this.buttonAwesome($button, 'fa-' + $className); + } + else { + this._addCoreButton($button, $className, $lastButton); + } + + $lastButton = $button; + } + }, + + _addCoreButton: function(buttonName, className, insertAfter) { + var $button = this.buttonBuild(buttonName, { + title: buttonName, + exec: buttonName + }, false); + $('
  • ').append($button).insertAfter(this.buttonGet(insertAfter).parent()); + + this.buttonAwesome(buttonName, 'fa-' + className); }, /** diff --git a/wcfsetup/install/files/js/3rdParty/redactor/plugins/wutil.js b/wcfsetup/install/files/js/3rdParty/redactor/plugins/wutil.js index 9ea65907f7..0d52ee0cf6 100644 --- a/wcfsetup/install/files/js/3rdParty/redactor/plugins/wutil.js +++ b/wcfsetup/install/files/js/3rdParty/redactor/plugins/wutil.js @@ -259,5 +259,28 @@ RedactorPlugins.wutil = { } return false; + }, + + /** + * Replaces one button with a new one. + * + * @param string target + * @param string key + * @param string title + * @param object callback + * @param object dropdown + * @return jQuery + */ + buttonReplace: function(target, key, title, callback, dropdown) { + var $target = this.buttonGet(target); + + var $button = this.buttonAddAfter(target, key, title, callback, dropdown); + if ($target.parent().hasClass('separator')) { + $button.parent().addClass('separator'); + } + + $target.parent().remove(); + + return $button; } }; diff --git a/wcfsetup/install/files/style/message.less b/wcfsetup/install/files/style/message.less index d56891a5bc..cd0a64fada 100644 --- a/wcfsetup/install/files/style/message.less +++ b/wcfsetup/install/files/style/message.less @@ -430,7 +430,7 @@ display: block; line-height: 1.5; - > div:not(.messageFooter) { + > div:not(.messageFooter):not(.redactor_box) { overflow: hidden; padding-bottom: @wcfGapMedium; } @@ -464,7 +464,7 @@ .linearGradientNative(~"90deg, @{messageFooterNoteGradientColor} 0%, transparent 40%"); } -.messageHeader + .messageBody > div:first-child, +.messageHeader + .messageBody > div:first-child:not(.redactor_box), .messageBody > div:not(.messageFooter):not(:first-child) { border-top: 1px dotted @wcfContainerBorderColor; padding: @wcfGapMedium 0; @@ -919,6 +919,47 @@ li:nth-child(2n+1) .message { } } +.redactor_toolbar { + background-color: @wcfButtonBackgroundColor !important; + + &:after { + display: inline !important; + } + + > li { + &:last-child, + &.separator { + border-right: 1px solid @wcfButtonBorderColor; + } + + > a { + background-color: @wcfButtonBackgroundColor; + color: rgba(51, 51, 51, 1) !important; + + .textShadow(@wcfButtonBackgroundColor); + + &> i:before { + color: rgba(51, 51, 51, 1) !important; + } + + &:hover { + background-color: rgba(204, 204, 204, 1) !important; + color: rgba(51, 51, 51, 1) !important; + + .textShadow(@wcfButtonHoverBackgroundColor); + + > i:before { + color: rgba(51, 51, 51, 1) !important; + } + } + + &.re-icon:before { + content: ""; + } + } + } +} + .redactor_dropdown_box_wsmiley > ul > li:not(:last-child) { margin-right: 3px !important; } -- 2.20.1