欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页

如何在kindeditor添加自定义插件

程序员文章站 2022-07-03 08:43:49
...

如何在KindEditor编辑器中添加自定义插件。 

首先看一下效果图：

如何在kindeditor添加自定义插件 博客分类： Java webkindeditor



上图中螃蟹做了一个IT学习者的自定义插件，就是那个小螃蟹。

当鼠标滑过时，会出现IT学习者的文字提示，点击时，会在编辑器中插入方括号中间的内容。 

下面就讲解下是如何实现的(官方已经给出示范)。


1.在plugins文件夹下添加/itxxz/itxxz.js文件

js代码如下：


  1. KindEditor.plugin('itxxz', function(K) {  
  2.    var editor = this, name = 'itxxz';  
  3.    // 点击图标时执行  
  4.    editor.clickToolbar(name, function() {  
  5. editor.insertHtml('[IT学习者官网：<a href="http://www.itxxz.com">http://www.itxxz.com</a>] ');  
  6.    });  
  7. });  



2.定义文字提示，在页面的<script>标签里添加以下脚本。


  1. KindEditor.lang({  
  2.                     itxxz : 'IT学习者'  
  3. });



3.定义图标显示样式，在页面的<style>标签里添加以下CSS。


  1.     <style>  
  2.         .ke-icon-itxxz {  
  3.                 background-image: url(image/itxxz.jpg);  
  4.                 width: 16px;  
  5.                 height: 16px;  
  6.         }  
  7.     </style>



4.初始化编辑器。


  1.   KindEditor.ready(function(K) {  
  2.       K.create('#itxxz_id', {  
  3.             items : [  
  4.                    'fontname', 'fontsize', 'forecolor', '|','itxxz'  
  5.             ]  
  6.        });  
  7. })



完整代码如下：

  1. <!doctype html>  
  2. <html>  
  3.     <head>  
  4.         <meta charset="utf-8" />  
  5.         <title>自定义插件-IT学习者</title>  
  6.   
  7.   
  8.     <link rel="stylesheet" href="../themes/default/default.css" />  
  9.         <style>  
  10.         .ke-icon-itxxz {  
  11.                 background-image: url(image/itxxz.jpg);  
  12.                 width: 16px;  
  13.                 height: 16px;  
  14.         }  
  15.     </style>  
  16.     <script charset="utf-8" src="../kindeditor.js"></script>  
  17.     <script charset="utf-8" src="../lang/zh_CN.js"></script>  
  18.     <script>  
  19.             KindEditor.lang({  
  20.                 itxxz : 'IT学习者'  
  21.             });  
  22.             KindEditor.ready(function(K) {  
  23.                K.create('#itxxz_id', {  
  24.                             items : [  
  25.                                 'fontname', 'fontsize', 'forecolor', '|','itxxz'  
  26.                     ]  
  27.                 });  
  28.             });  
  29.     </script>  
  30.     </head>  
  31.     <body>  
  32.     <h3>自定义插件-IT学习者[www.itxxz.com]</h3>  
  33.     <textarea id="itxxz_id" name="content" style="width:700px;height:300px;"></textarea>  
  34.     </body>  
  35. </html>  

 

转载于http://www.itxxz.com/kindeditor/2014/1119/KindEditor-custom-plugin.html  感谢作者

上一篇： 【转】项目jar包 与tomcat 自带jar 冲突

下一篇： Twitter的分布式自增ID算法snowflake(分享)

推荐阅读