如何在kindeditor添加自定义插件
程序员文章站
2022-07-03 08:44:37
...
如何在KindEditor编辑器中添加自定义插件。
首先看一下效果图：
上图中螃蟹做了一个IT学习者的自定义插件，就是那个小螃蟹。
当鼠标滑过时，会出现IT学习者的文字提示，点击时，会在编辑器中插入方括号中间的内容。
下面就讲解下是如何实现的(官方已经给出示范)。
1.在plugins文件夹下添加/itxxz/itxxz.js文件
js代码如下：
- KindEditor.plugin('itxxz', function(K) {
- var editor = this, name = 'itxxz';
- // 点击图标时执行
- editor.clickToolbar(name, function() {
- editor.insertHtml('[IT学习者官网：<a href="http://www.itxxz.com">http://www.itxxz.com</a>] ');
- });
- });
2.定义文字提示，在页面的<script>标签里添加以下脚本。
- KindEditor.lang({
- itxxz : 'IT学习者'
- });
3.定义图标显示样式，在页面的<style>标签里添加以下CSS。
- <style>
- .ke-icon-itxxz {
- background-image: url(image/itxxz.jpg);
- width: 16px;
- height: 16px;
- }
- </style>
4.初始化编辑器。
- KindEditor.ready(function(K) {
- K.create('#itxxz_id', {
- items : [
- 'fontname', 'fontsize', 'forecolor', '|','itxxz'
- ]
- });
- })
完整代码如下：
- <!doctype html>
- <html>
- <head>
- <meta charset="utf-8" />
- <title>自定义插件-IT学习者</title>
- <link rel="stylesheet" href="../themes/default/default.css" />
- <style>
- .ke-icon-itxxz {
- background-image: url(image/itxxz.jpg);
- width: 16px;
- height: 16px;
- }
- </style>
- <script charset="utf-8" src="../kindeditor.js"></script>
- <script charset="utf-8" src="../lang/zh_CN.js"></script>
- <script>
- KindEditor.lang({
- itxxz : 'IT学习者'
- });
- KindEditor.ready(function(K) {
- K.create('#itxxz_id', {
- items : [
- 'fontname', 'fontsize', 'forecolor', '|','itxxz'
- ]
- });
- });
- </script>
- </head>
- <body>
- <h3>自定义插件-IT学习者[www.itxxz.com]</h3>
- <textarea id="itxxz_id" name="content" style="width:700px;height:300px;"></textarea>
- </body>
- </html>
转载于http://www.itxxz.com/kindeditor/2014/1119/KindEditor-custom-plugin.html 感谢作者