【easyui】kindeditor富文本（html编辑器）的使用

最新推荐文章于 2024-10-31 15:27:01 发布

蒙眼看你心

最新推荐文章于 2024-10-31 15:27:01 发布

阅读量1.1w

点赞数 17

分类专栏： easyui 文章标签： KindEditor html编辑器富文本 easyui

本文链接：https://blog.csdn.net/weixin_38791218/article/details/72152279

版权

easyui 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

1.下载kindeditor

官网： http://kindeditor.net/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);