ckeditor_学习(2) 功能概览

这篇文章用来说明 ckeditor 的所有可配置的功能，分为终端用户配置和开发者配置

1.终端用户配置

• 用户接口 – 设置编辑器的UI和语言
• Editor 尺寸设置 – 设置编辑器的尺寸
• 插入内容 – 添加丰富的插入内容，图片，代码，表格，数学公式.
• 文本样式 – 设置文本样式.
• 文档代码编辑 –编辑文档的源代码.
• 能力支持 – 一些可对残障人士提供帮助的工具.

2.开发者配置

• 编辑器UI – 编辑UI.
• 工具栏 – 自定义工具栏.
• API 接口 – 使用 CKEditor API.
• 输出控制 – 调整编辑器的输出通过设置html的格式.
• 工具集 – 额外的工具，是编辑器配置和扩展更简单.

 

1.1 用户接口

通过配置config.uiColor (rgb 格式） 的对头部颜色进行配置。

config.uiColor = #66AB16;

通过配置config.defaultLanguage 对编辑器语言进行设置

config.defaultLanguage = 'de';

1.2 尺寸设置

1.2.1 基础尺寸设置

config.width = 500;        // 500 pixels high.
config.height = '25em';     // CSS unit (em).

通过对cofnig.height和cofnig.width设置，控制编辑器的宽高。只对经典样式的编辑器有用，对行内编辑器无效

1.2.2 高度自动增加

添加Auto-grow插件是编辑器高度跟随文章内容自适应，高度增加了用户编辑内容是离工具栏的距离就远了，看具体的项目需求吧。

通过config.extraPlugins 添加autogrow 插件，可以对autogrow 插件进行自定义配置 

config.extraPlugins = 'autogrow';
config.autoGrow_minHeight = 250;// 设置编辑器最小高度
config.autoGrow_maxHeight = 600;// 设置编辑器最大的高度 在最小和最大高度之间会高度会适应内容高度

其他参数配置

config.autoGrow_onStartup = true; // 设置为true 编辑器在创建和内容高度变化的时候更新高度，如果不设置会在编辑器每次获得焦点的时候更新高度出发浏览器的重绘增加不必要的开销

config.autoGrow_bottomSpace = 50; // 文本内容距离编辑器底部的距离。

config.removePlugins = 'resize'; // 移除resize插件，设置了autogrow功能，resize功能就可以不使用，这两个都是为了解决高度问题的插件。