CKEditor5 支持typescript ckeditor插件开发

 

 

CKE .

源代码结构

在开始之前，感性的认知一下CKEditor源码的组织形式是很有用的. CKEditor固有的一些文件被组织到ckeditor\_source目录里. 有一个plugin.js的文件包含了该插件需要用到的代码.

你可以看到源代码被组织成不同的文件. 你会希望通过ckedtior_source.js来代替ckeditor.js的执行.

现在, 创建ckeditor\_source\plugins\footnote目录，并在目录里创建plugin.js文件.

 

插件配置

为了开始开发你的插件 'footnote';

此配置将会告诉编辑器在footnote目录下载入plugin.js. 基本的plugin.js结构如下:

CKEDITOR.plugins.add('footnote',
{
    init: function(editor)
    {
        //plugin code goes here
    }
});

 

按钮

CKEditor中主要的功能的实现基本都是通过命令的形式. 下列代码增加了一个’Footnote’的按钮和‘footnote’的命令.

CKEDITOR.plugins.add('footnote',
{
    init: function(editor)
    {
        'footnote';
        CKEDITOR.dialog.add(pluginName, 'dialogs/footnote.js');
        editor.addCommand(pluginName, CKEDITOR.dialogCommand(pluginName));
        editor.ui.addButton('Footnote',
            {
                label: 'Footnote or Citation',
                command: pluginName
            });
    }
});

 

editor.ui.addButton函数声明包含了两个参数, 在按钮定义中可能的属性还包含:

· 当鼠标位于按钮之上时所出现的文字提示

· 命令名称

· 指定的命令.

command: 

上述代码利用了 .