ckeditor_学习(1) 基本使用

ckeditor 是一款强大的web编辑器。工作需要用到记录学习和使用过程，版本是ckeditor4。

1.下载ckeditor的安装包，建议下载标准版的。

j将ckeditor.js 引入页面，调用CKEDITOR。replace() 方法初始编辑器

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8">

        <title>例子</title>

        <!--正确的js路径-->

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

    </meta></head>

    <body>

        <form>

            <textarea name="editor1" id="editor1" rows="10" cols="80">

                文章正文

            </textarea>

            <script>

                // 替换<textarea id="editor1"> with a CKEditor

                // 直接替换

                CKEDITOR.replace( 'editor1' );

            </script>

        </form>

    </body>

</html>

建议直接引用现在的包中的js，因为需要config.js 的依赖。

可以看到编辑器已经初始化好了。

2.编辑器的基本展现形式分为两种，一种是经典的样式，一中的行内的样式

2.1 经典的样式

调用CKEDITOR.replace() 方法初始编辑器

2.2 行内的样式

是通过html5 中的contenteditable 属性来实现的

html代码：

<div id="editor1" contenteditable="true">

    <h1>行内编辑器!</h1>

    <p>这是一个普通段落</p>

</div>

js调用代码：

<script>

    // Turn off automatic editor creation first.

    CKEDITOR.disableAutoInline = true;

    CKEDITOR.inline( 'editor1' );

</script>

这是点击段落文，就能够进入文本编辑状态了。

3.ckeditor的三种配置方式

1.在页面中配置

这是最好的一种配置方式，不用依赖于外部文件维护方便。

CKEDITOR.editorConfig = function( config ) {

    config.language = 'fr';

    config.uiColor = '#AADC6E';

};

2.使用config.js

在ckeditor.js 的文件目录放置config.js 文件，为CKEDITOR编写 editorConfig 方法

CKEDITOR.editorConfig = function( config ) {

    config.language = 'fr';

    config.uiColor = '#AADC6E';

};

3.自定义config.js

可以自定义一个config.js,同样为CKEDITOR编写 editorConfig 方法，格式和config.js 一样不过这样可以在项目制定的位置放置cofig文件。制定的文件目录是相对于ckeditor.js 的相对文件目录或者引用绝对路径

CKEDITOR.replace( 'editor1', {

    customConfig: '/custom/ckeditor_config.js'

});

优先级顺序 2 < 3 < 1

4. 内容过滤（ACF，Advanced Content Filter)

可以对编辑器内容进行过滤，编辑器默认是打开过滤器的（出于安全考虑，方式xss攻击）<这是在客户端做过滤，如果服务器端能够做过滤就可以考虑不用再客户端做>

1. 关闭编辑器的内容过滤

config.allowedContent = true;

2.使用编辑器的内容过滤，但对例外的情况进行编辑，分为允许标签和内容，不允许的标签和内容

// Allow <dl>, <dt>, <dd>. config.extraAllowedContent = 'dl dt dd'; 用来定义例外被允许的标签 dl dt dd

// Disallow <a> element. The Link button will be removed from the toolbar. config.disallowedContent = 'a'; 用来定义不被允许的标签，这是会对工具栏中的按钮进行相应的关闭，如果有连接按钮将会被禁止。

5. 数据获取

ckeditor 对于获取数据很方便

var data = CKEDITOR.instances.editor1.getData(); // editor1 是编辑设置的id

编辑器内容的改变都会出发编辑器change事件，通过对编辑器事件进行监听可以完成自动保存的相关的功能。

editor.on( 'change', function( evt ) { // getData() returns CKEditor's HTML content. console.log( 'Total bytes: ' + evt.editor.getData().length ); });

6.插件和皮肤安装

可以通过ckeditor 网站的online-builder 很方便的安装插件和更换皮肤

1.插件安装

2.皮肤安装