如何在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 感谢作者
相关推荐
kindeditor自定义添加网络视频插件-，修改批量图片上传方式flash为h5上传kindeditor自定义添加网络视频插件-，修改批量图片上传方式flash为h5上传
kindeditor自定义添加网络视频插件，修改批量图片上传方式flash为h5
KindEditor 是一套开源的在线HTML编辑器，主要用于让用户在网站上获得所见即所得编辑效果，开发人员可以用 KindEditor 把传统的多行文本输入框(textarea)替换为可视化的富文本输入框。 KindEditor 使用 JavaScript ...
基于插件的方式设计，所有功能都是插件，增加自定义和扩展功能非常简单。 4. 修改编辑器风格很容易，只需修改一个CSS文件。 5. 支持大部分主流浏览器，比如IE、Firefox、Safari、Chrome、Opera。 程序演示 ...
Kindeditor使用说明，如何添加自定义插件等等
KindEditor 是一套开源的在线HTML编辑器，...扩展：基于插件的设计，所有功能都是插件，可根据需求增减功能 风格：修改编辑器风格非常容易，只需修改一个 CSS 文件 兼容：支持大部分主流浏览器，比如 IE、Firefox、S
然后保存到数据库中，当要显示的时候就再数据库中读取下面然后在客户端用js合并，做着做着发现这种方法很烦，最后我们决定采用另一种方案，就是在在选中的文字两端加上自定义标记，批注的内容就是保存到自定义标签的...
2、独有的淘点金KindEditor编辑器插件，方便添加文章的时候，随时插入淘点金标签代码。通过淘点金把普通淘宝商品、店铺链接转换成佣金链接。 3、程序内置4个不同的模板供后台切换。 4、带文章系统同时生成静态页面...
2、独有的淘点金KindEditor编辑器插件，方便添加文章的时候，随时插入淘点金标签代码。通过淘点金把普通淘宝商品、店铺链接转换成佣金链接。3、程序内置4个不同的模板供后台切换。4、带文章系统同时生成静态页面，...
2、独有的淘点金KindEditor编辑器插件，方便添加文章的时候，随时插入淘点金标签代码。通过淘点金把普通淘宝商品、店铺链接转换成佣金链接。 3、程序内置4个不同的模板供后台切换。 4、带文章系统同时生成静态页面...
由于这个kindeditor文件默认所有的上传插件是通用的， 所以上传视频等其他文件时，可点击“所有文件” 后台插件改进 添加“生成今日内容”页面功能，可对今日采集的内容一键生成html页面 发布“微信百度采集插件...
1、修正kindeditor在不同浏览器中加载出错和出现乱码的BUG. 2、修正后台添加插件时监听器设置错误的BUG. 特点： Phpvod从创立之初即以提高产品效率为突破口，随着编译模板，数据缓存等技术的应用，和坚固的数据...
2、独有的淘点金KindEditor编辑器插件，方便添加文章的时候，随时插入淘点金标签代码。 3、通过淘点金把普通淘宝商品、店铺链接转换成佣金链接。 4、程序内置4个不同的模板供后台切换。 5、带文章系统同时文章生成...
废弃 原编辑器改为使用kindeditor(代码过滤稍比原编辑器弱) 废弃 自定义后台菜单功能 废弃 管理员后台登陆路径须手动调整 废弃 原商品规格处理模式,启用新模式 (若已有用户使用商品规格须手动处理) 废弃 原商品...
2、独有的淘点金KindEditor编辑器插件，方便添加文章的时候，随时插入淘点金标签代码。通过淘点金把普通淘宝商品、店铺链接转换成佣金链接。 3、程序内置4个不同的模板供后台切换。 4、带文章系统同时生成静态页面，...
1、功能频道：内容频道(强大自定义功能)、产品频道(强大自定义功能)、交互(留言)频道，可以自由添加频道2、插件模块：支付管理、购物管理、会员管理、广告管理、专题管理、评论管理、链接管理等3、系统功能：静态...
5、自定义字段：强大的自定义字段功能，可按栏目、频道添加各种输入字段，包括文本、数字、单选、多选、编辑器、单附件、多附件 6、SEO优化：独立的页面SEO信息设置，方便快捷 7、HTML静态：全站纯静态生成功能 8...
22、FLV视频模块，支持超大附件视频上传（2G），支持将视频自动转为FLV格式，支持在文章加插入添加好的FLV视频播放。 23、WORD文档上传自动转为HTML格式，并过滤到冗余代码并上传图片。 24、RSS支持，可以根据每个...
6.修正了后台添加广告或编辑广告内容时，如果是代码类型发生错误问题； 7.换了广告焦点图FLASH插件，解决了用户反映第一张图片无法显示问题； 注：ACCESS版和MSSQL版的功能和界面是一样的，他们除了DAL之外，还有很...
我们不会将只有“20%”用户使用的功能添加进来，只有这样才能保持博客系统本该有的纯净，足够轻量才能带来简约的使用体验。 Markdown / TinyMCE / KindEditor / Emoji / 标签 自定义导航（页面、链接） 草稿夹 评论...