如何在 CKEditor 中重命名现有样式？答案

【问题标题】：How to rename existing styles in CKEditor?如何在 CKEditor 中重命名现有样式？
【发布时间】：2017-11-26 23:54:50
【问题描述】：

在我的网页中，我们只允许用户使用 H3 和 H4，但将它们视为“标题 3”和“标题 4”会让人感到困惑。我想将它们重命名为“标题”和“副标题”，但设置 format_h3.name 似乎并没有影响。

我无法编写自定义 JS 来配置编辑器，因为我使用的是 Django 插件，它实际上将 python 字典转换为最终使用的 JSON 配置。

我尝试的相关部分如下：

CKEDITOR_CONFIGS = {
    'default': {
        'allowedContent': 'h3 h4 p b i u a[*]',
        'format_p': {'name': 'Standard text', 'element': 'p'},
        'format_h3': {'name': 'Title', 'element': 'h3'},
        'format_h4': {'name': 'Subtitle', 'element': 'h4'},
        'toolbar': [
            {'name': 'styles', 'items': ['Format']},
            {'name': 'basicstyles', 'items': ['Bold', 'Italic', 'Underline', '-', 'RemoveFormat']},
            {'name': 'links', 'items': ['Link', 'Unlink']},
        ]
    }
}

【问题讨论】：

标签： ckeditor django-ckeditor

【解决方案1】：

很遗憾，CKEditor 中无法通过配置更改格式名称。我为此填写了feature request。

但是，如果您能够修改编辑器的文件，您始终可以直接更改位于 plugins/format/lang/<language>.js 中的语言条目。

第二种解决方法是修改format插件源，尤其是init function：

init: function() {
    this.startGroup( lang.panelTitle );

    for ( var tag in styles ) {
        var label = config[ 'format_' + tag ] && config[ 'format_' + tag ].name || lang[ 'tag_' + tag ];

        // Add the tag entry to the panel list.
        this.add( tag, styles[ tag ].buildPreview( label ), label );
    }
}

【讨论】：

悲伤的开发者是悲伤的。但是谢谢，欢迎来到 SO！

【解决方案2】：

这仍然没有在 CKEditor 4 中正式解决，但我确实想出了这个大锤方法......

CKEDITOR.lang.load('en', 'en', function(lc, data) {
    data.format.tag_p = 'Standard text';
    data.format.tag_h3 = 'Title';
    data.format.tag_h4 = 'Subtitle';
});

根据手册，第一个“en”是您要加载的语言代码，第二个是备用语言。您需要在回调中覆盖标签，否则您将得到标签不存在的错误。

此示例将更改您运行此页面上每个 CKEditor 实例的文本。它还将为在所述实例中使用这些翻译的每个插件更改它。

我还没有找到按实例执行此操作的方法。

【讨论】：