Kindeditor添加自定义工具栏插件(图标)

最新推荐文章于 2023-05-20 14:46:03 发布

aaysi2826

最新推荐文章于 2023-05-20 14:46:03 发布

阅读量359

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/baie/archive/2012/07/12/2588785.html

版权

添加自定义插件

1. 添加”hello”插件

添加plugins/hello/hello.js文件。

 
        KindEditor.plugin('hello', function(K) {
        var editor = this, name = 'hello';
        // 点击图标时执行
        editor.clickToolbar(name, function() {
                editor.insertHtml('你好');
        });
});
 
       

定义语言，在页面的<script>标签里添加以下脚本。

 
        KindEditor.lang({
        hello : '你好'
});

定义工具栏图标的CSS，在页面的<style>标签里添加以下CSS。

 
        .ke-icon-hello {
        background-image: url(../skins/default/default.gif);
        background-position: 0px -672px;
        width: 16px;
        height: 16px;
}
 
       

最后调用编辑器时items数组里添加hello。

 
        K.create('#id', {
        items : ['hello']
});

完整代码：

 
        <!doctype html>
<html>
        <head>
                <meta charset="utf-8" />
                <title>Hello</title>
                <style>
                        .ke-icon-hello {
                                background-image: url(../skins/default/default.gif);
                                background-position: 0px -672px;
                                width: 16px;
                                height: 16px;
                        }
                </style>
                <link rel="stylesheet" href="../themes/default/default.css" />
                <script charset="utf-8" src="../kindeditor.js"></script>
                <script charset="utf-8" src="../lang/zh_CN.js"></script>
                <script>
                        KindEditor.lang({
                                hello : '你好'
                        });
                        KindEditor.ready(function(K) {
                                K.create('#id', {
                                        items : ['hello']
                                });
                        });
                </script>
        </head>
        <body>
                <textarea id="editor_id" name="content" style="width:700px;height:300px;"></textarea>
        </body>
</html>
 
       