KindEditor是一套很方便的html编译器插件。在这里做一个简单的使用介绍。
首先在官网上下载最新的KindEditor文件（里面有jsp，asp等不同版本文件夹，可以删掉你不需要的版本），
把整个文件夹放到你的web服务器里（放哪都行，但放的位置需要有访问权限，最好建立一个权限为777的public文件夹，把KindEditor文件夹放进去）。
之后在需要用到KindEditor的页面引入以下两个js文件（具体js目录根据你的KindEditor文件夹位置而定）
&script charset="utf-8" src="kindeditor文件夹所在目录/kindeditor文件夹名/kindeditor.js"&&/script&
&script charset="utf-8" src="kindeditor文件夹所在目录/kindeditor文件夹名/lang/zh-CN.js"&&/script&
之后再在这个页面写一个js脚本，注意：这个脚本的作用就是控制该页面的KindEditor编辑器，js脚本如下：
&script type="text/javascript"&
//KindEditor脚本
KindEditor.ready(function(K) {
editor = K.create('#你的textarea的id名', {
这个脚本里的&editor = K.create('#你的textarea的id名', {}); 这个，对应的就是一个KindEditor编辑器。
假设我们现在有一个textarea标签，id设为"kindEditor_demo"
&textarea id="kindEditor_demo"&&/textarea&
我们再引入刚刚提到的两个js文件后，再写如下js代码到该页面，
&script type="text/javascript"&
//KindEditor脚本
KindEditor.ready(function(K) {
editor = K.create('#kindEditor_demo', {
那么这个textarea标签就会变成KindEditor编译器
用法一，自己选择需要的功能：
按照上面的部署方式，最终呈现的是一个完整版KindEditor编译器，可其中很多功能不一定需要，那么可以在刚刚提到的js脚本中对KindEditor编译器进行控制。
假设我们只需要：插入表情和文字颜色的功能。则可以在js脚本中设定&items&&选项。如：
KindEditor.ready(function(K) {
editor = K.create('#你的textareaid名', {
items : ['forecolor','emoticons']
其中的'forecolor','emoticons'代表&文字颜色功能&和&插入表情功能&。（具体更多的功能名可以查看官方网址的开发文档）。
（同理，对于该编译器的很多设置都是通过这种方式来完成的）
用法二，KindEditor的一个奇怪特性：
在页面第一次加载时，不能隐藏KindEditor所在的标签，否则即使后面利用js将css的display设置为block，KindEditor也不会显示。
解决的办法是先让网页将所有的KindEditor编辑器加载完后，再用下面这种方法将需要隐藏的部分隐藏
window.onload = hidden_
function hidden_box(){
$('#inner_wrap').css('display','none');
这段js脚本是等页面加载完后才会执行，所以此时KindEditor已经加载完了，可以被隐藏了
用法三，获取KindEditor编译器的内容。
我们看到的KindEditor编译器实际上不是我们之前自己写在页面中的textarea标签，当我们在KindEditor编译器里输入完内容并提交表单后，KindEditor会自动将我们输入的内容&同步&到之前我们自己建的textarea标签中，之后再发送表单。
所以我们直接获取textarea标签的内容实际是没用的，正确的做法是让KindEditor将数据&同步&到textarea标签中后，再获取textarea标签中的内容。
我们可以利用我们之前建的KindEditor对象对KindEditor编译器进行操作，令其进行同步数据。
KindEditor.ready(function(K) {
editor = K.create('#text_new_continue', {
上述代码之前提到过，其中的editor就是&id为text_new_continue的textarea标签&所对应的KindEditor对象。
当我们想令KindEditor编译器将数据同步到&id为text_new_continue的textarea标签&时，就可以操作editor对象。
editor.sync();//将KindEditor的数据同步到textarea标签。
var value_content = $("#text_new_continue").val();
其中value_content就是KindEditor编译器里的内容
阅读(...) 评论()html编辑器kindeditor我的使用方法_百度文库
两大类热门资源免费畅读
续费一年阅读会员，立省24元！
html编辑器kindeditor我的使用方法
阅读已结束，下载文档到电脑
想免费下载本文？
定制HR最喜欢的简历
你可能喜欢&&&您需要以后才能回答，未注册用户请先。如何在一个页面添加多个不同的kindeditor编辑器
来源：博客园
kindeditor官方下载地址：　
（入门必看）kindeditor官方文档：　　 （入门必看）Kindeditor编辑器初始化参数文档：　　或许我们一个页面有需要用到多个文本编辑器的情况，那我们该怎么办呢？
本人查阅了很多资料最后终于找到一种方法，可以通过自定义编辑器的工具栏items属性，来实现：直接上JS了：&span class="lspan"&&font color="red"&*&/font&商品信息：&/span&&%--&span class="lspan"&&input id="txtProductInfo" placeholder="请输入商品信息" value="&%=product.ProductInfo %&"
name="txtProductInfo" type="text" maxlength="<span style="background-color: #f5f5f5; color: #" style="width: 444px" /&&/span&--%&&script type="text/javascript"&
KindEditor.ready(function (K) {
editor = K.create('#txtProductInfo', {
cssPath: '../kindeditorx/plugins/code/prettify.css',
uploadJson: '../kindeditorx/asp.net/upload_json.ashx',
fileManagerJson: '../kindeditorx/asp.net/file_manager_json.ashx',
minWidth: <span style="background-color: #f5f5f5; color: #4,
minHeight: <span style="background-color: #f5f5f5; color: #0,
maxWidth: <span style="background-color: #f5f5f5; color: #4,
resizeType: <span style="background-color: #f5f5f5; color: #,
filterMode: false,
allowFileManager: true,
items: ['source', '|', 'undo', 'redo', '|', 'justifyleft', 'justifycenter', 'justifyright',
'justifyfull', 'insertorderedlist', 'insertunorderedlist', 'indent', 'outdent', 'subscript', 'superscript',
'clearhtml', 'quickformat', 'selectall', '|', 'fullscreen', '|', 'forecolor','hilitecolor','bold','italic'
,'underline','strikethrough','lineheight','removeformat'
});});&/script&&textarea id="txtProductInfo" rows="5" cols="" style="width: 400"&&%=product.ProductInfo %&&/textarea&重点：下面这些自定义显示工具是关键，其他的编辑器只需要修改items属性就可以了。items: ['source', '|', 'undo', 'redo', '|', 'justifyleft', 'justifycenter', 'justifyright',
'justifyfull', 'insertorderedlist', 'insertunorderedlist', 'indent', 'outdent', 'subscript', 'superscript',
'clearhtml', 'quickformat', 'selectall', '|', 'fullscreen', '|', 'forecolor','hilitecolor','bold','italic'
,'underline','strikethrough','lineheight','removeformat'
});如下效果图： 关于items参数的解释如下：sourceHTML代码preview预览undo后退redo前进cut剪切copy复制paste粘贴plainpaste粘贴为无格式文本wordpaste从Word粘贴selectall全选justifyleft左对齐justifycenter居中justifyright右对齐justifyfull两端对齐insertorderedlist编号insertunorderedlist项目符号indent增加缩进outdent减少缩进subscript下标superscript上标formatblock段落fontname字体fontsize文字大小forecolor文字颜色hilitecolor文字背景bold粗体italic斜体underline下划线strikethrough删除线removeformat删除格式image图片flashFlashmedia视音频table表格hr插入横线emoticons插入表情link超级链接unlink取消超级链接fullscreen全屏显示about关于print打印code插入程序代码mapGoogle地图baidumap百度地图lineheight行距clearhtml清理HTML代码pagebreak插入分页符quickformat一键排版insertfile插入文件template插入模板anchor插入锚点
免责声明：本站部分内容、图片、文字、视频等来自于互联网，仅供大家学习与交流。相关内容如涉嫌侵犯您的知识产权或其他合法权益，请向本站发送有效通知，我们会及时处理。反馈邮箱&&&&。
学生服务号
在线咨询，奖学金返现，名师点评，等你来互动