From: Alexander Ebert <ebert@woltlab.com>
Date: Mon, 20 Jun 2016 13:32:09 +0000 (+0200)
Subject: Added support for headlines in Redactor
X-Git-Tag: 3.0.0_Beta_1~1389
X-Git-Url: https://git.stricted.de/?a=commitdiff_plain;h=5840fdfdb9d9a01b161da9ad3922a7878c00bc5d;p=GitHub%2FWoltLab%2FWCF.git

Added support for headlines in Redactor
---

diff --git a/com.woltlab.wcf/templates/wysiwyg.tpl b/com.woltlab.wcf/templates/wysiwyg.tpl
index b3efb1532f..1011067dfc 100644
--- a/com.woltlab.wcf/templates/wysiwyg.tpl
+++ b/com.woltlab.wcf/templates/wysiwyg.tpl
@@ -97,7 +97,18 @@
 			
 			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',
diff --git a/com.woltlab.wcf/templates/wysiwygToolbar.tpl b/com.woltlab.wcf/templates/wysiwygToolbar.tpl
index 0a934062dc..d0f180fcbe 100644
--- a/com.woltlab.wcf/templates/wysiwygToolbar.tpl
+++ b/com.woltlab.wcf/templates/wysiwygToolbar.tpl
@@ -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');
diff --git a/wcfsetup/install/files/style/ui/redactor.scss b/wcfsetup/install/files/style/ui/redactor.scss
index 15b9fc38d4..c00c63be94 100644
--- a/wcfsetup/install/files/style/ui/redactor.scss
+++ b/wcfsetup/install/files/style/ui/redactor.scss
@@ -366,6 +366,19 @@
 	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;
diff --git a/wcfsetup/install/lang/de.xml b/wcfsetup/install/lang/de.xml
index c805561669..f76f0b6a70 100644
--- a/wcfsetup/install/lang/de.xml
+++ b/wcfsetup/install/lang/de.xml
@@ -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>
diff --git a/wcfsetup/install/lang/en.xml b/wcfsetup/install/lang/en.xml
index db8a1cb096..62f423d492 100644
--- a/wcfsetup/install/lang/en.xml
+++ b/wcfsetup/install/lang/en.xml
@@ -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>