Redactor buttons now allow both FontAwesome classes and images

diff --git a/com.woltlab.wcf/bbcode.xml b/com.woltlab.wcf/bbcode.xml
index 92b358fa768cdc322a6386378b0d9f4828e98f5a..5d889f89ce6c50b22dd73e19ffd6e02889fbfa34 100644 (file)
--- a/com.woltlab.wcf/bbcode.xml
+++ b/com.woltlab.wcf/bbcode.xml
@@ -95,7 +95,7 @@
                                <attribute name="0"></attribute>
                                <attribute name="1"></attribute>
                        </attributes>
-                       <wysiwygicon>quote.png</wysiwygicon>
+                       <wysiwygicon>fa-quote-left</wysiwygicon>
                        <buttonlabel>wcf.bbcode.button.quote</buttonlabel>
                </bbcode>
                <bbcode name="code">
@@ -107,7 +107,7 @@
                                </attribute>
                        </attributes>
                        <sourcecode>1</sourcecode>
-                       <wysiwygicon>code.png</wysiwygicon>
+                       <wysiwygicon>fa-code</wysiwygicon>
                        <buttonlabel>wcf.bbcode.button.code</buttonlabel>
                </bbcode>
                <bbcode name="img">
@@ -156,7 +156,7 @@
                        <attributes>
                                <attribute name="0"></attribute>
                        </attributes>
-                       <wysiwygicon>spoiler.png</wysiwygicon>
+                       <wysiwygicon>fa-eye-slash</wysiwygicon>
                        <buttonlabel>wcf.bbcode.button.spoiler</buttonlabel>
                </bbcode>
                <bbcode name="tt">
@@ -164,7 +164,7 @@
                        <htmlclose>code</htmlclose>
                        <allowedchildren>none</allowedchildren>
                        <sourcecode>1</sourcecode>
-                       <wysiwygicon>inlineCode.png</wysiwygicon>
+                       <wysiwygicon>fa-font</wysiwygicon>
                        <buttonlabel>wcf.bbcode.button.inlineCode</buttonlabel>
                </bbcode>
                

diff --git a/com.woltlab.wcf/templates/wysiwyg.tpl b/com.woltlab.wcf/templates/wysiwyg.tpl
index abe703dfaf38d3acc2ba7fa4fc857be243c68f90..365d41e8191104591b46f276cd398d704e0e84d7 100644 (file)
--- a/com.woltlab.wcf/templates/wysiwyg.tpl
+++ b/com.woltlab.wcf/templates/wysiwyg.tpl
@@ -1,6 +1,7 @@
 <link rel="stylesheet" type="text/css" href="{@$__wcf->getPath()}js/3rdParty/redactor/redactor.css" />
 <script data-relocate="true">
-var __REDACTOR_BUTTONS = [ {implode from=$__wcf->getBBCodeHandler()->getButtonBBCodes() item=__bbcode}{ icon: '{@$__wcf->getPath()}/icon/{$__bbcode->wysiwygIcon}', label: '{$__bbcode->buttonLabel|language}', name: '{$__bbcode->bbcodeTag}' }{/implode} ];
+var __REDACTOR_ICON_PATH = '{@$__wcf->getPath()}icon/';
+var __REDACTOR_BUTTONS = [ {implode from=$__wcf->getBBCodeHandler()->getButtonBBCodes() item=__bbcode}{ icon: '{$__bbcode->wysiwygIcon}', label: '{$__bbcode->buttonLabel|language}', name: '{$__bbcode->bbcodeTag}' }{/implode} ];
 var __REDACTOR_SMILIES = { {implode from=$defaultSmilies item=smiley}'{@$smiley->smileyCode|encodeJS}': '{@$smiley->getURL()|encodeJS}'{/implode} };
 var __REDACTOR_SOURCE_BBCODES = [ {implode from=$__wcf->getBBCodeHandler()->getSourceBBCodes() item=__bbcode}'{@$__bbcode->bbcodeTag}'{/implode} ];
 </script>

diff --git a/wcfsetup/install/files/js/3rdParty/redactor/plugins/wbutton.js b/wcfsetup/install/files/js/3rdParty/redactor/plugins/wbutton.js
index 6b3e771cac5b38ad7b517dbcb685c3b6f6c583fd..168bd8383f434367f48f988412b5c2aea0a6b185 100644 (file)
--- a/wcfsetup/install/files/js/3rdParty/redactor/plugins/wbutton.js
+++ b/wcfsetup/install/files/js/3rdParty/redactor/plugins/wbutton.js
@@ -32,32 +32,17 @@ RedactorPlugins.wbutton = {
         */
        _addBBCodeButton: function(data) {
                var $buttonName = '__wcf_' + data.name;
-               this.buttonAdd($buttonName, data.label, this._insertBBCode);
+               var $button = this.buttonAdd($buttonName, data.label, this._insertBBCode);
                this._bbcodes[$buttonName] = data.name;
                
-               //
-               // TODO: These are hardcoded for now, since the API does not provide class names yet, this has to be changes
-               //
-               var $iconName = '';
-               switch (data.name) {
-                       case 'code':
-                               $iconName = 'fa-code';
-                       break;
-                       
-                       case 'quote':
-                               $iconName = 'fa-quote-left';
-                       break;
-                       
-                       case 'spoiler':
-                               $iconName = 'fa-eye-slash';
-                       break;
-                       
-                       case 'tt':
-                               $iconName = 'fa-font';
-                       break;
+               // FontAwesome class name
+               if (data.icon.match(/^fa\-[a-z\-]+$/)) {
+                       this.buttonAwesome($buttonName, data.icon);
+               }
+               else {
+                       // image reference
+                       $button.css('background-image', 'url(' + __REDACTOR_ICON_PATH + data.icon + ')');
                }
-               
-               this.buttonAwesome($buttonName, $iconName);
        },
        
        /**