公告 / Notice

  • 界面已全面升级(11/06)

    CSS & JS分别用SASS和Webpack编译,对资源进行了模块化处理;缓存规则使页面运行更快!

  • 移动端完成(07/22)

    做得比较随意,UI非常简便

  • 正式上线啦!(07/19)

    星博客V2.0已经正式上线,欢迎大家登录浏览!

  • 星博客V2.0启动(07/15)

    由于不满意1.0版本的UI风格,星博客V2.0今日进入开发阶段

TinyMCE自定义插件编写

概述

最近要使用TinyMCE,为了在内容里插入代码块,我研究给它加一个代码编辑的功能。因为之前没仔细看内置插件列表,没发现其实TinyMCE已经有了这个功能,我花了几乎一日的时间搞这个代码编辑插件。后来发现这个情况后,会心一笑,只当学习了吧。

这篇文章仅仅记录一下Plugin怎么写,TinyMCE相关的内容这里不谈。

目录、文件

在plugins目录下创建一个子目录叫codeeditor,在codeeditor里新建两个文件:editor.html、plugin.min.js。

JS脚本

为TinyMCE创建一个插件需要使用tinymce.PluginManager的add方法:

tinymce.PluginManager.add('codeeditor', function(editor, url) {
  // todo:
});

回调函数接收的第一个参数editor是相应的tinymce.Editor实例,回调函数中我们要做的是给编辑器的Menu加一个Item,需要使用接口tinymce.Editor.addMenuItem:

editor.addMenuItem('codeeditor', {
    text: 'Code editor',
    context: 'tools',
    onclick: function() {
        // todo:
    }
});

配置中第3项onclick定义的是MenuItem点击后的响应函数,在函数里,我们需要打开一个窗口,需要使用tinymce.WindowManager.open接口,我们将整个打开新窗口的操作封装为一个函数:

function openCodeEditor() {
    editor.focus();
    editor.selection.collapse(true);

    var config = {
        title: 'Code editor',
        url: url + '/editor.html',
        width: '650px',
        height: '450px',
        resizable : true,
        maximizable : true,
        buttons: [
            { text: 'Ok', subtype: 'primary', onclick: function(){
                var ifr = document.querySelectorAll('.mce-container-body>iframe')[0];
                ifr.contentWindow.submit();
                win.close();
            }},
            { text: 'Cancel', onclick: 'close' }
        ]
    };

    var win = editor.windowManager.open(config);
}

HTML标签

editor.html是新窗口内容,和普通编写一个HTML页面没什么差别,这个页面将会以iframe的方式请求并渲染,你可以在页面的script脚本块中访问到tinymce.Editor实例:

tinymce = parent.tinymce;
editor = tinymce.activeEditor;

tinymce.Editor提供了大量的dom操作接口,其中tinymce.Editor集成的jquery库几乎可以满足任何需要,访问方式是:

tinymce.Editor.$('#elid')...

使用

tinymce.init(
  {
    // ...
    plugins: '... codeeditor ...'
    // ...
  }
)
发布于 2018年02月20日 15:02
阅读 166 可以 1