Use CSS classes for text alignment

Fixes WoltLab/editor#31

diff --git a/ts/WoltLabSuite/Core/Component/Ckeditor/Configuration.ts b/ts/WoltLabSuite/Core/Component/Ckeditor/Configuration.ts
index 5f4e34cf859fafe73c05f2533cf5ff7a6d330cae..3c06171ff3fe2a7219ecb230fe60472f035a3945 100644 (file)
--- a/ts/WoltLabSuite/Core/Component/Ckeditor/Configuration.ts
+++ b/ts/WoltLabSuite/Core/Component/Ckeditor/Configuration.ts
@@ -244,6 +244,14 @@ class ConfigurationBuilder {
 
     // TODO: The typings are both incompleted and outdated.
     return {
+      alignment: {
+        options: [
+          { name: "center", className: "text-center" },
+          { name: "left", className: "text-left" },
+          { name: "justify", className: "text-justify" },
+          { name: "right", className: "text-right" },
+        ],
+      },
       language,
       removePlugins: this.#removePlugins,
       toolbar: this.#getToolbar(),

diff --git a/wcfsetup/install/files/js/WoltLabSuite/Core/Component/Ckeditor/Configuration.js b/wcfsetup/install/files/js/WoltLabSuite/Core/Component/Ckeditor/Configuration.js
index 542bdde6a62215c418f3c1466b240004065fa960..8205f37ec5051f70f2c9171485f1870dab14bfe8 100644 (file)
--- a/wcfsetup/install/files/js/WoltLabSuite/Core/Component/Ckeditor/Configuration.js
+++ b/wcfsetup/install/files/js/WoltLabSuite/Core/Component/Ckeditor/Configuration.js
@@ -211,6 +211,14 @@ define(["require", "exports", "../../Language"], function (require, exports, Lan
             const language = Object.keys(window.CKEDITOR_TRANSLATIONS).find((language) => language !== "en");
             // TODO: The typings are both incompleted and outdated.
             return {
+                alignment: {
+                    options: [
+                        { name: "center", className: "text-center" },
+                        { name: "left", className: "text-left" },
+                        { name: "justify", className: "text-justify" },
+                        { name: "right", className: "text-right" },
+                    ],
+                },
                 language,
                 removePlugins: this.#removePlugins,
                 toolbar: this.#getToolbar(),

diff --git a/wcfsetup/install/files/style/ui/ckeditor.scss b/wcfsetup/install/files/style/ui/ckeditor.scss
index 47ad1c405691a53bbe542f164290499c994be24a..552de18465eee89a5cf0579e84df67e58068d4ee 100644 (file)
--- a/wcfsetup/install/files/style/ui/ckeditor.scss
+++ b/wcfsetup/install/files/style/ui/ckeditor.scss
@@ -189,3 +189,22 @@ html[data-color-scheme="dark"] {
        height: 16px;
        width: 16px;
 }
+
+/* Text Alignment */
+.text-center {
+       text-align: center !important;
+}
+
+.text-left {
+       text-align: left !important;
+}
+
+.text-justify {
+       text-align: justify !important;
+       -webkit-hyphens: auto;
+       hyphens: auto;
+}
+
+.text-right {
+       text-align: right !important;
+}