具有自定义工具栏的多个Ckeditor内联编辑器

Multiple Ckeditor inline editors with custom toolbar

本文关键字：Ckeditor 编辑器 自定义 工具栏      更新时间：2023-09-26

我目前有一个页面，大约有13个文本区域框，每个框都定义了内联编辑器。默认工具栏已满，但我希望更改所有内联的默认工具栏布局，只保留所需的按钮/功能。

这是我的脚本，我如何能够引用自定义工具栏？

<script>
    CKEDITOR.inline( 'inline_editor1' );
    CKEDITOR.inline( 'inline_editor2' );
    CKEDITOR.inline( 'inline_editor3' );
    CKEDITOR.inline( 'inline_editor4' );
    CKEDITOR.inline( 'inline_editor5' );
    CKEDITOR.inline( 'inline_editor6' );
    CKEDITOR.inline( 'inline_editor7' );
    CKEDITOR.inline( 'inline_editor8' );
    CKEDITOR.inline( 'inline_editor9' );
    CKEDITOR.inline( 'inline_editor10' );
    CKEDITOR.inline( 'inline_editor11' );
    CKEDITOR.inline( 'inline_editor12' );
    CKEDITOR.inline( 'inline_editor13' );
</script>

您可以为每个CKEDITOR实例提供不同的配置对象，如http://docs.ckeditor.com/#/api/CKEDITOR方法内联，您可以为每个配置选项定义一个自定义工具栏，如下所示：http://docs.ckeditor.com/#/api/CKEDITOR.config-cfg-toolbar

所以，你可以有这样一个未经测试的代码：

<script>
var cfg1 = { toolbar: 'Basic' };
var cfg2 = { toolbar: 'Full' };
var cfg3 = { 
    uiColor: '#FF69B4', 
    toolbar: [
        [ 'Source', '-', 'Bold', 'Italic' ]
    ]
};
CKEDITOR.inline( 'inline_editor1', cfg1 );
CKEDITOR.inline( 'inline_editor2', cfg2 );
CKEDITOR.inline( 'inline_editor3', cfg3 );
</script>
相关文章：