`

如何在kindeditor添加自定义插件

 
阅读更多

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

首先看一下效果图：



上图中螃蟹做了一个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  感谢作者

分享到：
| kindeditor无法正常加载
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    kindeditor--自定义添加网络视频插件，修改批量图片上传方式flash为h5

    总结来说，这个压缩包文件的内容涉及了KindEditor的扩展能力，包括自定义插件开发和利用HTML5技术进行文件上传。通过这样的定制，可以使得KindEditor更好地适应现代浏览器环境，提供更优秀的用户体验。如果你正在...

    kindeditor文本编辑插件

    开发者可以根据项目需求，选择显示或隐藏默认工具栏中的各项功能，甚至添加自定义的按钮，以满足特定场景下的使用需求。 3. **多语言支持**： KindEditor支持多种语言，包括但不限于中文、英文、日文等，这使得它...

    基于jQuery改造KindEditor的表情插件

    KindEditor的表情插件（emoticons）允许用户在编辑器中插入预设的表情符号，增强文章的情感表达。这个插件通常包含一系列的图片资源和对应的代码，用于在编辑器内显示和插入这些表情。 在“基于jquery修改...

    kindeditor表情插件

    2. **插件的集成**：KindEditor支持自定义插件，表情插件就是一个例子。你需要将下载的"emoticons"文件夹放置到KindEditor的plugins目录下，然后在配置项中启用这个插件，使得编辑器能够识别并加载新的表情库。 3. ...

    kindeditor富文本，多图上传，去除flash插件，解决无法展示选择图片按钮问题，以及添加上传后结果展示

    KindEditor提供了一套回调机制，可以在图片上传成功后执行自定义函数。在这个函数中，你可以解析服务器返回的数据，创建代表每个图片的HTML元素，并将其插入到编辑器的适当位置。服务器返回的数据通常包括图片的URL...

    解决kindeditor在使用验证插件下点两次才提交的问题

    而大多数表单验证插件在表单提交前会执行一系列的验证规则，包括但不限于非空检查、格式匹配等。问题的关键在于KindEditor的同步机制与表单验证插件的触发时机存在冲突。 具体而言，KindEditor的`syncType`默认设置...

    kindeditor论坛评论回复插件

    6. **集成与自定义**：为了在自己的论坛系统中使用KindEditor评论插件，开发者需要理解如何将编辑器与后台服务器进行交互，处理用户提交的数据，并根据需求调整编辑器的样式和功能，例如添加自定义表情，设置上传...

    kindeditor插件开发之-弹出下拉列表

    这篇博客“Kindeditor插件开发之-弹出下拉列表”主要探讨的是如何在KindEditor中自定义一个弹出的下拉列表功能，这对于扩展编辑器的功能和提升用户体验具有重要意义。 在开发这个插件时，首先需要理解KindEditor的...

    用法JavaScript为Kindeditor自定义按钮增加Audio标签_.docx

    通过以上步骤，我们成功地为Kindeditor添加了一个自定义的音频按钮，使得用户可以直接在编辑器内插入和管理音频资源。这个过程涉及到JavaScript编程、CSS样式定义以及对Kindeditor内部结构的理解，对于提高编辑器的...

    kindeditor_kindeditor_截图_

    7. **截图功能**：KindEditor 的截图功能可能是通过一个内置插件实现的，允许用户在编辑器内直接截取屏幕并插入到文本中。这种功能通常涉及到浏览器的权限设置，以及可能的本地存储或即时上传到服务器的过程。 8. *...

    ruby rails_kindeditor（编译器）插件

    在 Ruby on Rails 中集成 KindEditor，首先需要在 Gemfile 文件中添加对 `rails_kindeditor` 的依赖，然后运行 `bundle install` 命令来安装。接着，在需要使用富文本编辑器的地方，比如文章或博客的模型中，设置...

    使用JavaScript为Kindeditor自定义按钮增加Audio标签

    以上就是为Kindeditor添加自定义`Audio`标签按钮的整个过程。通过这种方式，用户可以在编辑器中方便地插入和编辑音频，增强了编辑器的功能性和用户体验。如果你希望进一步定制，比如上传音频文件，你需要配置上传...

    kindeditor-4.1.11多图上传按钮无法出现且无法点击flash无法上传

    这可以通过CSS实现，或者在KindEditor的`plugins/image/image.js`等插件文件中修改相关代码。 6. **测试和调试**：最后，确保在现代浏览器中测试上传功能，确认按钮能正常显示并触发文件选择对话框，文件能够成功...

    kindeditor文本编辑器插件

    7. **插件扩展**：编辑器可能还支持自定义插件，允许开发者根据需要添加额外的功能，比如代码高亮、地图插入、视频嵌入等。 8. **响应式设计**：考虑到现代网页设计的趋势，KindEditor可能具备响应式设计，能够自动...

    kindeditor.zip

    在这个"kindeditor.zip"压缩包中，我们可以看到作者针对KindEditor进行了特定的定制，主要涉及两个方面：网络视频插件的添加以及批量图片上传方式的修改。 首先，让我们来探讨网络视频插件的添加。在网页编辑器中，...

    kindEditor4.0（包括上传功能）

    8. **插件兼容性**：KindEditor 4.0的上传功能与众多第三方插件兼容，开发者可以根据需求添加额外的功能，如水印、防盗链等。 在压缩包文件"kingeditor"中，可能包含了以下内容：KindEditor的核心库文件、上传插件...

    kindeditor-富文本框编辑器插件

    集成KindEditor通常需要在HTML页面中添加编辑器的脚本引用，然后通过JavaScript代码创建编辑器实例。例如，在`&lt;head&gt;`标签中引入CSS和JS文件，然后在适当的位置使用JavaScript创建编辑器实例，如`KindEditor.create...

    kindeditor整合公式编辑器

    2. **KindEditor API**：学习KindEditor的API，包括如何添加自定义插件，如何监听事件，以及如何定制编辑器的样式和行为。 3. **JMEditor集成**：了解JMEditor的使用方法，包括如何加载编辑器、设置LaTeX语法支持，...

    kindeditor集成jmeditor公式HTML富文本编辑器

    7. **优化与扩展**：你可以根据需求对编辑器进行更深入的定制，例如增加图片上传功能、添加自定义按钮、调整样式等。KindEditor提供了丰富的API和事件接口，方便开发者进行扩展和二次开发。 通过以上步骤，你就成功...

Magicbox
Global site tag (gtag.js) - Google Analytics