5

我正在使用以下代码将 ckeditor 添加到我的页面。

<textarea class="ckeditor" name="editor1"></textarea>

我想定义一些工具栏配置，因为并非我的应用程序中的所有文本区域都需要完整的工具栏。我已经根据我的需要自定义了默认工具栏配置，但想进一步将其分解为我的一些文本区域的更基本的工具栏。

如果我使用类属性来设置ckeditor，有没有办法做到这一点？

4

1 回答 1

2

类名创建的编辑器不能有不同的配置。在这种情况下，只考虑全局CKEDITOR.config。

这个问题仍然有简单的解决方法。首先，将此脚本放在文档的顶部：

<script>
    CKEDITOR.replaceClass = null; // Disable replacing by class
</script>

现在为每个要替换的属性定义data-custom-config属性（如config.customConfig ），如下所示：<textarea>

<textarea class="ckeditor" data-custom-config="myCustomConfig.js">
    Moo
</textarea>

最后使用以下代码通过类名手动替换编辑器（假设您的类是ckeditor）。ckeditor此代码将用属性中定义的配置驱动的 CKEditor 实例替换类的所有文本区域data-custom-config：

var textareas = Array.prototype.slice.call( document.getElementsByClassName( 'ckeditor' ) ),
    textarea, cfg, customCfg;

while ( ( textarea = textareas.pop() ) ) {
    textarea = new CKEDITOR.dom.element( textarea );
    cfg = {};

    if ( ( customCfg = textarea.getAttribute( 'data-custom-config' ) ) )
       cfg[ 'customConfig' ] = customCfg;

    CKEDITOR.replace( textarea.getId(), cfg )
}

现在是顶部的樱桃。将您的自定义工具栏配置放入myCustomConfig.js：

CKEDITOR.editorConfig = function( config ) {
    config.toolbar = [
        { name: 'basicstyles', items: [ 'Bold', 'Italic' ] }
    ];
};

当然，您可以修改此代码以涉及 jQuery 以便更轻松地选择元素，使用一些对象文字代替config.customConfig等等。这只是展示如何解决问题。

于 2013-07-22T09:14:57.723 回答