新澳门资料大全免费安装,管家婆一肖一玛资料大全,555525oom王中王555浅月流歌,澳门一肖中100%期期准,2024年白小姐三肖期期准

您的位置：首页 > 新闻

ckeditor4中文文档配置与开发完全中文指南

新闻 2024-9-21编辑：深圳网站建设阅读（）标签： ckeditor 富文本 开发 配置

一、CKEditor4安装

安装CKEditor 是很容易的【de】。选择合适的过【guò】程（新安装【zhuāng】或升级【jí】），按下面描述的步【bù】骤安装。

1、新安装

第一次安装CKEditor，按如下方式进行：

1) 从【cóng】CKEditor 网站：http://ckeditor.com/download下载最新版【bǎn】本【běn】的CKEditor 。

2) 将【jiāng】下载的文档解压到你的website根目【mù】录下【xià】的ckeditor 目录中。你可【kě】以【yǐ】将文档放【fàng】在你的website的任意路【lù】径【jìng】中。ckeditor 目录是缺【quē】省目录。

2、升级

要升级现有的CKEditor 安装【zhuāng】，按如下方【fāng】式进行【háng】：
1) 将你【nǐ】的旧编辑【jí】文件夹更名为备份文件【jiàn】夹，如【rú】ckeditor_old。

2) 从CKEditor 网站：http://ckeditor.com/download下【xià】载最【zuì】新版本【běn】的CKEditor 。

3) 将下载的文【wén】档解【jiě】压到【dào】原编辑器的目录【lù】，如ckeditor。

4) 将你【nǐ】已【yǐ】做【zuò】过更改的配置文件从备份目录复【fù】制到其新目录的相应位置。这【zhè】些配【pèi】置文件

可能包括（但不限于）下列文件：

oconfig.js ,

contents.css ,

styles.js

3、验证安装

CKEditor 带有样【yàng】例页面，可以用【yòng】于验证安【ān】装是否正常。为了查看编【biān】辑【jí】器【qì】是否工作【zuò】，看一下样例目录【lù】。
要检查安装，在你的站点中调用下面的页面：
http:////samples/index.html

例如：http://www.example.com/ckeditor/samples/index.html

二、集成

1、加载CKEditor

CKEditor 是JavaScript应用程序。要加载它，需要在页面中包【bāo】含一个简单的文件引用。如果【guǒ】已【yǐ】在站点【diǎn】根目录【lù】下的ckeditor目录中安装了CKEditor ，你需【xū】要【yào】将下【xià】面的代码片【piàn】段插【chā】入到【dào】页面的【de】部分：

<head>
   ...<script src="/ckeditor/ckeditor.js"></script></head>

当上述文件【jiàn】加载后，就可以使【shǐ】用CKEditor JavaScript API。

当将CKEditor加入到web页面时【shí】，使用原始的文件名（ckeditor.js）。如【rú】果想使用不同的文【wén】件【jiàn】名，或者甚至想将CKEditor合并到另外【wài】一个JavaScript文件【jiàn】中，请先参【cān】考开发人员指南中的 Specifying the Editor Path部分【fèn】。

生成编辑器

现在【zài】已经可以在页面【miàn】中【zhōng】使用 CKEditor JavaScript API了【le】，可以使用它生成编辑【jí】器。为此，有两种可【kě】用的选【xuǎn】项：
1、框架式编辑（Framed Editing）

最常用的使用【yòng】方式，通常【cháng】的表【biǎo】现形式是在【zài】页面中指定【dìng】位置放置工具栏和编辑区。

2、内联式编辑（Inline Editing）

用于看起【qǐ】来像最终【zhōng】的页【yè】面中。通过HTML5的contenteditable（内容【róng】可编辑【jí】的）属性，可以将编辑【jí】直【zhí】接【jiē】应用于【yú】HTML元素上。点击你偏爱的选项获得【dé】更多信息。

3、框架式【shì】编辑（Framed Editing）
框架式编【biān】辑是使用 CKEditor最常【cháng】用【yòng】的方【fāng】式。它通常的【de】表现形式是在【zài】页【yè】面中指定位置放置工【gōng】具栏和编辑区。
在加载 CKEditor的脚【jiǎo】本后，就可以准备【bèi】生【shēng】成【chéng】编辑器了。

2、生成框架式编辑式

