写文章

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实例的方法、属性、事件

回复

我来回复

  • 暂无回复内容