Added font family
authorAlexander Ebert <ebert@woltlab.com>
Tue, 30 Aug 2016 15:47:55 +0000 (17:47 +0200)
committerAlexander Ebert <ebert@woltlab.com>
Tue, 30 Aug 2016 15:48:00 +0000 (17:48 +0200)
com.woltlab.wcf/templates/wysiwyg.tpl
com.woltlab.wcf/templates/wysiwygToolbar.tpl
wcfsetup/install/files/js/3rdParty/redactor2/plugins/WoltLabFont.js [new file with mode: 0644]
wcfsetup/install/files/lib/system/html/input/filter/MessageHtmlInputFilter.class.php
wcfsetup/install/files/lib/system/html/output/node/HtmlOutputNodeWoltlabFont.class.php [new file with mode: 0644]
wcfsetup/install/files/style/ui/redactor.scss
wcfsetup/install/lang/de.xml
wcfsetup/install/lang/en.xml

index b8a52b2ad4dd5e4622530289c80dac40b49d6f43..0ce17eb9ed9988e5fc9b75915f8d5adea2e6d79e 100644 (file)
@@ -19,6 +19,7 @@
                        '{@$__wcf->getPath()}js/3rdParty/redactor2/plugins/WoltLabColor.js?v={@LAST_UPDATE_TIME}',
                        '{@$__wcf->getPath()}js/3rdParty/redactor2/plugins/WoltLabDropdown.js?v={@LAST_UPDATE_TIME}',
                        '{@$__wcf->getPath()}js/3rdParty/redactor2/plugins/WoltLabEvent.js?v={@LAST_UPDATE_TIME}',
+                       '{@$__wcf->getPath()}js/3rdParty/redactor2/plugins/WoltLabFont.js?v={@LAST_UPDATE_TIME}',
                        '{@$__wcf->getPath()}js/3rdParty/redactor2/plugins/WoltLabImage.js?v={@LAST_UPDATE_TIME}',
                        '{@$__wcf->getPath()}js/3rdParty/redactor2/plugins/WoltLabInlineCode.js?v={@LAST_UPDATE_TIME}',
                        '{@$__wcf->getPath()}js/3rdParty/redactor2/plugins/WoltLabInsert.js?v={@LAST_UPDATE_TIME}',
                                                'insert-column-right': '{lang}wcf.editor.table.insertColumnRight{/lang}',
                                                'insert-row-above': '{lang}wcf.editor.table.insertRowAbove{/lang}',
                                                'insert-row-below': '{lang}wcf.editor.table.insertRowBelow{/lang}',
-
+                                               
                                                // size
                                                'remove-size': '{lang}wcf.editor.button.size.removeSize{/lang}',
-
+                                               
                                                // color
-                                               'remove-color': '{lang}wcf.editor.button.color.removeColor{/lang}'
+                                               'remove-color': '{lang}wcf.editor.button.color.removeColor{/lang}',
+                                               
+                                               // font
+                                               'remove-font': '{lang}wcf.editor.button.font.removeFont{/lang}'
                                        }
                                },
                                linkify: false,
                                        'WoltLabCode',
                                        'WoltLabColor',
                                        'WoltLabDropdown',
+                                       'WoltLabFont',
                                        'WoltLabImage',
                                        'WoltLabInlineCode',
                                        'WoltLabInsert',
