【easyui】kindeditor富文本(html编辑器)的使用

发布时间:2018年07月30日 阅读:297 次

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);


Tag:
相关文章

发表评论: