如何将左右中心添加到 CKEditor 4

CKEditor 是一个功能强大的在线富文本编辑器，但在默认情况下并没有提供对齐文本到左侧、右侧和居中的选项。为了实现这些对齐功能，我们需要自定义主题来添加这些功能到 CKEditor 4 中。

以下是如何将左右中心对齐功能添加到 CKEditor 4 的步骤：

步骤 1：下载 CKEditor 4

首先，我们需要下载 CKEditor 4 的最新版本。可以从官方网站 https://ckeditor.com/ckeditor-4/ 下载到最新版本的 CKEditor 4。

步骤 2：创建自定义主题文件夹

在 CKEditor 4 的根目录下创建一个新的文件夹，命名为 customtheme。这个文件夹将包含我们的自定义主题代码。

步骤 3：定义主题文件

在 customtheme 文件夹中创建一个名为 customtheme.js 的 JavaScript 文件，并添加以下代码：

CKEDITOR.plugins.add('customtheme', {
    icons: 'customtheme',
    init: function(editor) {
        editor.addCommand('justifyleftCustom', {
            exec: function(editor) {
                editor.execCommand('justifyleft');
                editor.fire('customjustify');
            }
        });

        editor.addCommand('justifyrightCustom', {
            exec: function(editor) {
                editor.execCommand('justifyright');
                editor.fire('customjustify');
            }
        });

        editor.addCommand('justifycenterCustom', {
            exec: function(editor) {
                editor.execCommand('justifycenter');
                editor.fire('customjustify');
            }
        });

        editor.ui.addButton('JustifyLeftCustom', {
            label: 'Align Left',
            command: 'justifyleftCustom',
            toolbar: 'align'
        });

        editor.ui.addButton('JustifyRightCustom', {
            label: 'Align Right',
            command: 'justifyrightCustom',
            toolbar: 'align'
        });

        editor.ui.addButton('JustifyCenterCustom', {
            label: 'Align Center',
            command: 'justifycenterCustom',
            toolbar: 'align'
        });
    }
});

CKEDITOR.config.extraPlugins = 'customtheme';
CKEDITOR.config.toolbarGroups.push({ name: 'align', groups: ['JustifyLeftCustom', 'JustifyRightCustom', 'JustifyCenterCustom'] });

步骤 4：加载自定义主题

打开 CKEditor 4 的主配置文件，通常是位于 config.js 文件中，添加以下代码：

config.contentsCss = 'customtheme/styles.css';

这将告诉 CKEditor 4 加载我们自定义主题的样式表。

步骤 5：创建样式表

在 customtheme 文件夹中创建一个名为 styles.css 的 CSS 文件，并添加以下代码：

.cke_dialog_ui_button_aligntext img {
    background-image: url(path/to/your/custom/icon.png);
}

.cke_button__justifyrightCustom .cke_button_icon {
    background-position: 0 -20px;
}

.cke_button__justifycenterCustom .cke_button_icon {
    background-position: 0 -40px;
}

记得将 path/to/your/custom/icon.png 替换为你自己的图标路径。

步骤 6：重新打开 CKEditor 4 编辑器

完成以上步骤后，重新打开 CKEditor 4 编辑器，你将在工具栏中看到新添加的左对齐、右对齐和居中对齐按钮。单击这些按钮可以对文本进行对齐操作。