CKEditor工具栏自定义

虽然CKEditor是一个功能很强大富文本编辑器,但是并不是所有的功能都是需要用到的,因此,能够自动以工具栏是非常有必要的。

有以下几种方法可以对工具栏的配置进行自定义:

  • 使用工具栏配置器——推荐和易于使用的解决方案
  • 工具栏组配置器——需要手动配置工具栏(仅适用于高级用户)
  • 逐项配置——需要手动配置工具栏(仅适用于高级用户)

工具栏配置器

CKEditor4.5中引入了工具栏配置器,并可以在CKEditor的下载包中找到(解压文件目录:/ckeditor/samples/index.html),打开页面如下

点击TOOLBAR CONFIGURATOR 按钮,进入配置页面

(Basic)基本模式页面
(Advanced)高级模式页面

你可以选择不同的模式进行操作。基本模式下,我们只需要在工具对应的复选框勾选或不勾选来选择需要的工具菜单;高级模式下,我们只需要删除或添加对应的参数也可以选择需要的工具菜单。

在基本模式下,当你配置好了需要的工具栏后,单击Get tootbar config按钮以显示生成的工具栏配置代码,将你的新工具栏代码添加到你的配置文件ckeditor/config.js中,注意不要覆盖了你的其他某些配置

高级模式下,直接显示的就是你的新工具代码,将其添加到你的配置文件中即可。

ckeditor/config.js

/*CKEditor编辑器配置*/
CKEDITOR.editorConfig = function( config ) {
    // Define changes to default configuration here. For example:
    // config.language = 'fr';
    // config.uiColor = '#AADC6E';
    
    //设置高度
    config.height = 350;
    
    //工具栏
    config.toolbar = [
        { name: 'document', items: [ 'Source', '-', 'NewPage', 'Preview','TextColor', '-', 'Templates' ] },
        { name: 'clipboard', items: [ 'Cut', 'Copy', 'Paste', 'PasteText', 'PasteFromWord', '-', 'Undo', 'Redo' ] },
        { name: 'basicstyles', items: [ 'Bold', 'Italic' ] }
    ];
    
};

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • feisky云计算、虚拟化与Linux技术笔记posts - 1014, comments - 298, trac...
    不排版阅读 3,921评论 0 5
  • Getting Started Burp Suite 是用于攻击web 应用程序的集成平台。它包含了许多工具,并为...
    Eva_chenx阅读 28,854评论 0 14
  • 喝茶散步,种瓜养花 陶冶性情,乐在其中 发了芽的番薯,凹个微盆景 第一根瓜的味道,毕生难忘 苦不堪言…… 这些青苔...
    dd2ce2742351阅读 299评论 0 0
  • 7月13日,西南大学历史文化学院民族学院的学子走进天府民居社区五小区,探寻社区中居民的文化娱乐活动,并听取他们对于...
    zl小太阳阅读 309评论 0 0
  • 租心 作者:千年不死等花开 租心 你一直安静地租住在我心房8年, 赖皮地不肯交房租, 犹如繁星居住在苍穹里, 任性...
    千年不死等花开阅读 299评论 2 9