index 9f24c770ec079117ef2b24dd96f81d7523292ed2..74639405450d2478080a125a536016cc9bc44886 100644 (file)
@@ -14,6 +14,7 @@ buttonOptions = {
        underline: { icon: 'fa-underline', title: '{lang}wcf.editor.button.underline{/lang}' },
        undo: { icon: 'fa-undo', title: '{lang}wcf.editor.button.undo{/lang}' },
        woltlabColor: { icon: 'fa-paint-brush', title: '{lang}wcf.editor.button.color{/lang}' },
+       woltlabFont: { icon: 'fa-font', title: '{lang}wcf.editor.button.font{/lang}' },
        woltlabImage: { icon: 'fa-picture-o', title: '{lang}wcf.editor.button.image{/lang}' },
        woltlabMedia: { icon: 'fa-file-o', title: '{lang}wcf.editor.button.media{/lang}' },
        woltlabQuote: { icon: 'fa-comment', title: '{lang}wcf.editor.button.quote{/lang}' },
@@ -41,6 +42,9 @@ buttons.push('wcfSeparator');
 
 buttons.push('subscript');
 buttons.push('superscript');
+{if $__wcf->getBBCodeHandler()->isAvailableBBCode('font')}
+       buttons.push('woltlabFont');
+{/if}
 {if $__wcf->getBBCodeHandler()->isAvailableBBCode('size')}
        buttons.push('woltlabSize');
 {/if}
diff --git a/wcfsetup/install/files/js/3rdParty/redactor2/plugins/WoltLabFont.js b/wcfsetup/install/files/js/3rdParty/redactor2/plugins/WoltLabFont.js
new file mode 100644 (file)
index 0000000..dcc216f
--- /dev/null
@@ -0,0 +1,53 @@
+$.Redactor.prototype.WoltLabFont = function() {
+       "use strict";
+       
+       return {
+               init: function() {
+                       var fonts = ['arial', 'comicSansMs', 'courierNew', 'georgia', 'lucidaSansUnicode', 'tahoma', 'timesNewRoman', 'trebuchetMs', 'verdana']; 
+                       var fontNames = ['Arial', 'Comic Sans MS', 'Courier New', 'Georgia', 'Lucida Sans Unicode', 'Tahoma', 'Times New Roman', 'Trebuchet MS', 'Verdana'];
+                       
+                       var callback = this.WoltLabFont.setFont.bind(this);
+                       var dropdown = {};
+                       
+                       fonts.forEach(function (font, i) {
+                               dropdown[font] = {
+                                       title: fontNames[i],
+                                       func: callback
+                               };
+                       });
+                       
+                       dropdown['removeFont'] = {
+                               title: this.lang.get('remove-font'),
+                               func: this.WoltLabFont.removeFont.bind(this)
+                       };
+                       
+                       var button = this.button.add('woltlabFont', '');
+                       this.button.addDropdown(button, dropdown);
+                       
+                       // add styling
+                       button.data('dropdown').find('a').each(function(index, link) {
+                               if (link.className && link.className !== 'redactor-dropdown-removeFont') {
+                                       link.parentNode.classList.add('woltlab-font-' + link.className.replace(/^redactor-dropdown-/, ''));
+                                       link.parentNode.classList.add('woltlab-font-selection');
+                               }
+                       });
+                       
+               },
+               
+               setFont: function(key) {
+                       require(['WoltLabSuite/Core/Ui/Redactor/Format'], (function(UiRedactorFormat) {
+                               this.buffer.set();
+                               
+                               UiRedactorFormat.format(this.$editor[0], 'woltlab-font', 'woltlab-font-' + key);
+                       }).bind(this));
+               },
+               
+               removeFont: function() {
+                       require(['WoltLabSuite/Core/Ui/Redactor/Format'], (function(UiRedactorFormat) {
+                               this.buffer.set();
+                               
+                               UiRedactorFormat.removeFormat(this.$editor[0], 'woltlab-font');
+                       }).bind(this));
+               }
+       };
+};
index 42e81ca2d0b5c6868aa81c74544ba95434ea37ab..88ea19e562d452f4660932f6f5b51f448bfa7f00 100644 (file)
@@ -59,6 +59,9 @@ class MessageHtmlInputFilter implements IHtmlInputFilter {
                // size
                $definition->addElement('woltlab-size', 'Inline', 'Inline', '', ['class' => 'Text']);
                
+               // font
+               $definition->addElement('woltlab-font', 'Inline', 'Inline', '', ['class' => 'Text']);
+               
                // media
                $definition->addAttribute('img', 'data-media-id', 'Number');
                $definition->addAttribute('img', 'data-media-size', new \HTMLPurifier_AttrDef_Enum(['small', 'medium', 'large', 'original']));
diff --git a/wcfsetup/install/files/lib/system/html/output/node/HtmlOutputNodeWoltlabFont.class.php b/wcfsetup/install/files/lib/system/html/output/node/HtmlOutputNodeWoltlabFont.class.php
new file mode 100644 (file)
index 0000000..9b4db0e
--- /dev/null
@@ -0,0 +1,46 @@
+<?php
+namespace wcf\system\html\output\node;
+use wcf\system\html\node\AbstractHtmlNodeProcessor;
+use wcf\util\StringUtil;
+
+/**
+ * Processes text font.
+ * 
+ * @author      Alexander Ebert
+ * @copyright   2001-2016 WoltLab GmbH
+ * @license     GNU Lesser General Public License <http://opensource.org/licenses/lgpl-license.php>
+ * @package     WoltLabSuite\Core\System\Html\Output\Node
+ * @since       3.0
+ */
+class HtmlOutputNodeWoltlabFont extends AbstractHtmlOutputNode {
+       /**
+        * @inheritDoc
+        */
+       protected $tagName = 'woltlab-font';
+       
+       /**
+        * @inheritDoc
+        */
+       public function process(array $elements, AbstractHtmlNodeProcessor $htmlNodeProcessor) {
+               if ($this->outputType === 'text/html' || $this->outputType === 'text/simplified-html') {
+                       /** @var \DOMElement $element */
+                       foreach ($elements as $element) {
+                               $font = $element->getAttribute('class');
+                               
+                               if (preg_match('~^woltlab-font-[a-zA-Z]+$~', $font)) {
+                                       $nodeIdentifier = StringUtil::getRandomID();
+                                       $htmlNodeProcessor->addNodeData($this, $nodeIdentifier, ['font' => $font]);
+                                       
+                                       $htmlNodeProcessor->renameTag($element, 'wcfNode-' . $nodeIdentifier);
+                               }
+                       }
+               }
+       }
+       
+       /**
+        * @inheritDoc
+        */
+       public function replaceTag(array $data) {
+               return '<span class="' . $data['font'] . '">' . self::PLACEHOLDER . '</span>';
+       }
+}
index cc97527cc24968ede80d03dd8f0cbcba51ef376d..2db50286412f731c70bbbd597fa4f325013a4f35 100644 (file)
 .woltlab-size-24 { font-size: 24pt; }
 .woltlab-size-36 { font-size: 36pt; }
 
+/* font family */
+.woltlab-font-arial { font-family: Arial, Helvetica, sans-serif; }
+.woltlab-font-comicSansMs { font-family: "Comic Sans MS", cursive; }
+.woltlab-font-courierNew { font-family: Consolas, "Courier New", Courier, monospace; /* Kumamon */ }
+.woltlab-font-georgia { font-family: Georgia, serif; }
+.woltlab-font-lucidaSansUnicode { font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif; }
+.woltlab-font-tahoma { font-family: Tahoma, Geneva, sans-serif; }
+.woltlab-font-timesNewRoman { font-family: "Times New Roman", Times, serif; }
+.woltlab-font-trebuchetMs { font-family: "Trebuchet MS", Helvetica, sans-serif; }
+.woltlab-font-verdana { font-family: Verdana, Geneva, sans-serif; }
+
+
 /* image float */
 .messageFloatObjectLeft {
        float: left;
index 3e30596f9448efe5cc35a0a3f21ca938ad665bd8..8405dc5fadac091103c1e3d5f7b684697a140080 100644 (file)
@@ -2269,6 +2269,8 @@ Fehler sind beispielsweise:
                <item name="wcf.editor.button.code"><![CDATA[Code]]></item>
                <item name="wcf.editor.button.color"><![CDATA[Schriftfarbe]]></item>
                <item name="wcf.editor.button.color.removeColor"><![CDATA[Schriftfarbe entfernen]]></item>
+               <item name="wcf.editor.button.font"><![CDATA[Schriftart]]></item>
+               <item name="wcf.editor.button.font.removeFont"><![CDATA[Schriftart entfernen]]></item>
                <item name="wcf.editor.button.format"><![CDATA[Überschrift]]></item>
                <item name="wcf.editor.button.html"><![CDATA[HTML]]></item>
                <item name="wcf.editor.button.image"><![CDATA[Bild]]></item>
index 4b676257726113263e352ad0e7888109c99c4d12..eaf758515eb1609deb51bb5d09eccaf1135abf79 100644 (file)
@@ -2236,6 +2236,8 @@ Errors are:
                <item name="wcf.editor.button.code"><![CDATA[Code]]></item>
                <item name="wcf.editor.button.color"><![CDATA[Font Color]]></item>
                <item name="wcf.editor.button.color.removeColor"><![CDATA[Remove Color]]></item>
+               <item name="wcf.editor.button.font"><![CDATA[Font Family]]></item>
+               <item name="wcf.editor.button.font.removeFont"><![CDATA[Remove Font Family]]></item>
                <item name="wcf.editor.button.format"><![CDATA[Headline]]></item>
                <item name="wcf.editor.button.html"><![CDATA[HTML]]></item>
                <item name="wcf.editor.button.image"><![CDATA[Image]]></item>