在框架式编【biān】辑时【shí】，CKEditor 的工作就像【xiàng】页【yè】面中的文【wén】本域元【yuán】素。编辑器提供了【le】用户界面，可以容易在编写、格【gé】式化，并可与富【fù】文本一起处理，但【dàn】是可【kě】以用元素完成【chéng】同【tóng】样【yàng】的事情（尽管不【bú】是那么容易），需【xū】要用户在【zài】其中输【shū】入HTML代码。实际上，CKEditor 使【shǐ】用【yòng】文【wén】本域【yù】将其数据传给【gěi】服务器。对于终端用来来说，文本域【yù】是【shì】不可见的。为【wéi】了生成编辑器【qì】的实例，必须【xū】首先将<textarea>元素加入到【dào】HTML页面的源【yuán】代码【mǎ】中。 <pre class="prettyprint lang-xml"><textarea name="editor1">Initial value.</textarea></pre> 注意如果你【nǐ】想将数据加【jiā】载【zǎi】到编辑器【qì】中，如【rú】从数据中，你需【xū】要将数【shù】据置入【rù】<textarea>元素中，就像上面例子【zǐ】中HTML编码的【de】元素一样【yàng】。在此例中，文【wén】本【běn】域被命名【míng】为editor1。在后面当【dāng】收【shōu】到提【tí】交的【de】数据后【hòu】，可以【yǐ】将【jiāng】此名字用【yòng】于服务器端的代码中插入【rù】文【wén】本域后【hòu】，就【jiù】可以使【shǐ】用CKEditor JavaScript API将HTML元【yuán】素替换为编辑【jí】器的实例。为此，需要【yào】调用简【jiǎn】单的CKEDITOR.replace方法： <pre class="prettyprint lang-xml"><script>CKEDITOR.replace( 'editor1' );</script></pre> 此脚本块必须被包含在<textarea>标【biāo】记【jì】后的【de】页面源代码的【de】任意【yì】位置【zhì】。你也可以【yǐ】在【zài】<head>部分调用replace函数，但此时需要监听window.onload事件【jiàn】： <pre class="prettyprint lang-xml"><script>window.onload = function() {CKEDITOR.replace( 'editor1' ); };</script></pre> 保存【cún】编辑器的数据 如【rú】上【shàng】所述，编辑器的工【gōng】作方式类【lèi】似于<textarea>域【yù】。这意味【wèi】着当提交包含编辑器实例的表单时，数据将【jiāng】很简单地提【tí】交，使【shǐ】用<textarea>元素名作为键来【lái】检查【chá】它。 例如，接着上面的例子，我们可以生成下面的【de】PHP代码： <pre class="prettyprint lang-xml"><?php $editor_data = $_POST[ 'editor1' ];?></pre> 客户端数据【jù】处理 一些应用程【chéng】序（如【rú】基【jī】于Ajax的）需要【yào】在客【kè】户端处理所【suǒ】有的数【shù】据，用【yòng】其特定的方法【fǎ】将数据发给服务器。如果是这样【yàng】，使【shǐ】用CKEditor JavaScript API就足以很容易【yì】地检索编辑器实例的数据。为此，你可【kě】以使【shǐ】用getData方法【fǎ】： <pre class="prettyprint lang-xml"><script>var editor_data = CKEDITOR.instances.editor1.getData(); </script></pre> 完整的样例 要插【chā】入一个【gè】CKEditor实例【lì】，可以使用【yòng】下面的样例来生【shēng】成一【yī】个页面，它包含【hán】一个用CKEditor替换【huàn】过的表单。 <pre class="prettyprint lang-xml"><html><head><title>CKEditor Sample</title> <div class="ke-script" data-ke-script-attr="%20src%3D%22/ckeditor/ckeditor.js%22"></div> </head><body><form method="post">My Editor: <textarea name="editor1">Initial value.</textarea> <div class="ke-script" data-ke-script-attr="">%0A%20%20%20%20%20%20%20%20CKEDITOR.replace%28%20%27editor1%27%20%29%3B%20%20%20%20%20%20%20%0A%20%20%20%20%20%20</div> <input type="submit" /> </form></body></html></pre> 3、内联式编辑（Inline Editing） 内联【lián】式编辑【jí】是一种新技术，使【shǐ】得可以编辑看起来像最终样子的页面【miàn】。它是【shì】一种完全的“所见即【jí】所得【dé】”（WYSIWYG ）体验，因为不【bú】仅是编辑的内【nèi】容看起来像最终样子，而且内容所在的页面和【hé】上下文【wén】也是这样。启用内联式【shì】编辑【jí】 通过【guò】HTML5的contenteditable（内【nèi】容可编辑的）属性，内联式编辑可以直接在【zài】HTML元素上启用。例【lì】如，假【jiǎ】设你想使用一【yī】个<div>元素可编辑【jí】。可以这【zhè】样做： <pre class="prettyprint lang-xml"><div id="editable" contenteditable="true"> <h1>Inline Editing in Action!</h1> The div element that holds this text is now editable. </div> </pre> 也可以通【tōng】过代码来启用编辑，通过调用CKEDITOR.inline： <pre class="prettyprint lang-xml"><div id="editable" contenteditable="true"> <h1>Inline Editing in Action!</h1> The div element that holds this text is now editable. </div> <script> // Turn off automatic editor creation first. CKEDITOR.disableAutoInline = true; CKEDITOR.inline( 'editable' ); </script> </pre> 当在上面【miàn】的<div>内容中点【diǎn】击时，CKEditor的工具栏就是【shì】出现。检索编【biān】辑【jí】器的数据 跟框【kuàng】架式【shì】编辑【jí】不【bú】同【tóng】，当使用内联式编辑时【shí】，用CKEditor编【biān】辑的数据没有放在<textarea>中，而是直接存在于页面的DOM中。因此，应用程序就要完成检查数【shù】据和存储所【suǒ】需的操【cāo】作。 要检【jiǎn】查编辑【jí】器【qì】的数据，简单地调【diào】用编【biān】辑器实例的CKEDITOR.editor.getData方法。对于上面【miàn】的例子，如下【xià】： <pre class="prettyprint lang-xml"><script> var data = CKEDITOR.instances.editable.getData(); // Your code to save "data", usually though Ajax. </script> </pre> 注【zhù】意为了检索编辑【jí】器实例，最初的<div> id已【yǐ】传给了CKEDITOR.instances对象【xiàng】。 三、配置【zhì】 1、设置CKEditor 的【de】配置CKEditor 具有丰富的一组【zǔ】配置选项，可以定【dìng】制其外观【guān】、功能【néng】和行【háng】为【wéi】。主【zhǔ】配置文件名字为config.js。此文件【jiàn】可【kě】以在CKEditor 安装【zhuāng】文件【jiàn】夹的根目【mù】录中找到【dào】。可用【yòng】的配【pèi】置选【xuǎn】项 在API文档中可【kě】以找到所有可用的【de】配置选项。参考CKEDITOR.config对象【xiàng】的定义【yì】。在【zài】页面中【zhōng】（In-Page）定义配置 设置【zhì】 CKEditor的最好【hǎo】方法【fǎ】是当生成了编辑【jí】器【qì】实例时，在页面中设置。此方【fāng】法可以使【shǐ】你避【bì】免修改 CKEditor安装文件夹中【zhōng】最初发布的【de】文【wén】件，使升级【jí】任务更容易。 在【zài】页面【miàn】中【zhōng】可将设置【zhì】传【chuán】给【gěi】任意编【biān】辑器实例【lì】生成函数，即【jí】CKEDITOR.replace 和CKEDITOR.appendTo。例如： <pre class="prettyprint lang-xml">CKEDITOR.replace( 'editor1', { toolbar : 'Basic', uiColor : '#9AB8F3' }); </pre> 注意通过一个【gè】字面对【duì】象【xiàng】定义（以“｛”符号开始，以【yǐ】“｝”符号结束）来传【chuán】递配置选项。因【yīn】此，每【měi】个【gè】选项的【de】正【zhèng】确【què】语法是（"配【pèi】置的名字【zì】"）:（"配置的值"）。一定【dìng】不要在冒号字符（:）处使用【yòng】“等于”字符（=）。使【shǐ】用config.js文件 也【yě】可以【yǐ】通【tōng】过使用【yòng】config.js文件来配【pèi】置CKEditor的设置【zhì】。此文件缺省情况【kuàng】几乎为空【kōng】。要改【gǎi】变CKEditor的【de】配【pèi】置，将你想【xiǎng】要修【xiū】改的设置增加到config.js文件中。例如： <pre class="prettyprint lang-xml">CKEDITOR.editorConfig = function( config ) { config.language = 'fr'; config.uiColor = '#AADC6E'; }; </pre> 为了应用配置设置，必须总是要定义CKEDITOR.editorConfig函数。config.js文件将在页【yè】面范围中【zhōng】被执行，故你【nǐ】还可【kě】以引用【yòng】在页面（In-Page）或【huò】者【zhě】甚至是其【qí】它JavaScript文件中定义的【de】变量【liàng】。使用定制的【de】配置文件 使用定【dìng】制的配置文件是另【lìng】一种推荐的【de】设置CKEditor配置的方【fāng】法。不使【shǐ】用缺【quē】省的config.js文件，你可以将此文件复【fù】制到【dào】站点的任【rèn】何地方，并简单【dān】地【dì】引导编辑器加载它。此方法的优点【diǎn】是【shì】采用此方法可以避免【miǎn】改变原始的【de】文件，从而使以后升【shēng】级CKEditor更容易，只是简单【dān】地覆盖所有的文【wén】件。假设你将config.js文件复制【zhì】到你的站点【diǎn】根目录【lù】下一个【gè】叫custom的文件夹中【zhōng】。你还将此文件更名【míng】为ckeditor_config.js。此时，要使用【yòng】定义在【zài】文件中的【de】定制设置，只需在生成编辑器实例时，设【shè】置customConfig配置选【xuǎn】项【xiàng】即可。例如： <pre class="prettyprint lang-xml">CKEDITOR.replace( 'editor1', { customConfig : '/custom/ckeditor_config.js' }); </pre> 定制的配置文件必须看起来像缺省的config.js文件。配置的【de】加载顺序 不【bú】要求你仅使【shǐ】用【yòng】一种【zhǒng】上述配置选项。可以混用上述方法，并且可以正【zhèng】确地加载配置。下面【miàn】的【de】列表表示在生成编辑器实例时所使用的配置加载顺序：<ul><li>生成一【yī】个【gè】编辑【jí】器的实例【lì】。此时【shí】，其所【suǒ】有【yǒu】配置项设置【zhì】为缺少值。</li><li>如【rú】果在页面【miàn】中（in-page）中有配置设置，该文件被加载，否则【zé】加载缺省的config.js文件。在定制配置文件中的所有设置【zhì】覆盖当前实【shí】例的配置。</li><li>如果在第二步【bù】加载的【de】设置中【zhōng】还定义了新的【de】customConfig值，就【jiù】加载另一【yī】个配置文件，且其设置覆盖实例的当前设置【zhì】。对所有文件递归，直【zhí】到没有再定【dìng】义customConfig。</li><li>最终，在页面【miàn】中(in-page)中【zhōng】定义【yì】的设置覆盖【gài】实例的当前设【shè】置【zhì】（除了customConfig，它已【yǐ】在第【dì】一【yī】步中使用【yòng】过【guò】了）。</li></ul>避免加载外【wài】部【bù】的设【shè】置【zhì】文件 也【yě】可能完全避免加载外部的配置文件，以减少加载的文件数。为此【cǐ】，你需要将 CKEDITOR.config.customConfig设置为空字符【fú】串。例【lì】如： <pre class="prettyprint lang-xml">CKEDITOR.replace( 'editor1', { customConfig : ' ' }); </pre> 如果你在config.js文件中没有配置，也没有定制【zhì】的配置文件，则一定推荐此设置【zhì】。2、工具【jù】栏的定制虽然CKEditor是一个功能齐全的“所见【jiàn】即【jí】所得”编辑器，但是并不是【shì】其所有选项在所有情况下都需要。因此，工具【jù】栏定【dìng】制【zhì】是最【zuì】常用需【xū】求之一。 有两种方法配置工具栏来【lái】匹配【pèi】需求：<ol><li>工具栏组配置</li><li>“逐项”配置</li></ol>工【gōng】具栏组配置 CKEditor 4为组织【zhī】工【gōng】具【jù】栏引入了新概念，它基于“分组”，而【ér】不是传【chuán】统的“逐项定位【wèi】”方式。 配置分组是由toolbarGroups设【shè】置定义的【de】。下面是CKEditor标【biāo】准发布【bù】所使用【yòng】的配置： <pre class="prettyprint lang-xml">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' } ]; </pre> 它是一个对【duì】象的列表（数组），每一项有一个【gè】“name”（如"clipboard"或"links"）和一个可选【xuǎn】的“子组”列表。 改变【biàn】组的顺序 可以通过改【gǎi】变上述配置，可【kě】以容【róng】易地定制组【zǔ】的顺序和位置。 通过加入'/'，正如在上面看到的，可以在工【gōng】具【jù】栏中强制断行（row-break）。 注意：在上面的配置中，有没有使【shǐ】用的组。这是因为“设计”的原因【yīn】（参见“组配【pèi】置的好处”）。组配置的好【hǎo】处 与“逐项”配【pèi】置相比【bǐ】，配置工具栏【lán】分【fèn】组的【de】最重【chóng】要好处是：自动化。现在可以让【ràng】插件开发人员决定其【qí】插件应该将按钮加到工【gōng】具栏【lán】的哪【nǎ】个【gè】组中【zhōng】。例如，“图像”插件【jiàn】，可将【jiāng】其按钮【niǔ】包括【kuò】到“插入”组中，而撤销和重做按钮加【jiā】到“撤销”子组中。虽【suī】然不是【shì】强【qiáng】制【zhì】性的，但【dàn】推荐要配置所【suǒ】有的组和子组（包括没有使用的），因为在将来的任【rèn】何时【shí】候，当安装了新的插件【jiàn】时，其【qí】按钮将会自动出现在工具栏【lán】中【zhōng】，而不用再配置。组【zǔ】配【pèi】置的缺点 分组配置的最明显问【wèn】题是不可能精确控制每项在工具栏【lán】中【zhōng】的放【fàng】置位置。它是由插件自【zì】身来决定【dìng】的。“逐项”配置 除了【le】分组配置，还可以通过确定精确的【de】位【wèi】置【zhì】来控制工具栏中【zhōng】的每一个单独【dú】的元【yuán】素。这是通过【guò】配置【zhì】“工具栏定【dìng】义”来完成的【de】。 工具栏【lán】定义是一个JavaScript数组，它含有在编辑器【qì】中【zhōng】可以使用的在【zài】所有工具栏行中显示【shì】的元【yuán】素。下面是一个【gè】例子： <pre class="prettyprint lang-xml">config.toolbar = [ { name: 'document', items: [ 'Source', '-', 'NewPage', 'Preview', '-', 'Templates' ] }, { name: 'clipboard', items: [ 'Cut', 'Copy', 'Paste', 'PasteText', 'PasteFromWord', '-', 'Undo', 'Redo' ] }, '/', { name: 'basicstyles', items: [ 'Bold', 'Italic' ] } ]; </pre> 这里每个工具栏【lán】组都给定了一个名字，并定义【yì】了【le】其中项目的精确清单。也可【kě】以【yǐ】用简单的【de】语法实现上面的（参见后【hòu】面【miàn】的【de】“访问问题”）： <pre class="prettyprint lang-xml">config.toolbar = [ [ 'Source', '-', 'NewPage', 'Preview', '-', 'Templates' ], [ 'Cut', 'Copy', 'Paste', 'PasteText', 'PasteFromWord', '-', 'Undo', 'Redo' ], '/', [ 'Bold', 'Italic' ] ]; </pre> 通过将'-'(短线)加【jiā】到项目列表中，将项目分【fèn】隔符包括其中，如上【shàng】面看【kàn】到的。将'/'加到组之间【jiān】，可以【yǐ】在工具【jù】栏【lán】中强制断行。它们可以用于在其放置【zhì】的位置【zhì】强制断行，使得下一个【gè】工具【jù】栏组处于新的一行【háng】。 “逐项”配【pèi】置的好处 这【zhè】种配置最明显的好处是每个单【dān】独的【de】项目【mù】在工具栏【lán】中的位置都可以控【kòng】制。“逐【zhú】项”配置的缺点 最大的【de】问题是当【dāng】安装新的插件时没有【yǒu】了自动化。这意味【wèi】着，如果有任何新【xīn】的插件加入【rù】到你的编【biān】辑【jí】器中，你【nǐ】将不【bú】得不手【shǒu】动改变你的配【pèi】置，将插件按【àn】钮包含于【yú】希【xī】望的位置。可访【fǎng】问性问【wèn】题 用于每个工具栏组的【de】名字将被帮助【zhù】技术所使用，如屏幕阅读器（screen readers）。该名字将被CKEditor 用于【yú】在编辑【jí】器语言【yán】文件（工【gōng】具栏【lán】组条目【mù】）中查找【zhǎo】每个工具栏【lán】组的“可读”名【míng】字【zì】。屏【píng】幕阅读器将通过使用其可【kě】读名字（如【rú】果可用）或其已定义的名字属【shǔ】性【xìng】显【xiǎn】示每个工具栏组。 3、样式 样【yàng】式组合（Stryles Combo）插件【jiàn】将一个【gè】组合加入到CKEditor 的工具栏中，包含一个样式列表。此列表使很容易地【dì】将定【dìng】制的样式和语义值应用于在编辑【jí】器中【zhōng】生成的内容上。可【kě】以很容【róng】易【yì】地定制组合下拉列表中可【kě】用的条目，以【yǐ】满足你【nǐ】的需要。定义样式 样【yàng】式定【dìng】义是【shì】一个JavaScript数组，通过调【diào】用CKEDITOR.stylesSet.add函数注册。必须给【gěi】样式定义赋【fù】以唯一的【de】名【míng】字，这样后面就可以配【pèi】置每个编辑器实例来加载它【tā】。这种方法可以使一个【gè】样【yàng】式【shì】定义被页面【miàn】中【zhōng】多个【gè】CKEditor实例共享。下面的代码展示了【le】如何注册一【yī】个例子样式【shì】定义。 <pre class="prettyprint lang-xml">CKEDITOR.stylesSet.add( 'my_styles', [ // Block-level styles { name: 'Blue Title', element: 'h2', styles: { 'color': 'Blue' } }, { name: 'Red Title' , element: 'h3', styles: { 'color': 'Red' } }, // Inline styles { name: 'CSS Style', element: 'span', attributes: { 'class': 'my_style' } }, { name: 'Marker: Yellow', element: 'span', styles: { 'background-color': 'Yellow' } } ]); </pre> 如上【shàng】面所【suǒ】示的【de】样式定义注册可以【yǐ】内置于页面源代码【mǎ】中，或者存【cún】在于外部文件中【zhōng】，只要需【xū】要时，“按需”加载。（见【jiàn】下【xià】面）。当准备好定【dìng】义后，你必须通过使用stylesSet设置【zhì】使编辑器应用【yòng】新【xīn】注【zhù】册的【de】样式。这可【kě】以在config.js文件中设【shè】置，例如【rú】： <pre class="prettyprint lang-xml">config.stylesSet = 'my_styles';</pre> 使用外部样式定义文件【jiàn】 可【kě】以将样式定【dìng】义的注册调用包含在一个外部JavaScript文件中【zhōng】。缺省情况，CKEditor从其安【ān】装【zhuāng】文件夹中【zhōng】的【de】styles.js文件中【zhōng】加载【zǎi】样式定义。 你的样式定义文【wén】件可以【yǐ】保存在站点的任意地【dì】方（或互联网的【de】某【mǒu】个地方）。但，你必须知道访【fǎng】问它所需的URL。例如，你可以将此文件保存【cún】在站点的根目录中，然后按/styles.js调用它，或者放在其它【tā】任【rèn】意地方，并使用其完整的【de】URL引用它，如http://www.example.com/styles.js。此时，改【gǎi】变stylesSet设置，使编辑器指向此文件： <pre class="prettyprint lang-xml">config.stylesSet = 'my_styles:/styles.js'; //或者【zhě】 config.stylesSet = 'my_styles:http://www.example.com/styles.js'; </pre> 样式定义设置的语法总是：样式定义名称:文件的URL。 注意，必须使【shǐ】用在【zài】此【cǐ】文件中【zhōng】注册样式【shì】定义时使用【yòng】过的唯【wéi】一的名【míng】称。样【yàng】式规则【zé】 在样式【shì】定【dìng】义中的输入【rù】项称为“样式规则【zé】”。每条【tiáo】规则【zé】定义了单个样式的显示【shì】名字和元素、属性以及所使用的CSS样式。下【xià】面是它【tā】的一般表现形式： <pre class="prettyprint lang-xml">{ name: 'Name displayed in the Styles drop-down list', element: 'HTML element name (for example "span")', styles: { 'css-style1': 'desired value', 'css-style2': 'desired value', ... } attributes: { 'attribute-name1': 'desired value', 'attribute-name2': 'desired value', ... } } </pre> 名【míng】称【chēng】和【hé】元素值是必【bì】须的，而其它的值是可选的。样式【shì】的类型 有三种样式类型【xíng】，每一种都与在【zài】样【yàng】式规【guī】则中使用的【de】元素相关:<ul><li>块级样式（Block-level styles）-作为整体【tǐ】应用于文本块（段落），不限于【yú】文本选择。应用于【yú】下面的元素：address, div, h1, h2, h3, h4, h5, h6, p, 和 pre。</li><li>对象样式（Object styles）- 用于特殊的可选【xuǎn】择的【de】对象（不是文本的），不论【lùn】何时只要你的浏览器支持这样的选择。应【yīng】用于下面的元素：a, embed, hr, img, li, object, ol, table, td, tr 和 ul。</li><li>内联样式（Inline styles ）- 应用于文本选择，其样【yàng】式规则所【suǒ】使用【yòng】的【de】元素【sù】没有在其【qí】它样式类型中定义。</li></ul>样式单【dān】解析器插件（Stylesheet Parser Plugin） 存在另一种【zhǒng】简化【huà】的方法，用【yòng】于定制【zhì】在CKEditor中生【shēng】成文档【dàng】的样式，用外部CSS样式【shì】单文件【jiàn】中添加【jiā】的样式定【dìng】义来填充下拉清单【dān】。样式单【dān】解析器插【chā】件允许使用现有的CSS样式【shì】，而不必按上面给出的格式专门为【wéi】CKEditor定义样式。安装【zhuāng】完样式单解析【xī】器后，需要使【shǐ】用 contentsCss配置设置，提供含有【yǒu】样【yàng】式定义的CSS文件的位置：最后，如果你想跳过加载CKEditor 缺【quē】省【shěng】使用的样【yàng】式，可以将stylesSet设置【zhì】为【wéi】空值： <pre class="prettyprint lang-xml">config.contentsCss = 'sample_CSS_file.css';</pre> 这【zhè】种解决方法使得【dé】可【kě】以配置编辑【jí】器使【shǐ】用【yòng】现有【yǒu】的CSS样【yàng】式单规则，而不需要为CKEditor生成【chéng】单独的【de】样【yàng】式定义。另一方面，前面使用的方法提供了对用户可以【yǐ】使用样式的【de】更多控制【zhì】，因此，两种方法【fǎ】可【kě】以按需要互换使【shǐ】用。选择CSS选择器 可以细调此插件，以使只考【kǎo】虑与【yǔ】stylesheetParser_validSelectors配置值相匹【pǐ】配的CSS选择【zé】器【qì】。默认的正则表达式接受 element.class形式的所【suǒ】有CSS规【guī】则，但可【kě】以修改它，以【yǐ】引用有限的元素集，如【rú】下面的例子： <pre class="prettyprint lang-xml">// Only add rules for and elements.（仅为和元素【sù】增【zēng】加【jiā】规则 config.stylesheetParser_validSelectors = /\^(p|span)\.\w+/; </pre> 限制CSS选择器 通过设置stylesheetParser_skipSelectors的【de】配【pèi】置值，也可以进行定制。那么，该插件将会角力忽略与正【zhèng】则表达式相匹配的【de】CSS规则【zé】，不【bú】会【huì】在下拉列表中显示它们【men】，也不会使用它们输出文档内容。默认值不包括为<body>的所有【yǒu】元【yuán】素和为非具体元素【sù】定义的类，但可以【yǐ】修改它【tā】，以忽略更广泛的元素集，如下例： <pre class="prettyprint lang-xml">// Ignore rules for <body> and <caption> elements, classes starting with "high", and any class defined for no specific element.（忽略<body>和<caption>元素、以“high”开头的类，以及【jí】为非具体【tǐ】元素定义的类的规【guī】则） config.stylesheetParser_skipSelectors = /(^body\.|^caption\.|\.high|^\.)/i; </pre> 4、高级内容过滤器 介绍 注意：高【gāo】级内容过滤【lǜ】器是在CKEditor 4.1中引入【rù】的。什么是高级内容过【guò】滤【lǜ】器【qì】（ACF）？ ACF是自【zì】CKEditor 4.1可用的【de】高度可【kě】配置的CKEditor核【hé】心特色功能。它限制和适配输入的数据【jù】（在源【yuán】代码模式中或由editor.setData方法添【tiān】加的HTML代码【mǎ】，粘贴的【de】HTML代码，等等），因【yīn】此它可以以更【gèng】可【kě】行【háng】的方式配置编【biān】辑【jí】器的配置【zhì】。它也可以使【shǐ】生成配置不允许【xǔ】的HTML代码的【de】功能无效。高级内容过【guò】滤器有两种工作模式：1、自【zì】动模式-过虑【lǜ】器由编辑器功【gōng】能（如【rú】插【chā】件，按钮和命令【lìng】）进行配置，这些功能是由配 置选项【xiàng】，如CKEDITOR.config.plugins、 CKEDITOR.config.extraPlugins和 CKEDITOR.config.toolbar，来启用的。2、定制模式-由CKEDITOR.config.allowedContent选项【xiàng】来配【pèi】置过滤器，并且只有与此设【shè】置匹配的【de】功能才被激活。 在两种模式中，可【kě】以通过使用CKEDITOR.config.extraAllowedContent设置来【lái】扩展过滤【lǜ】器的配置。如【rú】果想【xiǎng】使高【gāo】级内容过滤器【qì】不起【qǐ】作【zuò】用，将CKEDITOR.config.allowedContent设置为【wéi】"true"。所有可用【yòng】的编【biān】辑器功能将被激活，并且将不【bú】会过滤输入的数据。自动模式 当没【méi】有【yǒu】提供CKEDITOR.config.allowedContent设【shè】置【zhì】时，高级内容过滤器工作于自动模式。在编辑【jí】器初始【shǐ】化时【shí】，编辑【jí】功能将其【qí】规则添加【jiā】到过【guò】滤器【qì】。因此，只允许使【shǐ】用当前加载的功能可以【yǐ】编辑的内容，其【qí】余所有【yǒu】内容都被过滤掉。 下【xià】面的例子或许可【kě】以较容易地理解ACF的自动模式。1. 从完【wán】全或标准CKEditor包中打开【kāi】datafiltering.html例子【zǐ】（基【jī】本包提供【gòng】的功能集【jí】太有限了）。2. 勾【gōu】选editor 1。它使用【yòng】默认的配置，所以所有包中可用的按钮、按键或样式都是【shì】有效 的，并且编辑【jí】器【qì】的内【nèi】容也与最初加载的内容一样（除了标准包中的很小细【xì】节--因为【wéi】标准包不包括 Justify（调【diào】整版面）插件，页脚没有向右对齐）。3. 现在勾选editor 4。你可以看到很【hěn】多插件和按钮被CKEDITOR.config.removePlugins和【hé】 CKEDITOR.config.removeButtons移除了；CKEDITOR.config.format_tags列【liè】表也被缩减了。配置的改变自动反映在了编辑器【qì】的内容中了【le】--Image工具栏【lán】按钮没有了，故在内容中也就【jiù】不【bú】存在图像了；Table插件没【méi】有【yǒu】了，故【gù】添加【jiā】在原始内容中【zhōng】的表格也被移除了。你【nǐ】可以【yǐ】在源代码模式【shì】中看一下编辑器是如【rú】何清除【chú】粘贴的内容或HTML代码【mǎ】。如果想将编辑器配置为工作于【yú】自动【dòng】模式，但【dàn】需要附加【jiā】的【de】HTML标记【jì】、属性、样式或类生效，可【kě】以使用CKEDITOR.config.extraAllowedContent配置选项。定制模式【shì】 当【dāng】定义了CKEDITOR.config.allowedContent设置后，高级内容过滤【lǜ】器就工【gōng】作于定【dìng】制模式。此配置选项告【gào】诉过滤【lǜ】器允许哪些HTML元【yuán】素、属性【xìng】、样式和【hé】类【lèi】。基于默认的规则（称为允许内容规则--Allowed Content Rules），编辑器过滤【lǜ】输入【rù】的数据，决定哪些功【gōng】能生效【xiào】。允【yǔn】许内【nèi】容【róng】规则（Allowed Content Rules）可以被设置为两【liǎng】种【zhǒng】不【bú】同的格式【shì】：紧凑的字【zì】符串格式（string format）和更强【qiáng】大的对象格式（object format）。关【guān】于允【yǔn】许内容规则，请阅读【dú】允许内容规【guī】则【zé】。 下面【miàn】的例【lì】子【zǐ】可以使较【jiào】容易【yì】地理解ACF的定【dìng】制模式。1. 从完全【quán】或标准CKEditor包【bāo】中打开datafiltering.html例【lì】子（基本包提供的功能集太【tài】有限了）。2. 勾选editor 1。它使用默【mò】认的配置【zhì】，所【suǒ】以所有包中可用的按钮、按键或样式都是有效【xiào】的，并【bìng】且编辑【jí】器的【de】内【nèi】容也与最初加载【zǎi】的内【nèi】容一样【yàng】（除了标准包中【zhōng】的很小细节【jiē】--因【yīn】为标准包不包括【kuò】 Justify（调整【zhěng】版面）插件【jiàn】，页脚没有向右对齐）。3. 勾【gōu】选editor 2。CKEDITOR.config.allowedContent选项定义了允许【xǔ】内容【róng】规则使用字符串格式。注意到，因为【wéi】这【zhè】些规则不允许's'元素，删去（Strike Through）按钮从工具栏【lán】中被删除了，并且文本中的【de】删【shān】去格式化也被【bèi】删除【chú】了。对于带有水平（Horizontal Line）、下标（Subscript）和上标（Superscript）功【gōng】能的【de】例子同样如此。再看一下Styles和Format下拉列表【biǎo】，仅含有允许【xǔ】内容规则中定义的项【xiàng】目。而且，在某些【xiē】对话框中可用的选项也受到了限【xiàn】制。例如【rú】，图象对话【huà】窗口仅含【hán】有URL、替代文字（Alternative Text）、宽度和高度【dù】值【zhí】，因为仅【jǐn】有这些【xiē】属性在CKEDITOR.config.allowedContent中定【dìng】义了。4. 另【lìng】外，editor 3 被配置为使用对象格式定义的不同【tóng】规则集【jí】。 内容【róng】转换（Content Transformations） 高【gāo】级内容过滤【lǜ】器不【bú】仅可以删除【chú】不允许【xǔ】的HTML元素、它们的【de】类、样式和属性【xìng】，而且可以【yǐ】试着通过将元素【sù】从一种形式转换为【wéi】另一种更【gèng】喜欢的形式，从而统一输【shū】入数据。考虑加粗（Bold）功能。在HTML代码中，它可以用、 ，或者甚至 元素来表示。假设【shè】 CKEDITOR.config.allowedContent设置仅【jǐn】含有对的规则。这是否意【yì】味着当解析【xī】<string>或元素时，会删除它们？不会。编辑器【qì】会将它们都【dōu】转【zhuǎn】换为元素。结【jié】果是编辑器将只含有元素，并且会保【bǎo】留粘贴内容的可视化形式【shì】。如果保【bǎo】留默【mò】认【rèn】的【de】CKEDITOR.config.allowedContent值（在【zài】自动【dòng】模式中），也同样如此--所有加粗【cū】的功能【néng】形式【shì】将【jiāng】被【bèi】统一【yī】成偏爱的形式。假设将【jiāng】'img[!src,alt,width,height]'设置【zhì】（<img />标【biāo】记带有必【bì】需的src和三个【gè】可选的【de】属【shǔ】性【xìng】）添加到允许【xǔ】内容规则中。图【tú】像大小【xiǎo】应该【gāi】用属性来设置【zhì】，因此，作为例【lì】子，用【yòng】样【yàng】式设【shè】置【zhì】大小的粘贴图像将被转换成具有【yǒu】属【shǔ】性【xìng】的【de】图像（注【zhù】意，不是【shì】所【suǒ】有情况都可【kě】能--只【zhī】有基于像素的大小可【kě】以被【bèi】转换）。内容转换功【gōng】能【néng】完【wán】全是【shì】自动的，不需要配置它。需要做的【de】唯一的事【shì】情【qíng】是设置【zhì】CKEDITOR.config.allowedContent选【xuǎn】项，或使用默认【rèn】的值（自【zì】动模式）目前，我们只是为几个【gè】编辑器功能定义了内容【róng】转换，但是【shì】在将来发布的版本中数【shù】量会增加【jiā】。允许内容规则（Allowed Content Rules） 注意：高级内【nèi】容过【guò】滤【lǜ】器是在CKEditor 4.1中引入的。简介 允许内容规则定义了允【yǔn】许哪些HTML元素、属性、样【yàng】式【shì】和类。当配【pèi】置CKEditor时，你将对设置【zhì】CKEDITOR.config.allowedContent选项最感【gǎn】兴趣。插件开发人员【yuán】也需要设置CKEDITOR.config.allowedContent属【shǔ】性，告诉【sù】编辑器在【zài】自动模【mó】式中一【yī】项【xiàng】功能【néng】所【suǒ】允【yǔn】许【xǔ】哪些内容。 允许内容规则通常【cháng】包括四个主要部分：<ul><li> 允许的元素，</li><li> 这些元素可以有的属性，</li><li> 这些元素可【kě】以有的样式，</li><li> 这【zhè】些元素可以【yǐ】有【yǒu】的【de】类。</li></ul>注意【yì】：替【tì】代书写【xiě】“属性(attributes)、样式(styles)和类(classes)”，使用“属性【xìng】”（properties）作为简便【biàn】的描述方法。对于一个元素可以存在多【duō】项规则，一个元【yuán】素可【kě】以被包【bāo】含在多个【gè】元【yuán】素列表中。例如，每【měi】一个规则可【kě】以允许另一元素属性集。 规则是一【yī】个一个地【dì】应用的。初始【shǐ】时，被过滤的元素是无效【xiào】的【de】，其所有属性都被拒【jù】绝。应用于该元素【sù】的第一条规则校验【yàn】它（它不会被删除），并且该【gāi】规【guī】则可能【néng】接受某些元素的属性。另一【yī】条【tiáo】规则可能使编辑器接受更多【duō】的元【yuán】素【sù】属性。因此：<ul><li>如果一【yī】个元素不存【cún】在【zài】规则，则删除它。</li><li>可【kě】能【néng】接【jiē】受一个【gè】元素，但拒绝其所有的属性【xìng】，然后就被删【shān】除。</li><li>一【yī】旦被验证，一个【gè】元素和它的属性不能被【bèi】另一规则使之失效。</li></ul>字【zì】符串格式（String Format） 字符串格式是允许【xǔ】内容规则【zé】的紧凑表示【shì】法，但【dàn】它没有提供对象【xiàng】格式中可用的所有功能【néng】。但【dàn】是，在大多数情况下，应该够用了。 规则格式： <pre class="prettyprint lang-xml">elements [attributes]{styles}(classes) </pre> 正则表【biǎo】达式模板： <pre class="prettyprint lang-xml"><elements><styles, attributes, and classes><separator> /^([a-z0-9*\s]+)((?:\s*\{[!\w\-,\s\*]+\}\s*|\s*\[[!\w\-,\s\*]+\]\s*|\s*$[!\w\-,\s\*]+$\s*){0,3})(?:;\s*|$)/i, </pre> 其中:<ul><li>elements – 一列由空格分【fèn】隔的元素名或一个星号（*）字符，</li><li>attributes –一列由逗号分隔的属性名【míng】或一个星号（*）字符，</li><li>styles –一列【liè】由逗号分隔的样式【shì】名【míng】或一个【gè】星【xīng】号（*）字【zì】符【fú】，</li><li>classes –一【yī】列由逗号分隔的类【lèi】或一个星号（*）字【zì】符，</li></ul>特【tè】殊字符：<ul><li>用于元素列表中的星号【hào】意思是：“该规则【zé】对所有元素接【jiē】受后面的属【shǔ】性，但不是这【zhè】些元素本身；必【bì】须有另【lìng】一条规则显式地【dì】接受这些元素【sù】”。</li><li>属性列表【biǎo】中【zhōng】的【de】星号意思是：“接受【shòu】所【suǒ】有属性”。</li><li>用于属性列表中条【tiáo】目名前【qián】的感叹【tàn】号【hào】（!）（如：[!href]）意思是：“此属性是必需的。</li></ul>如果一【yī】个元素不具【jù】有此属性，此规则不应【yīng】应用于【yú】该元素（故此元素【sù】将不会【huì】由它得到验证【zhèng】）”。例子： <pre class="prettyprint lang-xml">// 一条规则接受【shòu】和<h1>元素，但没有任何【hé】属性。 p h1 //一【yī】条【tiáo】规则接受【shòu】具有可【kě】选的"left"和 "right"类的和【hé】<h1>元素【sù】 //注意：两【liǎng】个元素都可能含有【yǒu】这些类，而不仅仅是<h1> p h1(left,right) //一条规则接受【shòu】具有其所有属【shǔ】性【xìng】的和<h1>元素【sù】 p h1[*] //一条规则接受<a>，只有当它含有【yǒu】"href"属性时。 a[!href] //一条规则接受<img>，它具有【yǒu】必需【xū】的"src"属性和一个可选的"alt"属性，加上可选的"width"和【hé】"height"样式 img[alt,!src]{width,height} //与上面相【xiàng】同【tóng】，因为属性的【de】顺【shùn】序和其清单是不相关的，并且忽略空【kōng】格 img { height, width } [ !src, alt ] </pre> 允许内【nèi】容规则集【jí】可以含有由分号（;）分隔【gé】的多【duō】条规则。如： <pre class="prettyprint lang-xml">// 这【zhè】些规则允【yǔn】许： // 具有【yǒu】可选的"text-align"样式的<p和><h1>元素 //具【jù】有【yǒu】必需【xū】的"href"属性的【de】<a> // 和【hé】 元【yuán】素, //具有【yǒu】可选的"tip"类的（故元素可【kě】以同时具有"text-align"样式和"tip"类） p h1{text-align}; a[!href]; strong em; p(tip) //这些规则允许： // 具【jù】有可选的【de】"id"属性的和<h1>元素 //具有必需的"href"属性和可【kě】选的【de】"id"属性的<a> p h1; a[!href]; *[id] </pre> 调试 为了【le】验证允许【xǔ】内容规【guī】则是否被正确解析了，可以检【jiǎn】查CKEDITOR.editor.filter对象【xiàng】的CKEDITOR.filter.allowedContent属性。 <pre class="prettyprint lang-xml">var editor = CKEDITOR.replace( 'textarea_id', { allowedContent: 'a[!href]; ul; li{text-align}(someclass)' } ); editor.on( 'instanceReady', function() { console.log( editor.filter.allowedContent ) } ); // 这将对下列数组【zǔ】做【zuò】日志【zhì】： // { elements: 'p br', ... } (默认编【biān】辑器规则【zé】) // { elements: 'a', attributes: '!href' } // { elements: 'ul' } // { elements: 'li', styles: 'text-align', classes: 'someclass' } </pre> 对象格式（Object Format） 为方【fāng】便使用，允许内容规则可以定义成【chéng】标【biāo】准的对象字面【miàn】量，故下面的： <pre class="prettyprint lang-xml">allowedContent: 'p h1{text-align}; a[!href]; strong em; p(tip)' //与下面的相对应： allowedContent: { 'p h1': { styles: 'text-align' }, a: { attributes: '!href' }, 'strong em': true, p: { classes: 'tip' } } </pre> 采用此方【fāng】法，允许内【nèi】容【róng】规则【zé】可【kě】以由JavaScript动【dòng】态地生成，并因任【rèn】意目的【de】存储成JSON数据格式【shì】。注意：对【duì】象字面量【liàng】的键必【bì】须是【shì】唯【wéi】一的，因此： <pre class="prettyprint lang-xml">allowedContent: { p: { styles: 'text-align' }, p: { classes: 'tip' } } //等【děng】价【jià】于： allowedContent: 'p(tip)' //但永远不会是： allowedContent: 'p{text-align}(tip)' </pre> 5、输出格式化（Output Formatting） CKEditor提供了强大而又灵活【huó】的输出格式化系统。它使开发人员可以完全控制【zhì】由【yóu】编辑器生成的HTML代【dài】码的样子。此系统可以控制所有【yǒu】HTML标记，并且可以给出【chū】每种标【biāo】记不同【tóng】的结【jié】果【guǒ】。HTML编写器【qì】（HTML Writer）HTML编【biān】写器插件可以使【shǐ】CKEditor生【shēng】成高级【jí】格式化的输出。CKEDITOR.htmlDataProcessor类使用"writer"来编写输出数据。因此，可以用editor.dataProcessor.writer属性【xìng】检索出具体编辑【jí】器实例的当前编写器【qì】。通过设置【zhì】writer属性可以配置几种输出【chū】格式化选项。下面的例子概【gài】括【kuò】了最【zuì】常用的几【jǐ】种【zhǒng】，给出了其【qí】默认值： <pre class="prettyprint lang-xml">var writer = editor.dataProcessor.writer; // 生一缩进步使【shǐ】用的字符串 writer.indentationChars = '\t'; //自结束标记的方【fāng】式，就像【xiàng】 writer.selfClosingEnd = ' />'; // 断行【háng】所使用【yòng】的【de】字符串 writer.lineBreakChars = '\n'; // 标记的编写规则【zé】 writer.setRules( 'p', { // 表示在此标记中断【duàn】行【háng】时缩进 indent: true, //在的开始标记前插入断行符 breakBeforeOpen: true, //在的开始标记后【hòu】插入断【duàn】行符 breakAfterOpen: true, // 在的结束标【biāo】记前插入断行符 breakBeforeClose: false, // 在的【de】结束标记后插入断行符 breakAfterClose: true }); </pre> 设置【zhì】编写器规则 因为编辑器是每个编辑器实例的属性，并且【qiě】由【yóu】于对【duì】加【jiā】载【zǎi】的编写器插件【jiàn】的依赖，对它进行修改的最好方法是监听CKEDITOR.instanceReady事件；这样含义可以安【ān】全地假设CKEDITOR.editor.dataProcessor属【shǔ】性【xìng】将会被加载【zǎi】，并准备好【hǎo】可【kě】以修改。下面的代码【mǎ】展示【shì】了当生成【chéng】编辑器【qì】实例时使用此方法的例子： <pre class="prettyprint lang-xml">CKEDITOR.replace( 'editor1', { on: { instanceReady: function( ev ) { // Output paragraphs as Text. this.dataProcessor.writer.setRules( 'p', { indent: false, breakBeforeOpen: true, breakAfterOpen: false, breakBeforeClose: false, breakAfterClose: true }); } } }); </pre> 另一种方法是使用CKEDITOR对象，这样所有的编辑器实【shí】例会被改变： <pre class="prettyprint lang-xml"> CKEDITOR.on( 'instanceReady', function( ev ) { // Ends self closing tags the HTML4 way, like . ev.editor.dataProcessor.writer.selfClosingEnd = '>'; }); </pre> 6、拼写检查（Spell Checking） CKEditor可以被配置成使用本地由浏览器提供的拼写检【jiǎn】查【chá】功【gōng】能，也可以使用外部【bù】的拼写检查web服务。本地拼写检查器【qì】 本地拼写检查【chá】功【gōng】能默认情况在编辑器中【zhōng】是被禁用的，可以【yǐ】使用 disableNativeSpellChecker来使【shǐ】之生效： <pre class="prettyprint lang-xml">config.disableNativeSpellChecker = false;</pre> 在重新加载编辑器后，应该可以看到内容下面的拼写下划线。 注【zhù】意：如果上下文菜单插件生效，需要在右击时【shí】按【àn】信CTRL键【jiàn】来查看【kàn】建议。注【zhù】意：一【yī】般情况下，拼【pīn】写检查并不是对所有浏览器都是可用的。SpellCheckAsYouType插【chā】件 SpellCheckAsYouType (SCAYT)插件【jiàn】提供【gòng】了内联（inline）拼写【xiě】检查，更像【xiàng】本地的拼写检【jiǎn】查【chá】器，与CKEditor上下文菜单【dān】很好【hǎo】地集成在一【yī】起【qǐ】。它是【shì】由 WebSpellChecker.net提供的。它使【shǐ】用其web服务，将文本传递到其服务器执【zhí】行【háng】拼【pīn】写【xiě】检查。这【zhè】是【shì】跨浏览器【qì】的解决方案。WebSpellChecker插件 WebSpellChecker插【chā】件是由【yóu】WebSpellChecker.net 提【tí】供【gòng】的另一个拼【pīn】写检查【chá】方案，它【tā】是通【tōng】过一【yī】个对【duì】话【huà】窗口来运行查检【jiǎn】，而不【bú】是内联标记拼写不正确的【de】单词。7、文【wén】件【jiàn】浏览器和上【shàng】传 与文件浏览器集成 CKEditor可以容【róng】易地与外部文件【jiàn】浏览器/上传器进行集成。 一旦正确地配置了，所【suǒ】有的文件浏览器功【gōng】能将【jiāng】会自动变成可用基本配置 <ul><li>filebrowserBrowseUrl设【shè】置含有外部浏览器的【de】位置，当按【àn】了Browse Server 按钮【niǔ】后会启动该浏览器。</li><li>filebrowserUploadUrl设置含【hán】有【yǒu】处理文【wén】件上传脚【jiǎo】本【běn】的位置【zhì】。如果设置了，在【zài】一些对话窗【chuāng】口中会出现Upload 标签--如果【guǒ】该功能在【zài】这些窗口【kǒu】中可用【yòng】的话【huà】，即Link, Image and Flash Properties。</li></ul>例1 下面【miàn】的例【lì】子显示了基本配置代码，可以用【yòng】于插入【rù】到配置了文件浏览的CKEditor实例【lì】中【zhōng】。 <pre class="prettyprint lang-xml">CKEDITOR.replace( 'editor1', { filebrowserBrowseUrl: '/browser/browse.php', filebrowserUploadUrl: '/uploader/upload.php' }); </pre> 例2 也可以通过在文件浏【liú】览器设置：filebrowserBrowseUrl和filebrowserUploadUrl中，使用对话窗【chuāng】口【kǒu】名来【lái】为所选【xuǎn】的对话窗口设置单独的URL。 对于为图【tú】像对【duì】话窗口设置特殊的上【shàng】传URL的例【lì】子，使用 filebrowserImageUploadUrl属【shǔ】性。 <pre class="prettyprint lang-xml">CKEDITOR.replace( 'editor1', { filebrowserBrowseUrl: '/browser/browse.php', filebrowserImageBrowseUrl: '/browser/browse.php?type=Images', filebrowserUploadUrl: '/uploader/upload.php', filebrowserImageUploadUrl: '/uploader/upload.php?type=Images' }); </pre> 在上面的例子中，filebrowserBrowseUrl和filebrowserUploadUrl 设置将【jiāng】在默【mò】认情况下使用【yòng】。而在Image Properties对话【huà】窗口中，CKEditor将使用 filebrowserImageBrowseUrl和filebrowserImageUploadUrl 的配【pèi】置设置。 文件浏览【lǎn】器窗口的大小 在CKEditor中，文件浏览器的默认【rèn】宽度设置为屏幕宽【kuān】度【dù】的80%，而默【mò】认高度设置为【wéi】屏幕高度的【de】70%。 如果因为任【rèn】意原因，默认值不适合你，你可以【yǐ】按【àn】需要进【jìn】行调整，使用【yòng】filebrowserWindowWidth改变窗口的宽度，使【shǐ】用filebrowserWindowHeight改变窗口的高度【dù】。要将文件浏【liú】览【lǎn】器窗口的【de】大小定义成像素，将【jiāng】其设置为一个数字（如"800"）。如【rú】果【guǒ】你喜欢将窗口的高度和宽度设置为屏【píng】幕【mù】的【de】百分数，不要忘记在数字后面加上【shàng】百分号【hào】（如【rú】"60%"）。例【lì】3 下面例子给出的基本配【pèi】置代码可以用【yòng】于【yú】插入到配置了文件浏览【lǎn】器【qì】路径和窗口大小的CKEditor中。 <pre class="prettyprint lang-xml">CKEDITOR.replace( 'editor1', { filebrowserBrowseUrl: '/browser/browse.php', filebrowserUploadUrl: '/uploader/upload.php', filebrowserWindowWidth: '640', filebrowserWindowHeight: '480' }); </pre> 要【yào】为指定的【de】对话窗口设置文件浏览器【qì】的窗【chuāng】口大小【xiǎo】，使用filebrowserWindowWidth和filebrowserWindowHeight 设置。例如，只想改变"Image"对话框中【zhōng】的文件浏【liú】览【lǎn】器的窗口大小【xiǎo】，改【gǎi】变【biàn】filebrowserImageWindowWidth和filebrowserImageWindowHeight的设置。例4 下面例子给出的基本配置【zhì】代码【mǎ】可以用于插入【rù】到配置【zhì】了文件浏览器路径【jìng】的【de】CKEditor中。它还【hái】改变了文件浏览器窗口的默认尺寸，但仅当从Image Properties对话窗口中打开时。 <pre class="prettyprint lang-xml">CKEDITOR.replace( 'editor1', { filebrowserBrowseUrl: '/browser/browse.php', filebrowserUploadUrl: '/uploader/upload.php', filebrowserImageWindowWidth: '640', filebrowserImageWindowHeight: '480' }); </pre> 使用CKFinder CKEditor可以很容易地与【yǔ】CKFinder集成，它是一个【gè】高级的Ajax文件浏览器。看【kàn】这里的现场演示。 可【kě】以用两种方式实现集成【chéng】：通【tōng】过设置CKEditor配【pèi】置选项（下面的例子）或通过使用【yòng】CKFinder API中可用CKFinder.SetupCKEditor()方法。例【lì】5 下【xià】面【miàn】例子给出【chū】的配置代码可【kě】以【yǐ】用【yòng】于插入到与CKFinder集成的CKEditor中【zhōng】。对【duì】于【yú】图像和【hé】Flash对象的浏览和上传路径与【yǔ】CKFinder的默认路径分开配【pèi】置。 <pre class="prettyprint lang-xml">CKEDITOR.replace( 'editor1', { filebrowserBrowseUrl: '/ckfinder/ckfinder.html', filebrowserImageBrowseUrl: '/ckfinder/ckfinder.html?Type=Images', filebrowserFlashBrowseUrl: '/ckfinder/ckfinder.html?Type=Flash', filebrowserUploadUrl:'/ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Files', filebrowserImageUploadUrl:'/ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Images', filebrowserFlashUploadUrl:'/ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Flash' }); </pre> 上【shàng】面的例子【zǐ】对PHP环境有效【xiào】。注意：/ckfinder/ 是CKFinder安【ān】装目标的基路径。 如果你想在【zài】ASP, ASP.NET, 或 ColdFusion中使用CKFinder，记住将上面的php修改为正确的扩展名：<ul><li>asp – CKFinder for ASP</li><li>aspx – CKFinder for ASP.NET</li><li>cfm – CKFinder for ColdFusion</li><li>php – CKFinder for PHP</li></ul>例6 下【xià】面例子【zǐ】说【shuō】明了CKFinder.SetupCKEditor()的使用，可以插入【rù】到与CKFinder集成的CKEditor实【shí】例中。 <pre class="prettyprint lang-xml">var editor = CKEDITOR.replace( 'editor1' ); CKFinder.SetupCKEditor( editor, '/ckfinder/' ); </pre> SetupCKEditor()方法的第二【èr】个参数【shù】是【shì】CKFinder的安装路径。 请查看与【yǔ】CKFinder一起发布的 _samples/js/ckeditor.html 例子，查【chá】看此集【jí】成【chéng】方【fāng】法的【de】完整工作【zuò】示例。 CKEditor4 PHP API 至于CKFinder 1.4.2和CKEditor 3.1，可以使用PHP API将CKFinder与CKEditor集成。更【gèng】多细节，参见 CKFinder for PHP文档【dàng】。其【qí】它【tā】资源 关【guān】于将CKEditor与文件浏【liú】览器【qì】集【jí】成的更【gèng】高级【jí】信息，参阅下面【miàn】的【de】文【wén】章：<ul><li>Creating a Custom File Browser（生【shēng】成【chéng】定制的【de】文件浏【liú】览【lǎn】器）</li><li>Adding the File Browser to Dialog Windows（将【jiāng】文件浏览器添加到对【duì】话【huà】窗口中）</li></ul>CKEditor4文件浏览器【qì】API CKEditor可以【yǐ】很容易地与你自己的【de】文件浏览器进行集成。要连【lián】接与CKEditor兼容的【de】文件浏览器（如 CKFinder），遵循 File Browser (Uploader)文档。CKEditor与【yǔ】文件浏【liú】览【lǎn】器之【zhī】间的【de】交互 CKEditor自动【dòng】向文件浏【liú】览器【qì】发送一些附加的【de】参数：<ul><li>CKEditor – CKEditor实例名,</li><li>langCode – CKEditor的【de】语【yǔ】言 (英语为en),</li><li>CKEditorFuncNum – 匿名【míng】函数引用编号，用于将文件【jiàn】的【de】URL传给CKEditor（一【yī】个随【suí】机数）。</li></ul>例如：CKEditor=editor1&CKEditorFuncNum=1&langCode=en例1 假设CKEditor由下面【miàn】的JavaScript调【diào】用生成： <pre class="prettyprint lang-xml">CKEDITOR.replace( 'editor2', { filebrowserBrowseUrl: '/browser/browse.php?type=Images', filebrowserUploadUrl: '/uploader/upload.php?type=Files' }); </pre> 为了浏览【lǎn】文件，CKEditor将调用： /browser/browse.php?type=Images&CKEditor=editor2&CKEditorFuncNum=2&langCode=de该调用【yòng】包括【kuò】下面【miàn】的元【yuán】素：<ul><li>/browser/browse.php?type=Images – filebrowserBrowseUrl参数的值</li><li>&CKEditor=editor2&CKEditorFuncNum=2&langCode=de – 由【yóu】CKEditor:添加的信息【xī】。 </li></ul>CKEditor=editor2 – CKEditor实例【lì】名 (editor2),CKEditorFuncNum=2 – 匿【nì】名函数【shù】的引用编号，将用于 callFunction中， o langCode=de – 语言编码(此例中【zhōng】: German). 此参【cān】数可【kě】以用【yòng】于发送本地化的【de】错误信息。传递所选文件的URL 要从外部文件浏【liú】览【lǎn】器中传回文【wén】件【jiàn】的URL，调用CKEDITOR.tools.callFunction，并将CKEditorFuncNum作为第【dì】一个参数【shù】进【jìn】行【háng】传递： <pre class="prettyprint lang-xml">window.opener.CKEDITOR.tools.callFunction( funcNum, fileUrl [, data] ); </pre> 如果data（第三个参数【shù】）是字符串【chuàn】，将【jiāng】由CKEditor进行显示。如【rú】果在文【wén】件上传时发生了问题，此参数通常作为错误信息【xī】显示。例2下面的例子说【shuō】明了如何使用【yòng】JavaScript代码从文【wén】件浏览器【qì】中传递URL：//从查【chá】询字符串中获得【dé】参【cān】数的 Helper函数 <pre class="prettyprint lang-xml">function getUrlParam( paramName ) { var reParam = new RegExp( '(?:[\?&]|&)' + paramName + '=([^&]+)', 'i' ) var match = window.location.search.match(reParam) return ( match && match.length > 1 ) ? match[ 1 ] : null } var funcNum = getUrlParam( 'CKEditorFuncNum' ); var fileUrl = '/path/to/file.txt'; window.opener.CKEDITOR.tools.callFunction( funcNum, fileUrl ); </pre> 例【lì】3 下面的代码说明了如何【hé】从PHP连接器【qì】中传回上【shàng】传文件的URL： <pre class="prettyprint lang-xml"><?php // Required: anonymous function reference number as explained above. $funcNum = $_GET['CKEditorFuncNum'] // Optional: instance name (might be used to load a specific configuration file or anything else). $CKEditor = $_GET['CKEditor'] // Optional: might be used to provide localized messages. $langCode = $_GET['langCode'] // Check the $_FILES array and save the file. Assign the correct path to a variable ($url). $url = '/path/to/uploaded/file.ext'; // Usually you will only assign something here if the file could not be uploaded. $message = echo "<script type='text/javascript'>window.parent.CKEDITOR.tools.callFunction($funcNum, '$url', '$message');</script>"; ?> </pre> 例4 如果data是一个函数，将在调用【yòng】此【cǐ】文件浏览器【qì】的按钮范围内【nèi】执行【háng】它。这意味着服务器【qì】连接【jiē】器可以直接访问CKEditor和按钮【niǔ】所属的对话窗口。 假【jiǎ】设除了传【chuán】递根据对【duì】话窗口定【dìng】义自动赋给相应域的fileUrl外【wài】，如果文件浏【liú】览器在Image Properties 对话窗口【kǒu】中【zhōng】打开，你还【hái】想设置【zhì】alt属性。为此，将匿名【míng】函【hán】数作为第三个参数传递： <pre class="prettyprint lang-xml">window.opener.CKEDITOR.tools.callFunction( funcNum, fileUrl, function() { // 获【huò】得对话窗【chuāng】口的引用 var element, dialog = this.getDialog(); //检查是否为【wéi】Image对话窗口 if ( dialog.getName() == 'image' ) { // 获【huò】得具有"alt"属性的文本【běn】域【yù】的引【yǐn】用【yòng】 element = dialog.getContentElement( 'info', 'txtAlt' ); // 赋新值 if ( element ) element.setValue( 'alt text' ); } ... // 返回false，停【tíng】止进一【yī】步【bù】执行- - 在这种情【qíng】况下，CKEditor将忽略【luè】第【dì】二个参数【shù】 (fileUrl) // 和赋给调用文件【jiàn】浏览器【qì】按钮的【de】onSelect函数 (如果定义了). [return false;] }); </pre> 将文件浏【liú】览器【qì】添【tiān】加【jiā】到对话框中 CKEditor可以很容易地与你自【zì】己的文件浏览器集成。要连接与CKEditor兼容的文件【jiàn】浏【liú】览器（如 CKFinder），遵循 File Browser (Uploader)文档。对话【huà】框 请【qǐng】参【cān】考 Dialog definition API，获得如何生【shēng】成【chéng】一个对话框的【de】一般帮助【zhù】。Filebrowser 插件 filebrowser插件内置于【yú】CKEditor中。它的唯一【yī】目【mù】的是在CKEditor中提供一个API，可以集成任意外部文件浏览器，并为各种CKEditor组件（通【tōng】常为对【duì】话框）增加文件浏览【lǎn】功能【néng】。添加【jiā】"Browse Server"按钮 要将文【wén】件浏览器插件添加到一个对话框中的元素，设置"filebrowser"属性。在image插件的例子【zǐ】中，有： <pre class="prettyprint lang-xml">{ type: 'button', hidden: true, id: 'browse', filebrowser: ' Link:txtUrl', label: editor.lang.common.browseServer, style: 'float:right', }, </pre> 此按钮【niǔ】默认是隐藏的 (hidden:true)。文件浏【liú】览器【qì】插件查找具有filebrowser属性的所有元素，并且【qiě】如果有可用的相应的配置设置(filebrowserBrowseUrl/filebrowserUploadUrl)，就不再隐藏它们。插件【jiàn】所执行的操作【zuò】取决于元【yuán】素的类型，对于fileButton，操作为【wéi】QuickUpload，对于【yú】其它元素，默认的操作是Browse。在上面的例子中，当点击按钮时，将【jiāng】会启【qǐ】动文件浏览【lǎn】器（在【zài】弹出【chū】窗口中）。'Link:txtUrl' 值告诉【sù】插件当调用CKEDITOR.tools.callFunction( funcNum )时，更新Link标【biāo】签中id为txtUrl的元素。 添加 "Quick Upload"支持【chí】 再次看看【kàn】如何在【zài】我们的对话【huà】框中处理文【wén】件上传【chuán】，我们【men】将【jiāng】使用来自CKEditor的工作【zuò】示例。在image插件中，有【yǒu】一个Upload标【biāo】签定义： <pre class="prettyprint lang-xml">{ id: 'Upload', hidden: true, filebrowser: 'uploadButton', label: editor.lang.image.upload, elements: [ { type: 'file', id: 'upload', label: editor.lang.image.btnUpload, style: 'height:40px', size: 38 }, { type: 'fileButton', id: 'uploadButton', filebrowser: 'info:txtUrl', label: editor.lang.image.btnUpload, 'for': [ 'Upload', 'upload' ] } ] }, </pre> 此例较前一【yī】例子稍复【fù】杂一些因为1）这【zhè】里【lǐ】有整个标签的【de】定义【yì】2）我们需要两个元素：file和【hé】fileButton来【lái】上传文件。 在上【shàng】面的例子中，标【biāo】签的id为'Upload'。它默【mò】认是隐藏的（hidden:true）。正如已【yǐ】提到的，文件浏览器【qì】插【chā】件查找具有filebrowser属性的所有元素，并且如【rú】果相应【yīng】的配置设置可用就不隐藏【cáng】它们。在此例中，如果'uploadButton'文件浏览器设【shè】置（因为filebrowser:'uploadButton'）将成为【wéi】可用(filebrowserUploadUrl)，则将自动不再隐【yǐn】藏【cáng】此标【biāo】签【qiān】。file元【yuán】素很【hěn】简单【dān】，不需要做【zuò】解释，它只是一个input元素，将保【bǎo】存将要【yào】上传的【de】文件【jiàn】名。 fileButton元素较有趣。'info:txtUrl'值使文件浏览器插件当调用 CKEDITOR.tools.callFunction( funcNum )时（参见 Custom File Browser），更新info标【biāo】签中【zhōng】id为txtUrl的【de】元素。'for': [ 'Upload', 'upload' ] 一行【háng】用【yòng】于【yú】将fileButton与file元素相关联。它是CKEditor上传文件的【de】一条【tiáo】指令【lìng】，在'Upload标签【qiān】'（第一【yī】个值）中【zhōng】使【shǐ】用id为'upload'的【de】'file'元素【sù】。高【gāo】级配置（浏览） 可以定【dìng】义【yì】自【zì】己的函【hán】数，当选【xuǎn】择/上传【chuán】文件时可【kě】以调用它【tā】。 <pre class="prettyprint lang-xml"> { type: 'button', hidden: true, id: 'id0', label: editor.lang.common.browseServer, filebrowser: { action: 'Browse', // target: 'tab1:id1', onSelect: function( fileUrl, data ) { alert( 'The selected file URL is "' + fileUrl + '"' ); for ( var _info in data ) alert( 'data[ "' + _info + '" ]' + ' = ' + data[ _info ] ); var dialog = this.getDialog(); dialog.getContentElement( 'tab1', 'id1' ).setValue( data[ 'fileUrl' ] ); //不要调用内置的【de】onSelect命令 return false; } } } </pre> 在【zài】此例中，我们设置【zhì】了'Browse'操作，当点击按钮时调【diào】用文件浏览【lǎn】器。'target'不是【shì】必需的【de】，因为我们【men】将在定制的onSelect函数【shù】中更【gèng】新目标元素。如在此文档中说【shuō】明的，当用户选【xuǎn】择了一【yī】个文件【jiàn】时，我们【men】已调用了 CKEDITOR.tools.callFunction( funcNum, fileUrl, data )；。fileUrl和【hé】data参数【shù】被传递【dì】给我们【men】定制的onSelect函数，我们可以【yǐ】使用它来更新目【mù】标元素。 高级【jí】配置（快速上传） 用我们配置按钮打开【kāi】文件浏览器相同的方法，我们配【pèi】置fileButton。 <pre class="prettyprint lang-xml"> { type: 'file', label: editor.lang.common.upload, labelLayout: 'vertical', id: 'id2' }, { type: 'fileButton', label: editor.lang.common.uploadSubmit, id: 'id3', filebrowser: { action: 'QuickUpload', params: { type: 'Files', currentFolder: '/folder/' }, target: 'tab1:id1', onSelect: function( fileUrl, errorMessage ) { alert( 'The url of uploaded file is: ' + fileUrl + '\nerrorMessage: ' + errorMessage ); // Do not call the built-in onSelect command // return false; } }, 'for': [ 'tab1', 'id2' ] } </pre> 在filebrowser.params属【shǔ】性中，我【wǒ】们可【kě】以添加【jiā】其它参数，在查询字符串中传递给外部文件浏览器【qì】。filebrowser.target是当通过【guò】服务器连接器【qì】（uploader）返回文件时被更新的【de】目标元素--如果我【wǒ】们定义了【le】自【zì】己【jǐ】的onSelect函数(filebrowser.onSelect)并【bìng】在此函数中更新了【le】目【mù】标元【yuán】素，就像前一例子【zǐ】中的作法，我们就不不需要此目标元素。四、CKEditor4定制【zhì】 1、CKEditor4插件 CKEditor是完全【quán】基【jī】于插件的。实【shí】际上，编辑【jí】器的核心是一个空盒子，它由插【chā】件提供的功能来进行填充【chōng】。甚至编【biān】辑器【qì】的界面，像工【gōng】具栏、按钮和编辑区也【yě】是插件【jiàn】。CKEditor的默认安装，可能你正在【zài】使用【yòng】，具有一些展【zhǎn】现于【yú】其中【zhōng】的插件。你可以将插件添【tiān】加【jiā】到你的编辑器中，给你的【de】用户带来更好更有用的【de】功能。在哪里寻找插【chā】件？ CKEditor Add-ons Repository是【shì】寻找和【hé】共享插件【jiàn】的在线服务。它【tā】可【kě】以【yǐ】很容易地理解【jiě】插【chā】件【jiàn】功能，与CKEditor群体【tǐ】进行交往。如果你是一个插件开【kāi】发者【zhě】，它也是一个展示你的【de】技能，获【huò】得大量用户基础的最佳地方。用CKBuilder生成定制的编辑器 CKBuilder 是CKEditor Add-ons Repository的姊妹服务，可以通过选择更适合【hé】你需要的插件来生【shēng】成定【dìng】制的编辑器【qì】。 通过【guò】插件件的导航，你可以使用 "Add to my editor button" 将你喜欢的插件【jiàn】发【fā】到你【nǐ】定制的编辑【jí】器【qì】中【zhōng】。一旦完成，你可以简单地下载插件，尽【jìn】享完美实现你需要的编辑体【tǐ】验。手动安装插件 如果你不喜欢使【shǐ】用CKBuilder，如果你有自己的或【huò】第三方插件【jiàn】，或如果你只想在经历CKBuilder过程前测试【shì】插件，你还可以将【jiāng】插件【jiàn】添加到你本地的安装中，通过【guò】下【xià】面的几个步骤：1. 解压zip文件：插件通常是【shì】zip文件。所以要想开始，要确保将zip文件解压【yā】到一个【gè】文件【jiàn】夹【jiá】中。2. 复制【zhì】文件【jiàn】到CKEditor中：最简单的安【ān】装【zhuāng】文件的方法【fǎ】是通过简单地将文件复【fù】制【zhì】到CKEditor安【ān】装目录的plugins文件夹中。必须放到与【yǔ】插件"技术【shù】"名【míng】字【zì】相匹配的【de】子文件夹中。例如， Magic Line plugin将被安装【zhuāng】到这【zhè】样的文件夹中【zhōng】：<ckeditor folder="">/plugins/magicline。3. 使插件生效：现在是时候【hòu】告诉CKEditor你【nǐ】为【wéi】它加了新的插件。为【wéi】此，你简单地使用extraPlugins配【pèi】置选项：config.extraPlugins = 'magicline'; 就是这些。现在你的插件就可以【yǐ】在【zài】CKEditor中生效了【le】。2、皮肤 CKEditor的用户界面外观完【wán】全可以【yǐ】通过皮【pí】肤来【lái】进行【háng】定制。像工具栏、对话框、按钮以及甚至其图标这些元素都【dōu】可以【yǐ】按你【nǐ】喜欢【huān】的样式进【jìn】行改变【biàn】。CKEditor的默【mò】认【rèn】安装具有【yǒu】Moono skin。到哪里寻找【zhǎo】皮肤？ CKEditor Add-ons Repository是寻找和共享皮肤的在线服务。如【rú】果【guǒ】你是一个【gè】皮肤开发者，它也是【shì】一个展示你的技能，获得大量【liàng】用户基【jī】础的最佳【jiā】地【dì】方。下载带有【yǒu】你喜欢皮肤的CKEditor CKBuilder 是【shì】CKEditor Add-ons Repository的姊妹【mèi】服务，可以生成【chéng】具有【yǒu】所【suǒ】需皮肤的定制编辑器。手动安【ān】装【zhuāng】皮【pí】肤 如果你【nǐ】不喜欢使【shǐ】用CKBuilder，如果【guǒ】你有自己的或第【dì】三方【fāng】皮肤，或如果你只【zhī】想在经【jīng】历【lì】CKBuilder过【guò】程前测试皮肤，你还可以将皮肤添【tiān】加到【dào】你本地的【de】安装中，通过下【xià】面的几个步骤：1. 解压zip文件【jiàn】：皮肤通常是zip文【wén】件。所以要想开【kāi】始【shǐ】，要确【què】保将zip文件解压到一个 文件夹中。2. 复制文件【jiàn】到CKEditor中：最简单的安装文件的方法是通【tōng】过简单地将文件【jiàn】复制到【dào】 CKEditor安【ān】装目录的skins文件夹【jiá】中【zhōng】。必须放到与皮肤"技术"名字相匹配【pèi】的子文件夹中。例如【rú】，Kama skin 将被安装【zhuāng】到这样【yàng】的文件夹中【zhōng】：<ckeditor folder="">/skins/kama。 3. Enabling the plugin: Now you must just setup CKEditor, by using the skin configuration option:4. 使插件生效：现在你只【zhī】需要配置CKEditor，通过使用skin配置选项： config.skin = 'kama';就是这些。现在【zài】新皮【pí】肤就可以在CKEditor中生效了。CKEditor4说【shuō】明文档非常庞大，这里仅为大家分【fèn】享了一些CKEditor4常用的配置与开【kāi】发中文说明【míng】文档，如需要更详【xiáng】细的【de】大家可以到CKEditor4官方网站【zhàn】上去查询