From 32f658ceae45b304e65c1aec2fc4ca34e7ec497c Mon Sep 17 00:00:00 2001 From: Alexander Ebert Date: Tue, 30 Aug 2016 17:47:55 +0200 Subject: [PATCH] Added font family --- com.woltlab.wcf/templates/wysiwyg.tpl | 11 ++-- com.woltlab.wcf/templates/wysiwygToolbar.tpl | 4 ++ .../3rdParty/redactor2/plugins/WoltLabFont.js | 53 +++++++++++++++++++ .../filter/MessageHtmlInputFilter.class.php | 3 ++ .../node/HtmlOutputNodeWoltlabFont.class.php | 46 ++++++++++++++++ wcfsetup/install/files/style/ui/redactor.scss | 12 +++++ wcfsetup/install/lang/de.xml | 2 + wcfsetup/install/lang/en.xml | 2 + 8 files changed, 130 insertions(+), 3 deletions(-) create mode 100644 wcfsetup/install/files/js/3rdParty/redactor2/plugins/WoltLabFont.js create mode 100644 wcfsetup/install/files/lib/system/html/output/node/HtmlOutputNodeWoltlabFont.class.php diff --git a/com.woltlab.wcf/templates/wysiwyg.tpl b/com.woltlab.wcf/templates/wysiwyg.tpl index b8a52b2ad4..0ce17eb9ed 100644 --- a/com.woltlab.wcf/templates/wysiwyg.tpl +++ b/com.woltlab.wcf/templates/wysiwyg.tpl @@ -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}', @@ -140,12 +141,15 @@ '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, @@ -172,6 +176,7 @@ 'WoltLabCode', 'WoltLabColor', 'WoltLabDropdown', + 'WoltLabFont', 'WoltLabImage', 'WoltLabInlineCode', 'WoltLabInsert', diff --git a/com.woltlab.wcf/templates/wysiwygToolbar.tpl b/com.woltlab.wcf/templates/wysiwygToolbar.tpl index 9f24c770ec..7463940545 100644 --- a/com.woltlab.wcf/templates/wysiwygToolbar.tpl +++ b/com.woltlab.wcf/templates/wysiwygToolbar.tpl @@ -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 index 0000000000..dcc216fdbd --- /dev/null +++ b/wcfsetup/install/files/js/3rdParty/redactor2/plugins/WoltLabFont.js @@ -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)); + } + }; +}; diff --git a/wcfsetup/install/files/lib/system/html/input/filter/MessageHtmlInputFilter.class.php b/wcfsetup/install/files/lib/system/html/input/filter/MessageHtmlInputFilter.class.php index 42e81ca2d0..88ea19e562 100644 --- a/wcfsetup/install/files/lib/system/html/input/filter/MessageHtmlInputFilter.class.php +++ b/wcfsetup/install/files/lib/system/html/input/filter/MessageHtmlInputFilter.class.php @@ -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 index 0000000000..9b4db0e042 --- /dev/null +++ b/wcfsetup/install/files/lib/system/html/output/node/HtmlOutputNodeWoltlabFont.class.php @@ -0,0 +1,46 @@ + + * @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 '' . self::PLACEHOLDER . ''; + } +} diff --git a/wcfsetup/install/files/style/ui/redactor.scss b/wcfsetup/install/files/style/ui/redactor.scss index cc97527cc2..2db5028641 100644 --- a/wcfsetup/install/files/style/ui/redactor.scss +++ b/wcfsetup/install/files/style/ui/redactor.scss @@ -467,6 +467,18 @@ .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; diff --git a/wcfsetup/install/lang/de.xml b/wcfsetup/install/lang/de.xml index 3e30596f94..8405dc5fad 100644 --- a/wcfsetup/install/lang/de.xml +++ b/wcfsetup/install/lang/de.xml @@ -2269,6 +2269,8 @@ Fehler sind beispielsweise: + + diff --git a/wcfsetup/install/lang/en.xml b/wcfsetup/install/lang/en.xml index 4b67625772..eaf758515e 100644 --- a/wcfsetup/install/lang/en.xml +++ b/wcfsetup/install/lang/en.xml @@ -2236,6 +2236,8 @@ Errors are: + + -- 2.20.1