CK editor 制作 ”小“plugin

ckeditor 是什么？ http://ckeditor.com/

这工具里有大量他人写好的功能（plugin），如果要求不高，会找到的。但是我就是没有找到。。。

 

需求：

·自己制作一个小功能，可以在ckeditor里触发自己写的功能

 

开始前奏：

下载好ck后，在plugin的folder里给上timestamp folder ...

• plugins
  • 　　timestamp
    • 　　icons
      • 　　timestamp.png
    • 　　plugin.js

 

 

plugin.js 代码

CKEDITOR.plugins.add('timestamp', {

　//icon 的名字

    icons: 'timestamp', 

    init: function (editor) {

　　//给个命令

        editor.addCommand('insertTimestamp', {

            exec: function (editor) {

                editor.insertHtml('<img src="http://emetdu.com.my/images/e.jpg"/>');

            }

        });

　　//给ui一个button

        editor.ui.addButton('Timestamp', {

            label: "Timestamp",

            command: 'insertTimestamp',

            toolbar: 'clipboard,0'

        });

    }

});

　　

最后：

    <script src="../ckeditor.js"></script>  

    <script>
　　　　//注入

        CKEDITOR.config.extraPlugins = 'timestamp'; 

    </script>

　　

调用方式：

在js中声明图片的名字，按钮的属性，和命令的功能。以上的是“exec”。

最后在注入plugin的名字，通过config.extraPlugins

 

问题与感想：

由于这SDK读起来会要很多时间，每个功能都有自己的属性和方法，写代码时，会需要大量的记忆去使用ck写好的功能，在制作时，只是调用罢了。如果厉害点，就像我一样，找到触发点，剩下自己搞，这样就不用依赖他人的工具。