富文本编译器初使用

以前没有接触过富文本编译器这次拿来使用以下：kingEditor

 

1.富文编译器是什么：

         对于支持富文本编辑的浏览器来说，其实就是设置 document 的 designMode 属性为 on 后，再通过执行 document.execCommand('commandName'[, UIFlag[, value]]) 即可。commandName 和 value 可以在MSDN 上和MDC 上找到，它们就是我们创建各种格式的命令，比方说，我们要加粗字体，执行 document.execCommand('bold', false) 即可。很简单是吧？但是值得注意的是，通常是选中了文本后才执行命令，被选中的文本才被格式化。对于未选中的文本进行这个命令，各浏览器有不同的处理方式，比方 IE 可能是对位于光标中的标签内容进行格式化，而其它浏览器不做任何处理，这超出本文的内容，不细述。同时需要注意的是，UIFlag 这个参数设置为 true 表示 display any user interface triggered by the command (if any), 在我们今天的教程中都是 false, 而 value 也只在某些 commandName 中才有，具体参考以上刚给出的两个链接。为了不影响当前 document, 通常的做法是在页面中嵌入一个 iframe 元素，然后对这个 iframe 内的 document（通过 iframe.contentWindow.document 获得）进行操作。

2.为什么使用富文本编译器呢：

     方便用户编辑文章或信息

3.如何使用：

项目中如何使用呢？

1.先进行对其头文件的引入，引入其中的css,js文件

<link href="../js/kindeditor-4.1.10/themes/default/default.css" type="text/css" rel="stylesheet">
<script type="text/javascript" charset="utf-8" src="../js/kindeditor-4.1.10/kindeditor-all-min.js"></script>
<script type="text/javascript" charset="utf-8" src="../js/kindeditor-4.1.10/lang/zh_CN.js"></script>

2.初始化：

<script type="text/javascript">
var my_kindEditor={
		kingEditorParams : {
			//指定上传文件参数名称
			filePostName  : "uploadFile",
			//指定上传文件请求的url。
			uploadJson : '/pic/upload',
			//上传类型，分别为image、flash、media、file
			dir : "image"
		},
		
		createEditor : function(select){
	    	return KindEditor.create(select, my_kindEditor.kingEditorParams);
	    },
		
}
var userAddEditor ;
//页面初始化完毕后执行此方法
$(function(){
	//创建富文本编辑器
	userAddEditor = my_kindEditor.createEditor("#userform [name=address]");
});
//同步数据
userAddEditor.sync();
//表单提交前操作

书写html代码：<tr><td>详细地址:</td><td colspan="3" ><textarea style="width:80%" name="address" required="true"></textarea></td></tr>
效果：

这样一来就达到使用的效果了

4.总结：

使用富文本编辑器就是为了方便，显得不那么low网站，方便用户的体验，相对来说上手即可用的形式，其实在前端框架中要使用这些插件基本上都是js来实现的，无论是日历插件，还是文本编辑器，使用方便，配置简便。所以大家尝试在自己的项目中也去使用吧。