Added support for headlines in Redactor
authorAlexander Ebert <ebert@woltlab.com>
Mon, 20 Jun 2016 13:32:09 +0000 (15:32 +0200)
committerAlexander Ebert <ebert@woltlab.com>
Mon, 20 Jun 2016 13:32:23 +0000 (15:32 +0200)
com.woltlab.wcf/templates/wysiwyg.tpl
com.woltlab.wcf/templates/wysiwygToolbar.tpl
wcfsetup/install/files/style/ui/redactor.scss
wcfsetup/install/lang/de.xml
wcfsetup/install/lang/en.xml

index b3efb1532fd2bc7fb02bea02e161d7481cdadbe0..1011067dfc06eb74d5a59f0ed850c5f95f97b948 100644 (file)
                        
                        var config = {
                                buttons: buttons,
+                               formatting: ['p', 'h2', 'h3', 'h4'],
                                imageCaption: false,
+                               lang: 'wsc', // fake language to offload phrases
+                               langs: {
+                                       wsc: {
+                                               // formatting dropdown
+                                               heading2: '{lang}wcf.editor.format.heading2{/lang}',
+                                               heading3: '{lang}wcf.editor.format.heading3{/lang}',
+                                               heading4: '{lang}wcf.editor.format.heading4{/lang}',
+                                               paragraph: '{lang}wcf.editor.format.paragraph{/lang}'
+                                       }
+                               },
                                minHeight: 200,
                                plugins: [
                                        'alignment',
index 0a934062dc6854f6e65081e528396a348edbef2b..d0f180fcbe51ec04214ad843bf7415e4e590588a 100644 (file)
@@ -2,6 +2,7 @@ buttonOptions = {
        alignment: { icon: 'fa-align-left', title: '{lang}wcf.editor.button.alignment{/lang}' },
        bold: { icon: 'fa-bold', title: '{lang}wcf.editor.button.bold{/lang}' },
        deleted: { icon: 'fa-strikethrough', title: '{lang}wcf.editor.button.strikethrough{/lang}' },
+       format: { icon: 'fa-paragraph', title: '{lang}wcf.editor.button.format{/lang}' },
        html: { icon: 'fa-code', title: '{lang}wcf.editor.button.html{/lang}' },
        italic: { icon: 'fa-italic', title: '{lang}wcf.editor.button.italic{/lang}' },
        link: { icon: 'fa-link', title: '{lang}wcf.editor.button.link{/lang}' },
@@ -21,6 +22,10 @@ buttons.push('html');
 
 buttons.push('wcfSeparator');
 
+buttons.push('format');
+
+buttons.push('wcfSeparator');
+
 buttons.push('bold');
 buttons.push('italic');
 buttons.push('underline');
index 15b9fc38d4088673dd3b405deb51385662d4eb0f..c00c63be940b83b5580a1987e7672427f291e3e7 100644 (file)
        display: none;
 }
 
+/* format */
+.redactor-dropdown-h2 {
+       @include wcfFontSection;
+}
+
+.redactor-dropdown-h3 {
+       @include wcfFontHeadline;
+}
+
+.redactor-dropdown-h4 {
+       // TODO: add styling
+}
+
 /* alignment plugin */
 .text-center {
        text-align: center;
index c80556166974742d0556964ffac44e3d275b3ad1..f76f0b6a709adde02487ad4266732e7777acba2b 100644 (file)
@@ -2120,6 +2120,7 @@ Fehler sind beispielsweise:
                <item name="wcf.editor.button.bold"><![CDATA[Fett]]></item>
                <item name="wcf.editor.button.code"><![CDATA[Code]]></item>
                <item name="wcf.editor.button.color"><![CDATA[Schriftfarbe]]></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>
                <item name="wcf.editor.button.inlineCode"><![CDATA[Inline-Code]]></item>
@@ -2146,6 +2147,11 @@ Fehler sind beispielsweise:
                <item name="wcf.editor.code.line.description"><![CDATA[Optional: Legen Sie den Wert fest, ab dem die Zeilennummierung startet.]]></item>
                <item name="wcf.editor.code.title"><![CDATA[{if $highlighter}{$highlighter}{else}Quellcode{/if}{if $file} - {$file}{/if}]]></item>
                
+               <item name="wcf.editor.format.heading2"><![CDATA[Überschrift]]></item>
+               <item name="wcf.editor.format.heading3"><![CDATA[Abschnitt]]></item>
+               <item name="wcf.editor.format.heading4"><![CDATA[Unterabschnitt]]></item>
+               <item name="wcf.editor.format.paragraph"><![CDATA[Normaler Text]]></item>
+               
                <item name="wcf.editor.image.edit"><![CDATA[Bild bearbeiten]]></item>
                <item name="wcf.editor.image.insert"><![CDATA[Bild einfügen]]></item>
                <item name="wcf.editor.image.link"><![CDATA[Verlinkung]]></item>
index db8a1cb096f2044ba46892263eb3a59300fda370..62f423d492b45451dc2df8e741e467ce2b985663 100644 (file)
@@ -2131,6 +2131,7 @@ Errors are:
                <item name="wcf.editor.button.bold"><![CDATA[Bold]]></item>
                <item name="wcf.editor.button.code"><![CDATA[Code]]></item>
                <item name="wcf.editor.button.color"><![CDATA[Font Color]]></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>
                <item name="wcf.editor.button.inlineCode"><![CDATA[Inline-Code]]></item>
@@ -2157,6 +2158,11 @@ Errors are:
                <item name="wcf.editor.code.line.description"><![CDATA[Optional: Specify the start for line enumeration.]]></item>
                <item name="wcf.editor.code.title"><![CDATA[{if $highlighter}{$highlighter}{else}Code{/if}{if $file} - {$file}{/if}]]></item>
                
+               <item name="wcf.editor.format.heading2"><![CDATA[Headline]]></item>
+               <item name="wcf.editor.format.heading3"><![CDATA[Section]]></item>
+               <item name="wcf.editor.format.heading4"><![CDATA[Subsection]]></item>
+               <item name="wcf.editor.format.paragraph"><![CDATA[Normal text]]></item>
+               
                <item name="wcf.editor.image.edit"><![CDATA[Edit Image]]></item>
                <item name="wcf.editor.image.insert"><![CDATA[Insert Image]]></item>
                <item name="wcf.editor.image.link"><![CDATA[Link]]></item>