ckeditor的使用 — 入门版

我心飞翔 分类:javascript

最近切到一个使用ckeditor的项目,顺手就看看怎么用。
我觉得比较赞的地方是,可以自己写插件、模板、皮肤~

插入编辑器

默认每次换行就会自动包裹一个p标签

  • 经典模式:看到的输入框上面就有工具栏
  • 行内模式:看到的普通文本,但是focus的时候,显示工具栏

经典模式

  • HTML准备一个元素,添加id,这个元素可以是div也可以是textarea
  • JS里,增加一行:CKEDITOR.replace(id)
<textarea id="editor1"></textarea>
<script>
 
 CKEDITOR.replace("editor1")
      
 </script>
 

行内模式

  • HTML准备一个元素,添加id,添加属性contenteditable
  • JS里,增加一行:CKEDITOR.inline(id)
<div id="editor2" contenteditable="true">
    <h1>可以内置内容</h1>
</div>
<script>
 // CKEDITOR.disableAutoInline = true;
 CKEDITOR.inline("editor2")
    
 </script>
 

配置编辑器

编辑器两种配置方式:

  • 修改编辑器的config.js文件,这个是全局的。不推荐修改。
  • 页面里生成编辑器实例的时候,这个是局部的

比如将工具栏变成茶绿色

// config.js文件
CKEDITOR.editorConfig = function( config ) {
	config.uiColor = '#AADC6E';
};

// 页面里面的增加配置,replace和inline都是一样的
CKEDITOR.replace("editor1",{
    uiColor = '#AADC6E'
})
CKEDITOR.inline("editor2",{
    uiColor = '#AADC6E'
})
 

内容过滤

编辑区输入<获取内容的时候会变成&lt;

专业名词:Content Filtering (ACF)

对应的配置:config.allowedContent = true;

获取和设置编辑区的内容

  • 获取编辑器的实例:CKEDITOR.instances.editorId
  • 获取:intance.getData()
  • 设置:intance.setData('xxx')
  • 如果编辑器的元素是textarea的话,可以通过intance.updateElement();editorId.value获取内容。
const instance = CKEDITOR.instances.editor1
instance.getData()
instance.setData('xxx')
editorDom.updateElement()
editorDom.value
 

监听内容区变化

instance监听change事件

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

安装的一些概念

仔细看下ckeditor的根目录

  • plugins:插件
  • skin:皮肤
  • widget:小ui插件

生成带有特定插件等的官方网址

如果后期需要加特定的插件:

  • 插件的zip下载下来
  • 解压放在plugins文件夹里
  • 看下有没有别的依赖
  • config.extraPlugins = '插件名';
  • 移除某个插件:config.removePlugins = 'elementspath';

后期加特定的皮肤:

  • 皮肤的zip下载下来
  • 解压放在skins文件夹里
  • config.skin = 'kama';

怎么在工具栏加个自定义图标

官方文档

20行开发一个插件

比如:在工具栏增加一个小图标,点击之后在光标后插入当前时间的文本

  • ckeditor/plugins下增加一个文件夹叫timestamp,
  • 增加新文件plugin.js,内容如下
  • 增加新文件夹icons,增加图片timestamp.png
  • 在使用的时候,增加两行代码即可使用插件
// plugin.js
CKEDITOR.plugins.add("timestamp", {
  icons: "timestamp",
  init: function(editor) {
    console.log(editor)
    editor.addCommand("insertTimestamp", {
      exec: function(editor) {
        var now = new Date();
        editor.insertHtml(
          "The current date and time is: <em>" + now.toString() + "</em>"
        );
      },
    });
    editor.ui.addButton("Timestamp", {
      label: "Insert Timestamp",
      command: "insertTimestamp",
      toolbar: "insert",
    });
  },
});

 

使用的地方增加两行代码

CKEDITOR.plugins.addExternal('timestamp',./plugins/timestamp/', 'plugin.js');

    CKEDITOR.replace('editor1', {
      extraPlugins: 'timestamp'
    });
 

开发特定模板,就是点击图标,插入一段模板

修改样式

想要修改h1等之类的样式,官网

看编辑器的源码

github地址

生成新的ckeditor.js

  • dev/builder/build/build-config.js
  • 运行./build.sh

其他的设置

编辑器的其他配置

  • 编辑器的颜色: config.uiColor = '#66AB16';
  • 默认语言: config.defaultLanguage = 'de';
  • 占位文本:config.editorplaceholder ='xxx'
  • 设置只读模式:config.readOnly = true;

可能用的例子

常用功能例子的地址

  • 创建和销毁编辑器,官网翻到末尾
  • 边输入边显示内容,官网翻到末尾
  • 设置html源码,官网翻到末尾
  • 按快捷键之后,设置html源码,,官网翻到末尾
  • 其他api的使用,官网翻到末尾

api文档

官网API文档

  • 命令类的方法、属性、事件
  • 配置的属性
  • 弹出框:定义组成部分和验证
  • CKEDITOR.editor实例的方法、属性、事件

回复

我来回复
  • 暂无回复内容