CKEditor是一款广泛使用的开源HTML WYSIWYG(所见即所得)文本编辑器，它允许开发者在网页中嵌入一个功能强大的富文本编辑区域。CKEditor不仅提供了丰富的编辑功能，还允许开发者通过插件来扩展编辑器的功能。本文主要介绍了最新版CKEditor的配置方法，并且提供了一个文章分页插件的编写示例。
### CKEditor配置方法
配置CKEditor通常包含以下几个步骤：
1. **下载CKEditor**: 访问CKEditor官网下载最新版本，并解压到本地服务器。
2. **页面加载**: 在HTML页面中引入CKEditor的核心js文件，通常放在`<head>`标签内。
```html
<script type="text/javascript" src="ckeditor/ckeditor.js"></script>
```
3. **创建编辑器区域**: 在HTML文档中放置一个`textarea`标签，用于CKEditor实例化。同时，可以给`textarea`添加一些初始化的HTML内容。
```html
<textarea id="editor1" name="editor1" rows="10" cols="80">初始化html内容</textarea>
```
4. **实例化CKEditor**: 在`textarea`标签之后编写JavaScript代码来初始化CKEditor。
```html
<script type="text/javascript">CKEDITOR.replace('editor1');</script>
```
5. **配置个性化工具栏**: 用户可以自定义工具栏的配置，将不常用或者不适合中文用户使用的工具移除，添加一些自定义的编辑功能。CKEditor的配置是在配置文件`config.js`中进行的，可以通过编辑这个文件来定义工具栏的内容。
```javascript
CKEDITOR.editorConfig = function( config ) {
// 配置示例
config.uiColor = '#ddd'; // 自定义编辑器的界面颜色
config.toolbar = 'Cms'; // 使用预定义的工具栏配置
config.toolbar_Cms = [
['Source', '-', 'Bold', 'Italic'], // 工具栏按钮组合
['NumberedList', 'BulletedList'],
// 其他配置...
];
// 配置上传路径
config.filebrowserUploadUrl = '/ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Files';
// 字体大小设置
config.fontSize_sizes = '10/10px;12/12px;14/14px;16/16px;18/18px;20/20px;22/22px;24/24px;28/28px;32/32px;48/48px;';
// 自定义插件
config.extraPlugins = 'apage';
};
```
### CKEditor插件编写
CKEditor插件开发主要包括创建插件目录、编写插件文件、注册插件以及配置插件的功能。以下是对文章分页插件的简要编写流程和实例代码：
1. **创建插件目录**: 在CKEditor安装目录下的`plugins`文件夹内新建插件目录，例如`apage`。
2. **编写插件代码**: 在`apage`目录下创建`plugin.js`文件，编写插件的初始化代码和定义插件的具体功能。
```javascript
CKEDITOR.plugins.add('apage', {
init: function(editor) {
// 插件初始化时的代码
// 可以添加新的命令、按钮、菜单项等
}
});
```
3. **注册插件**: 在CKEditor的配置文件`config.js`中，将新创建的插件名`apage`添加到`extraPlugins`配置项中。
4. **配置插件功能**: 根据需要，可以给插件添加新的编辑器命令，例如添加分页功能，这可能需要在插件代码中增加新的编辑器命令实现分页的逻辑。
### CKEditor样式自定义
CKEditor允许开发者调整编辑器内部的显示样式，以适应不同的页面设计需求。如需更改编辑器内文字的默认显示大小，可以通过以下方式进行修改：
1. **可视化编辑里默认字体大小**: 修改`contents.css`文件，将`body`中的`font-size`值从`12px`改为`14px`，以改善中文的显示效果。
2. **源代码视图字体大小**: 修改`skins\kama\editor.css`文件，在文件末尾添加`.cke_skin_kama textarea.cke_source{font-size:14px;}`，使源代码编辑区域的文字显示大小达到期望的效果。
通过上述介绍的知识点，我们可以实现对最新版CKEditor的配置，以及创建简单的CKEditor插件来扩展编辑器的功能。这些步骤和示例对于开发基于CKEditor的网页应用具有重要的参考价值。
