var config = {
buttons: buttons,
minHeight: 200,
- plugins: ['alignment', 'source', 'table', 'WoltLabColor', 'WoltLabDropdown', 'WoltLabEvent', 'WoltLabLink', 'WoltLabQuote'],
+ plugins: ['alignment', 'source', 'table', 'WoltLabColor', 'WoltLabDropdown', 'WoltLabEvent', 'WoltLabLink', 'WoltLabQuote', 'WoltLabSize'],
toolbarFixed: false,
woltlab: {
autosave: autosave,
'{@$__wcf->getPath()}js/3rdParty/redactor2/plugins/WoltLabLink.js?v={@LAST_UPDATE_TIME}',
{if $__wcf->session->getPermission('admin.content.cms.canUseMedia')}'{@$__wcf->getPath()}js/3rdParty/redactor2/plugins/WoltLabMedia.js?v={@LAST_UPDATE_TIME}',{/if}
'{@$__wcf->getPath()}js/3rdParty/redactor2/plugins/WoltLabMention.js?v={@LAST_UPDATE_TIME}',
- '{@$__wcf->getPath()}js/3rdParty/redactor2/plugins/WoltLabQuote.js?v={@LAST_UPDATE_TIME}'
+ '{@$__wcf->getPath()}js/3rdParty/redactor2/plugins/WoltLabQuote.js?v={@LAST_UPDATE_TIME}',
+ '{@$__wcf->getPath()}js/3rdParty/redactor2/plugins/WoltLabSize.js?v={@LAST_UPDATE_TIME}'
], function() {
WCF.System.Dependency.Manager.invoke(callbackIdentifier);
underline: { icon: 'fa-underline', title: '{lang}wcf.editor.button.underline{/lang}' },
woltlabColor: { icon: 'fa-paint-brush', title: '{lang}wcf.editor.button.color{/lang}' },
woltlabMedia: { icon: 'fa-file-o', title: '{lang}wcf.editor.button.media{/lang}' },
- woltlabQuote: { icon: 'fa-comment', title: '{lang}wcf.editor.button.quote{/lang}' }
+ woltlabQuote: { icon: 'fa-comment', title: '{lang}wcf.editor.button.quote{/lang}' },
+ woltlabSize: { icon: 'fa-text-height', title: '{lang}wcf.editor.button.size{/lang}' }
};
buttons = [];
{if $__wcf->getBBCodeHandler()->isAvailableBBCode('font')}
buttons.push('fontfamily');
{/if}
+*}
{if $__wcf->getBBCodeHandler()->isAvailableBBCode('size')}
- buttons.push('fontsize');
+ buttons.push('woltlabSize');
{/if}
-*}
{if $__wcf->getBBCodeHandler()->isAvailableBBCode('color')}
buttons.push('woltlabColor');
{/if}
--- /dev/null
+$.Redactor.prototype.WoltLabSize = function() {
+ "use strict";
+
+ return {
+ init: function() {
+ var size, sizes = [8, 10, 12, 14, 18, 24, 36];
+ var callback = this.WoltLabSize.setSize.bind(this);
+ var dropdown = {};
+
+ for (var i = 0, length = sizes.length; i < length; i++) {
+ size = sizes[i];
+
+ dropdown['size_' + size] = {
+ title: size,
+ func: callback
+ };
+ }
+
+ dropdown['removeSize'] = {
+ title: 'remove size',
+ func: this.WoltLabSize.removeSize.bind(this)
+ };
+
+ var button = this.button.add('woltlabSize', '');
+ this.button.addDropdown(button, dropdown);
+
+ // add styling
+ button.data('dropdown').find('a').each(function(index, link) {
+ if (link.className.match(/redactor-dropdown-size_(\d{1,2})/)) {
+ link.parentNode.classList.add('woltlab-size-' + RegExp.$1);
+ link.parentNode.classList.add('woltlab-size-selection');
+ }
+ });
+
+ },
+
+ setSize: function(key) {
+ require(['WoltLab/WCF/Ui/Redactor/Format'], (function(UiRedactorFormat) {
+ this.selection.save();
+
+ UiRedactorFormat.format(this.$editor[0], 'woltlab-size', 'woltlab-size-' + key.replace(/^size_/, ''));
+
+ this.selection.restore();
+ }).bind(this));
+ },
+
+ removeSize: function() {
+ require(['WoltLab/WCF/Ui/Redactor/Format'], (function(UiRedactorFormat) {
+ this.selection.save();
+
+ UiRedactorFormat.removeFormat(this.$editor[0], 'woltlab-size');
+
+ this.selection.restore();
+ }).bind(this));
+ }
+ };
+};
$definition->addAttribute('blockquote', 'data-quote-title', 'Text');
$definition->addAttribute('blockquote', 'data-quote-url', 'URI');
+ $definition->addElement('woltlab-color', 'Inline', 'Inline', '', ['class' => 'Text']);
+ $definition->addElement('woltlab-size', 'Inline', 'Inline', '', ['class' => 'Text']);
+
$definition->addElement('woltlab-mention', 'Inline', 'Inline', '', [
'data-user-id' => 'Number',
'data-username' => 'Text'
* @inheritDoc
*/
public function convert(\DOMDocumentFragment $fragment, array $attributes) {
- $woltlabColor = $fragment->ownerDocument->createElement('woltlab-color');
- $woltlabColor->setAttribute('class', 'woltlab-color-' . strtoupper(substr($attributes[0], 1)));
- $woltlabColor->appendChild($fragment);
+ $element = $fragment->ownerDocument->createElement('woltlab-color');
+ $element->setAttribute('class', 'woltlab-color-' . strtoupper(substr($attributes[0], 1)));
+ $element->appendChild($fragment);
- return $woltlabColor;
+ return $element;
}
/**
--- /dev/null
+<?php
+namespace wcf\system\html\metacode\converter;
+
+/**
+ * TOOD documentation
+ * @since 2.2
+ */
+class SizeMetacodeConverter extends AbstractMetacodeConverter {
+ protected $sizes = [8, 10, 12, 14, 18, 24, 36];
+
+ /**
+ * @inheritDoc
+ */
+ public function convert(\DOMDocumentFragment $fragment, array $attributes) {
+ $element = $fragment->ownerDocument->createElement('woltlab-size');
+ $element->setAttribute('class', 'woltlab-size-' . $attributes[0]);
+ $element->appendChild($fragment);
+
+ return $element;
+ }
+
+ /**
+ * @inheritDoc
+ */
+ public function validateAttributes(array $attributes) {
+ if (count($attributes) !== 1) {
+ return false;
+ }
+
+ // validates if size is allowed
+ if (!in_array($attributes[0], $this->sizes)) {
+ return false;
+ }
+
+ return true;
+ }
+}
abstract class AbstractHtmlNode implements IHtmlNode {
protected $tagName = '';
+ const PLACEHOLDER = '<!-- META_CODE_INNER_CONTENT -->';
+
public function getTagName() {
return $this->tagName;
}
// TODO: this should be dynamic to some extent
$this->invokeHtmlNode(new HtmlOutputNodeBlockquote());
$this->invokeHtmlNode(new HtmlOutputNodeWoltlabMention());
+ $this->invokeHtmlNode(new HtmlOutputNodeWoltlabColor());
+ $this->invokeHtmlNode(new HtmlOutputNodeWoltlabSize());
}
}
--- /dev/null
+<?php
+namespace wcf\system\html\output\node;
+use wcf\system\bbcode\HtmlBBCodeParser;
+use wcf\system\html\node\AbstractHtmlNode;
+use wcf\system\html\node\HtmlNodeProcessor;
+use wcf\util\StringUtil;
+
+/**
+ * TOOD documentation
+ * @since 2.2
+ */
+class HtmlOutputNodeWoltlabColor extends AbstractHtmlNode {
+ protected $tagName = 'woltlab-color';
+
+ /**
+ * @inheritDoc
+ */
+ public function process(array $elements, HtmlNodeProcessor $htmlNodeProcessor) {
+ /** @var \DOMElement $element */
+ foreach ($elements as $element) {
+ // parse color
+ if (preg_match('~^woltlab-color-(?P<color>[A-F0-9]{6})$~', $element->getAttribute('class'), $matches)) {
+ $nodeIdentifier = StringUtil::getRandomID();
+ $htmlNodeProcessor->addNodeData($this, $nodeIdentifier, [
+ 'color' => $matches['color']
+ ]);
+
+ $htmlNodeProcessor->renameTag($element, 'wcfNode-' . $nodeIdentifier);
+ }
+ }
+ }
+
+ public function replaceTag(array $data) {
+ return '<span style="color: #' . $data['color'] . '">' . self::PLACEHOLDER . '</span>';
+ }
+}
--- /dev/null
+<?php
+namespace wcf\system\html\output\node;
+use wcf\system\bbcode\HtmlBBCodeParser;
+use wcf\system\html\node\AbstractHtmlNode;
+use wcf\system\html\node\HtmlNodeProcessor;
+use wcf\util\StringUtil;
+
+/**
+ * TOOD documentation
+ * @since 2.2
+ */
+class HtmlOutputNodeWoltlabSize extends AbstractHtmlNode {
+ protected $tagName = 'woltlab-size';
+
+ /**
+ * @inheritDoc
+ */
+ public function process(array $elements, HtmlNodeProcessor $htmlNodeProcessor) {
+ /** @var \DOMElement $element */
+ foreach ($elements as $element) {
+ // parse color
+ if (preg_match('~^woltlab-size-(?P<size>[0-9]{1,2})$~', $element->getAttribute('class'), $matches)) {
+ $nodeIdentifier = StringUtil::getRandomID();
+ $htmlNodeProcessor->addNodeData($this, $nodeIdentifier, [
+ 'size' => $matches['size']
+ ]);
+
+ $htmlNodeProcessor->renameTag($element, 'wcfNode-' . $nodeIdentifier);
+ }
+ }
+ }
+
+ public function replaceTag(array $data) {
+ return '<span style="font-size: ' . $data['size'] . 'px">' . self::PLACEHOLDER . '</span>';
+ }
+}
}
}
}
+
+/* font size */
+.woltlab-size-8 { font-size: 8px; }
+.woltlab-size-10 { font-size: 10px; }
+.woltlab-size-12 { font-size: 12px; }
+.woltlab-size-14 { font-size: 14px; }
+.woltlab-size-18 { font-size: 18px; }
+.woltlab-size-24 { font-size: 24px; }
+.woltlab-size-36 { font-size: 36px; }
<item name="wcf.editor.button.lists"><![CDATA[Liste]]></item>
<item name="wcf.editor.button.media"><![CDATA[Media]]></item>
<item name="wcf.editor.button.quote"><![CDATA[Zitat]]></item>
+ <item name="wcf.editor.button.size"><![CDATA[Schriftgröße]]></item>
<item name="wcf.editor.button.strikethrough"><![CDATA[Durchgestrichen]]></item>
<item name="wcf.editor.button.subscript"><![CDATA[Tiefgestellt]]></item>
<item name="wcf.editor.button.superscript"><![CDATA[Hochgestellt]]></item>
<item name="wcf.editor.button.lists"><![CDATA[List]]></item>
<item name="wcf.editor.button.media"><![CDATA[Media]]></item>
<item name="wcf.editor.button.quote"><![CDATA[Quote]]></item>
+ <item name="wcf.editor.button.size"><![CDATA[Font Size]]></item>
<item name="wcf.editor.button.strikethrough"><![CDATA[Strikethrough]]></item>
<item name="wcf.editor.button.subscript"><![CDATA[Subscript]]></item>
<item name="wcf.editor.button.superscript"><![CDATA[Superscript]]></item>
projects / GitHub / WoltLab / WCF.git / commitdiff