使用KindEditor添加自定义插件,下载KidEditor,http://www.kindsoft.net/down.php。然后直接把zip文件解压到Tomcat中的webapps目标下,在webapps\kindeditor-4.1.7\jsp文件夹下创建hello.jsp,代码如下:
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!doctype html> <html> <head> <meta charset="utf-8" /> <title>KindEditor JSP</title> <link rel="stylesheet" href="../themes/default/default.css" /> <link rel="stylesheet" href="../plugins/code/prettify.css" /> <script charset="utf-8" src="../kindeditor.js"></script> <script charset="utf-8" src="../lang/zh_CN.js"></script> <script charset="utf-8" src="../plugins/code/prettify.js"></script> <style> .ke-icon-hello { background-image: url(../themes/default/default.png); background-position: 0px -672px; width: 16px; height: 16px; } </style> <script> KindEditor.plugin('hello', function(K) { var editor = this, name = 'hello'; // 点击图标时执行 editor.clickToolbar(name, function() { editor.insertHtml('你好' ); }); }); KindEditor.lang({ hello : '你好' }); KindEditor.ready(function(K1) { K1.create('#editor_id', { items : ['hello'] }); }); </script> </head> <body> <form name="example" method="post" action="demo.jsp"> <textarea id="editor_id" name="editor_id" style="width:700px;height:300px;"></textarea> </form> </body> </html>
在23行中var editor = this,这里的this是KEditor对象,而KindEditor其实就是K,这里为什么用KindEditor.plugin而不用K.plugin是因为在源码中作者是在window对象中定义了一个KindEditor变量(window.KindEditor=K; kindeditor.js中1773行左右),这样我们在页面中就可以直接调用
参考:http://www.kindsoft.net/docs/plugin.html
相关推荐
总结来说,这个压缩包文件的内容涉及了KindEditor的扩展能力,包括自定义插件开发和利用HTML5技术进行文件上传。通过这样的定制,可以使得KindEditor更好地适应现代浏览器环境,提供更优秀的用户体验。如果你正在...
开发者可以根据项目需求,选择显示或隐藏默认工具栏中的各项功能,甚至添加自定义的按钮,以满足特定场景下的使用需求。 3. **多语言支持**: KindEditor支持多种语言,包括但不限于中文、英文、日文等,这使得它...
本教程主要关注的是如何基于jQuery对KindEditor的内置表情插件进行改造。 首先,让我们了解一下jQuery。jQuery是一个高效、简洁的JavaScript库,它简化了HTML文档遍历、事件处理、动画以及Ajax交互。在KindEditor中...
2. **插件的集成**:KindEditor支持自定义插件,表情插件就是一个例子。你需要将下载的"emoticons"文件夹放置到KindEditor的plugins目录下,然后在配置项中启用这个插件,使得编辑器能够识别并加载新的表情库。 3. ...
6. **集成与自定义**:为了在自己的论坛系统中使用KindEditor评论插件,开发者需要理解如何将编辑器与后台服务器进行交互,处理用户提交的数据,并根据需求调整编辑器的样式和功能,例如添加自定义表情,设置上传...
KindEditor提供了一套回调机制,可以在图片上传成功后执行自定义函数。在这个函数中,你可以解析服务器返回的数据,创建代表每个图片的HTML元素,并将其插入到编辑器的适当位置。服务器返回的数据通常包括图片的URL...
通过以上步骤,我们成功地为Kindeditor添加了一个自定义的音频按钮,使得用户可以直接在编辑器内插入和管理音频资源。这个过程涉及到JavaScript编程、CSS样式定义以及对Kindeditor内部结构的理解,对于提高编辑器的...
### 解决KindEditor在使用验证插件下点两次才提交的问题 #### 背景与问题阐述 在web开发中,KindEditor是一款广泛使用的富文本编辑器,它提供了丰富的功能和良好的用户体验。然而,在集成某些特定插件时,可能会...
以上就是为Kindeditor添加自定义`Audio`标签按钮的整个过程。通过这种方式,用户可以在编辑器中方便地插入和编辑音频,增强了编辑器的功能性和用户体验。如果你希望进一步定制,比如上传音频文件,你需要配置上传...
这篇博客“Kindeditor插件开发之-弹出下拉列表”主要探讨的是如何在KindEditor中自定义一个弹出的下拉列表功能,这对于扩展编辑器的功能和提升用户体验具有重要意义。 在开发这个插件时,首先需要理解KindEditor的...
5. **更新KindEditor样式**:由于Flash上传按钮不再工作,你需要自定义HTML5上传按钮的样式,使其符合你的网站设计。这可以通过CSS实现,或者在KindEditor的`plugins/image/image.js`等插件文件中修改相关代码。 6....
7. **插件扩展**:编辑器可能还支持自定义插件,允许开发者根据需要添加额外的功能,比如代码高亮、地图插入、视频嵌入等。 8. **响应式设计**:考虑到现代网页设计的趋势,KindEditor可能具备响应式设计,能够自动...
在 Ruby on Rails 中集成 KindEditor,首先需要在 Gemfile 文件中添加对 `rails_kindeditor` 的依赖,然后运行 `bundle install` 命令来安装。接着,在需要使用富文本编辑器的地方,比如文章或博客的模型中,设置...
2. **KindEditor API**:学习KindEditor的API,包括如何添加自定义插件,如何监听事件,以及如何定制编辑器的样式和行为。 3. **JMEditor集成**:了解JMEditor的使用方法,包括如何加载编辑器、设置LaTeX语法支持,...
开发者通过编写自定义插件实现了这一需求。网络视频插件通常会提供一个界面让用户输入视频的URL,然后在编辑器内生成相应的HTML代码,如`<iframe>`或`<video>`标签。这样,用户就可以在编辑的内容中无缝嵌入网络视频...
KINDEditor允许开发者根据需求添加自定义插件,通过扩展其功能。这通常涉及到编写JavaScript代码,实现特定的功能,并将其集成到编辑器中。 4、API文档: KINDEditor提供了详细的API文档,帮助开发者了解和利用各种...
集成KindEditor通常需要在HTML页面中添加编辑器的脚本引用,然后通过JavaScript代码创建编辑器实例。例如,在`<head>`标签中引入CSS和JS文件,然后在适当的位置使用JavaScript创建编辑器实例,如`KindEditor.create...
它支持各种常见的文字编辑功能,如字体、字号、颜色、对齐方式、图片上传、链接添加等,同时也允许用户自定义插件,以满足特定需求。 在.NET环境中使用KindEditor,你需要完成以下步骤: 1. **下载与引入**:首先...
1. **集成水印插件**:首先,需要找到或开发一个适用于KindEditor的水印插件。这可能涉及到JavaScript和CSS的编写,以确保水印的添加和显示符合预期。 2. **图片上传处理**:当用户通过KindEditor上传图片时,需要...