Improved Redactor integration

diff --git a/com.woltlab.wcf/templates/wysiwyg.tpl b/com.woltlab.wcf/templates/wysiwyg.tpl
index 4a1283fce42ff85556e13dca52fee979057de696..91903e4b0325c0e4172f1a8eefc3bb032bc2738a 100644 (file)
--- 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 ba2ef85820e442ec4ed8814f0857ea738b26ab46..446a135b22c897054f28365a6fe69da607586cbb 100644 (file)
--- 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 0ec0169f8c6331d398ce89284992b8d1c28a55d1..48d53ec53895ff740e6d7b609713b2f12764b2bd 100644 (file)
--- 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 168bd8383f434367f48f988412b5c2aea0a6b185..f251fa7d06cc7b1389f7c28831037f73c6f070f1 100644 (file)
--- 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);
+               $('<li />').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 9ea65907f7a44201fd6816fbdf128acc1ae59a9b..0d52ee0cf6b69086c33a43dbb79cbe19b41326c0 100644 (file)
--- 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 d56891a5bc7095e7dc375f141f06439084b45537..cd0a64fadae0d64024d2ce2107ca7cdcbc614f86 100644 (file)
--- 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;
 }