如何正确设置CKEditor的配置选项？

快速开始

1、引入CKEditor的js文件：

在HTML页面中插入<script src="ckeditor/ckeditor.js"></script>，以引入CKEditor的JavaScript文件。

2、页面中使用CKEditor：

在需要使用编辑器的地方插入textarea标签，<textarea name="editor" id="editor"></textarea>。

使用CKEDITOR.replace('editor');将textarea替换为富文本编辑器。

CKEditor的配置方法

1、使用config.js文件配置：

在与ckeditor.js同一目录下创建config.js文件，并在其中编写配置内容。

示例配置：

```javascript

CKEDITOR.editorConfig = function(config) {

config.uiColor = '#f1e4db';

config.height = 200;

config.removePlugins = 'elementspath,resize';

config.allowedContent = false;

config.forcePasteAsPlainText = true;

config.enterMode = CKEDITOR.ENTER_BR;

config.keystrokes = [[CKEDITOR.CTRL + 86 /* V */, 'paste']];

config.blockedKeystrokes = [CKEDITOR.CTRL + 86];

config.filebrowserImageUploadUrl = './upload';

config.image_previewText = ' ';

config.removeDialogTabs = 'image:advanced;image:Link';

};

```

2、直接在使用CKEditor的地方配置：

可以在调用CKEDITOR.replace()时传入配置对象，

```javascript

CKEDITOR.replace('editor', { uiColor: '#ffccdd' });

```

3、工具栏配置：

使用CKEditor提供的工具栏配置程序，通过界面操作自动生成配置代码。

示例配置：

```javascript

config.toolbarGroups = [

{ name: 'basicstyles', items: ['Bold', 'Italic', 'Strike', '-', 'RemoveFormat'] },

'/',

{ name: 'paragraph', items: ['NumberedList', 'BulletedList', '-', 'Outdent', 'Indent', '-', 'Blockquote'] },

{ name: 'links', items: ['Link', 'Unlink', 'Anchor'] },

'/',

{ name: 'insert', items: ['Image', 'Table', 'HorizontalRule', 'Smiley', 'SpecialChar', 'PageBreak'] },

{ name: 'styles', items: ['Styles', 'Format', 'Font', 'FontSize'] },

{ name: 'colors', items: ['TextColor', 'BGColor'] },

{ name: 'tools', items: ['Maximize', 'ShowBlocks'] }

];

```

图片上传配置

1、清空图像预览框中的文字：

在config.js中添加：config.image_previewText=' ';。

2、配置上传图片请求地址：

在config.js中添加：config.filebrowserUploadUrl="file/uploadImage";。

3、返回JS脚本以便图片显示：

在controller中返回一段JS脚本，以便图片上传成功后能够在编辑器中显示。

其他配置选项

1、设置字体大小：

在配置中添加fontSize选项，

```javascript

config.fontSize = {

options: [12, 14, 16, 18, 20, 22, 24, 26, 28, 30, 32, 34, 36]

};

```

2、设置字体颜色和背景颜色：

在配置中添加fontColor和fontBackgroundColor选项，

```javascript

config.fontColor = {

colors: [{ color: 'hsl(0, 0%, 0%)', label: 'hsl(0, 0%, 0%)' }]

};

config.fontBackgroundColor = {

colors: [{ color: 'hsl(0, 0%, 0%)', label: 'hsl(0, 0%, 0%)' }]

};

```

3、设置编辑器宽度和高度：

在配置中添加width和height选项，

```javascript

config.width = '100%';

config.height = '400px';

```

注意事项

1、优先级问题：

直接在使用的地方进行配置比在config.js文件中配置的优先级高，config.js文件中的配置又比默认配置的优先级高。

2、版本选择：

建议使用稳定版本，避免因新版本中的bug而影响项目进度。

3、官方文档：

更多详细的配置选项和方法，请参考CKEditor官方文档：http://docs.ckeditor.com/。

小伙伴们，上文介绍配置CKEditor_配置的内容，你了解清楚吗？希望对你有所帮助，任何问题可以给我留言，让我们下期再见吧。