1.下载kindeditor
官网: http://kindeditor/down.php
本人使用4.1.10版本百度云下载:点击打开链接
2.放入项目中
3.我是用的jsp前台网页,(前台为easyui)
在jsp中引入kindeditor的js和css样式
<link rel="stylesheet" href="/js/kindeditor-4.1.10/themes/default/default.css" />
<script src="/js/kindeditor-4.1.10/kindeditor.js"></script>
<script src="/js/kindeditor-4.1.10/kindeditor-all.js"></script>
<script src="/js/kindeditor-4.1.10/kindeditor-all-min.js"></script>
<script charset="utf-8" src="/js/kindeditor-4.1.10/kindeditor-min.js"></script>
<script charset="utf-8" src="/js/kindeditor-4.1.10/lang/zh_CN.js"></script>
4.kindeditor是根据textarea标签,然后从js中根据id初始化此标签使控件载入
a : 标签
如果是使用easyui则
<textarea rows="3" style="width:400px;" id="v_content" name="v_content" class="easyui-validatebox" data-options="required:true,validType:'length[1,1000000]'" invalidMessage="最大长度不能超过1000000""></textarea>
没使用就
<textarea rows="3" style="width:400px;" id="v_content" name="v_content"></textarea>
b: js初始化
注意name必须和textarea标签的name id一致,才能使控件初始化
<script>
var editor;
$(function() {
editor = KindEditor.create('textarea[name="v_content"]',{resizeType : 1,width:"100%",height:"200px",afterChange:function(){
this.sync();
},afterBlur:function(){
this.sync();
}});
});
</script>
c:如果只是读取解析显示html文档可以这样
var editor;
$(function() {
editor = KindEditor.create('textarea[name="v_notice_content"]',{resizeType : 1,width:"100%",height:"200px"});
editor.readonly(true);
});
5.js中读取和设置kindeditor富文本的值
a:读取
var mycontent=document.getElementById("v_content").value;
b:设置
注意dat.v_notice_content为后台从数据库返回来的
KindEditor.html('#v_notice_content',dat.v_notice_content);
更多推荐
【easyui】kindeditor富文本(html编辑器)的使用
发布评论