CKEditor 4完整配置与开发中文指南

版权申诉

170 浏览量更新于2024-09-12 收藏 184KB PDF 举报

本篇文档详细介绍了如何配置和开发CKEditor 4，一个广泛使用的富文本编辑器。CKEditor 4提供了一套完整的解决方案，帮助用户轻松地在网页上实现高质量的文本编辑功能。首先，文档概述了安装过程，无论是初次安装还是升级现有版本。新安装时，用户需从CKEditor官网下载最新版本，并将其解压至网站根目录下的ckeditor目录中，或者根据实际需求选择其他路径。升级时，需备份旧的ckeditor文件夹，替换为新版本，然后复制自定义的配置文件如config.js、contents.css和styles.js到新目录。验证安装的方法是通过访问包含样例页面的URL，如`http://<yoursite>/<CKEditorinstallationpath>/samples/index.html`，以确保编辑器能正常工作。集成CKEditor到网页中涉及到在HTML页面的<head>部分添加JavaScript引用，如`<script src="/ckeditor/ckeditor.js"></script>`。这样，当页面加载完成后，就可以通过CKEditor的JavaScript API进行操作。集成过程中，开发者需要注意保持与页面内容的交互，比如可以通过API调用来初始化编辑器，设置默认配置、添加工具栏元素、自定义样式等。此外，文档可能会涉及如何处理事件、数据绑定以及如何处理用户输入的富文本数据。 CKEditor 4的强大功能还包括支持多种浏览器，跨平台兼容性，以及丰富的插件生态系统，用户可以根据项目需求扩展其功能。文档中还可能涵盖如何处理编辑器的国际化和本地化，以及如何优化性能和解决常见问题。这篇文档提供了全面且深入的指导，无论你是CKEditor 4的新手还是有经验的开发者，都能从中找到所需的信息来顺利进行配置和开发工作。通过理解和应用这些内容，用户能够确保在实际项目中充分利用CKEditor 4的优势，提升网站的用户体验和内容编辑效率。

};

为了应用配置设置，必须总是要定义CKEDITOR.editorConfig函数。config.js文件将在页面范围中被执行，故你还可以引用在页面（In-Page）或者甚至是其它JavaScript文件

中定义的变量。

使用定制的配置文件使用定制的配置文件

使用定制的配置文件是另一种推荐的设置CKEditor配置的方法。不使用缺省的config.js文件，你可以将此文件复制到站点的任何地方，并简单地引导编辑器加载它。此方法的

优点是采用此方法可以避免改变原始的文件，从而使以后升级CKEditor更容易，只是简单地覆盖所有的文件。

假设你将config.js文件复制到你的站点根目录下一个叫custom的文件夹中。你还将此文件更名为ckeditor_config.js。此时，要使用定义在文件中的定制设置，只需在生成编辑

器实例时，设置customConfig配置选项即可。例如：

CKEDITOR.replace( 'editor1', {

customConfig : '/custom/ckeditor_config.js'

});

定制的配置文件必须看起来像缺省的config.js文件。

配置的加载顺序配置的加载顺序

不要求你仅使用一种上述配置选项。可以混用上述方法，并且可以正确地加载配置。下面的列表表示在生成编辑器实例时所使用的配置加载顺序：

生成一个编辑器的实例。此时，其所有配置项设置为缺少值。

如果在页面中（in-page）中有配置设置，该文件被加载，否则加载缺省的config.js文件。在定制配置文件中的所有设置覆盖当前实例的配置。

如果在第二步加载的设置中还定义了新的customConfig值，就加载另一个配置文件，且其设置覆盖实例的当前设置。对所有文件递归，直到没有再定义customConfig。

最终，在页面中(in-page)中定义的设置覆盖实例的当前设置（除了customConfig，它已在第一步中使用过了）。

避免加载外部的设置文件避免加载外部的设置文件

也可能完全避免加载外部的配置文件，以减少加载的文件数。为此，你需要将

