探索CKEditor4中文文档

一、基础知识

CKEditor是一个开源的富文本编辑器，CKEditor 4是CKEditor中最新的版本，支持多种浏览器和平台。CKEditor4的API在中文文档中有详细的介绍，包括配置选项、插件使用和事件等等。关于CKEditor4中的基础API有一些值得注意的地方。

二、配置选项

CKEditor4中通过config对象来配置编辑器的属性，其中包括常用的语言设定、工具栏选项、默认样式和上传文件配置等等。以下是对一些常用的配置选项的介绍。

1.语言配置

CKEDITOR.config.language = 'zh-cn';

语言属性可以设置默认的语言和编辑器自带的语言文件，支持多种语言，包括中文。

2.工具栏选项

CKEDITOR.config.toolbar = [['Bold','Italic','-','NumberedList','BulletedList','-','Link','Unlink','-','About']];

工具栏配置可以决定编辑器中的功能按钮，支持自定义，可以根据需要添加、删除和排序按钮。

3.高度与宽度

CKEDITOR.config.height = 350;
CKEDITOR.config.width = '100%';

高度和宽度可以设置编辑器的大小，支持像素和百分比，也可根据需要动态调整大小。

三、插件使用

CKEditor4中自带了多个插件，比如字数统计、图片上传、表格编辑等等，也支持自定义插件。以下是对一些常用的插件的介绍。

1.字数统计插件

CKEDITOR.config.extraPlugins = 'wordcount';
CKEDITOR.config.wordcount = {
    showParagraphs: false,
    showWordCount:true,
    showCharCount:false,
    countSpacesAsChars:true,
    countHTML:true
};

字数统计插件可以实现对编辑器中的字符和词数的统计，同时也能够控制是否统计空格和HTML标签。

2.图片上传插件

CKEDITOR.config.extraPlugins = 'uploadimage';
CKEDITOR.config.uploadUrl = 'upload.php?type=image';
CKEDITOR.config.imageUploadUrl = 'upload.php?type=image';

图片上传插件可以实现在编辑器中上传并插入图片，支持多种文件类型，也可以设置上传文件的URL地址。

四、事件机制

CKEditor4中的事件机制是非常强大和灵活的，可以对编辑器中的操作进行监控，以便对编辑器的行为进行适当的控制。以下是一些常用的事件。

1.onChange事件

CKEDITOR.instances.editor1.on('change', function() {
    console.log( 'The editor content changed!' );
});

onChange事件可以捕捉文本改变事件，可以在文本改变时进行相应的处理。

2.onKeyPress事件

CKEDITOR.instances.editor1.on('key', function(evt) {
    console.log( 'A key was pressed: ' + evt.data.keyCode );
});

onKeyPress事件可以监控键盘操作，可以对键盘输入做出处理。

3.onAfterPaste事件

CKEDITOR.on( 'instanceReady', function( ev ) {
    ev.editor.on( 'afterPaste', function( evt ) {
        alert( 'Text pasted into the editor:' + evt.data.dataValue );
    });
});

onAfterPaste事件可以监控粘贴事件，可以对粘贴的文本进行相关处理，比如过滤或转换等等。

五、总结

CKEditor 4是一个非常强大的富文本编辑器，对于编辑器的配置、插件使用和事件机制有了详细的了解，可以更好地应用在实践中。希望文章可以帮助大家更好地使用CKEditor 4。