zoukankan      html  css  js  c++  java
  • Kindeditor添加自定义工具栏插件(图标)

    添加自定义插件

    1. 添加”hello”插件

    1. 添加plugins/hello/hello.js文件。
    KindEditor.plugin('hello', function(K) {
            var editor = this, name = 'hello';
            // 点击图标时执行
            editor.clickToolbar(name, function() {
                    editor.insertHtml('你好');
            });
    });
    
    1. 定义语言,在页面的<script>标签里添加以下脚本。
    KindEditor.lang({
            hello : '你好'
    });
    
    1. 定义工具栏图标的CSS,在页面的<style>标签里添加以下CSS。
    .ke-icon-hello {
            background-image: url(../skins/default/default.gif);
            background-position: 0px -672px;
            width: 16px;
            height: 16px;
    }
    
    1. 最后调用编辑器时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="700px;height:300px;"></textarea>
            </body>
    </html>
    
  • 相关阅读:
    PyCharm使用(完全图解(最新经典))
    pg存储过程学习
    sql_to_sqlalchemy
    python中嵌入lua解析器
    Python和lua互相调用
    Lupa
    [cb] Unity Editor 添加右键菜单
    [C#] 委托之Action和Func区别
    [反编译U3D]Decompile Unity Resources
    [cb] Assetbundle打包(一)
  • 原文地址:https://www.cnblogs.com/baie/p/2588785.html
Copyright © 2011-2022 走看看