CKEditor使用小结

1、前言

后台使用bootstarp+layui+jquery。--（跟使用什么技术无关）

2、准备工作

        ① 官网连接

        https://ckeditor.com/ckeditor-4/download/

        ② 选择版本

                区别在于功能的多少。也可自定义下载模块

  3、基本使用

        ①  将安装包解压，放入项目中。

        ②  在页面中引入js并创建html标签

 <!--在需要使用编辑器的地方插入textarea标签 -->
    <textarea name="description" id="description" placeholder="请输入内容……"/>
    </textarea>

        ③ 富文本初始化

// 初始化富文本框及页面显示控制
    function initSummernote() {
        CKEDITOR.replace("description");
    }

        注意：replace中的内容为定义标签的id

        ④  完成

                打开浏览器即可看到页面

   4、获取编辑器内容

1、获取CKEditor被选中的内容
var mySelection = CKEDITOR.instances.description.getSelection();
        if (CKEDITOR.env.ie) {
            mySelection.unlock(true);
            data = mySelection.getNative().createRange().text;
        } else {
            data = mySelection.getNative();
        }
2、获取CKEditor纯文本
 var CText=CKEDITOR.instances.description.document.getBody().getText(); //取得纯文本       

3、获取CKEditor带HTML标签的文本
var CHtml= CKEDITOR.instances.description.getData();

        注意：”description“为定义html标签中的id值

 5、设置编辑器的内容

CKEDITOR.instances.description.setData("要显示的文字内容");

          注意：”description“为定义html标签中的id值

6、设置只读

CKEDITOR.config.readOnly = true;

7、字体颜色配置

        这篇文章介绍的很详细，亲测有效：https://www.jb51.net/article/163993.htm

8、其他

        咱们没有遇到其他功能，等用到时更新