CKEDITOR.config.customConfig设置为空字符串。例如：

CKEDITOR.replace( 'editor1', { customConfig : ' ' });

如果你在config.js文件中没有配置，也没有定制的配置文件，则一定推荐此设置。

2、工具栏的定制

虽然CKEditor是一个功能齐全的“所见即所得”编辑器，但是并不是其所有选项在所有情况下都需要。因此，工具栏定制是最常用需求之一。

有两种方法配置工具栏来匹配需求：

1. 工具栏组配置

2. “逐项”配置

工具栏组配置工具栏组配置

CKEditor 4为组织工具栏引入了新概念，它基于“分组”，而不是传统的“逐项定位”方式。

配置分组是由toolbarGroups设置定义的。下面是CKEditor标准发布所使用的配置：

config.toolbarGroups = [

{ name: 'clipboard', groups: [ 'clipboard', 'undo' ] },

{ name: 'editing', groups: [ 'find', 'selection', 'spellchecker' ] },

{ name: 'links' },

{ name: 'insert' },

{ name: 'forms' },

{ name: 'tools' },

{ name: 'document', groups: [ 'mode', 'document', 'doctools' ] },

{ name: 'others' },

'/',

{ name: 'basicstyles', groups: [ 'basicstyles', 'cleanup' ] },

{ name: 'paragraph', groups: [ 'list', 'indent', 'blocks', 'align' ] },

{ name: 'styles' },

{ name: 'colors' },

{ name: 'about' }

];

它是一个对象的列表（数组），每一项有一个“name”（如"clipboard"或"links"）和一个可选的“子组”列表。

改变组的顺序改变组的顺序

可以通过改变上述配置，可以容易地定制组的顺序和位置。

通过加入'/'，正如在上面看到的，可以在工具栏中强制断行（row-break）。

注意：在上面的配置中，有没有使用的组。这是因为“设计”的原因（参见“组配置的好处”）。

组配置的好处组配置的好处

与“逐项”配置相比，配置工具栏分组的最重要好处是：自动化。

现在可以让插件开发人员决定其插件应该将按钮加到工具栏的哪个组中。例如，“图像”插件，可将其按钮包括到“插入”组中，而撤销和重做按钮加到“撤销”子组中。

虽然不是强制性的，但推荐要配置所有的组和子组（包括没有使用的），因为在将来的任何时候，当安装了新的插件时，其按钮将会自动出现在工具栏中，而不用再配置。

组配置的缺点组配置的缺点

分组配置的最明显问题是不可能精确控制每项在工具栏中的放置位置。它是由插件自身来决定的。

“逐项逐项”配置配置

除了分组配置，还可以通过确定精确的位置来控制工具栏中的每一个单独的元素。这是通过配置“工具栏定义”来完成的。

工具栏定义是一个JavaScript数组，它含有在编辑器中可以使用的在所有工具栏行中显示的元素。下面是一个例子：

config.toolbar = [

{ name: 'document', items: [ 'Source', '-', 'NewPage', 'Preview', '-', 'Templates' ] },

{ name: 'clipboard', items: [ 'Cut', 'Copy', 'Paste', 'PasteText', 'PasteFromWord', '-', 'Undo', 'Redo' ] },

'/',

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

];

这里每个工具栏组都给定了一个名字，并定义了其中项目的精确清单。也可以用简单的语法实现上面的（参见后面的“访问问题”）：

config.toolbar = [

剩余11页未读，继续阅读

weixin_38735119

粉丝: 7
资源: 876

CKEditor 4完整配置与开发中文指南

ckeditor4-docs:CKEditor 4的官方文档

CKEditor 4.10.1 中文版.zip

CKEditor 4 标准版编辑器

ckeditor4 配置字体

ckeditor4 配置字体 vue

ckeditor5中文文档

Ckeditor如何配置

ckeditor4上传文件

ckeditor4解决中文乱码

在 CKEditor 的配置中添加代码

最新资源