富文本编辑器

富文本编辑器介绍

今天在做淘淘商城项目后台管理系统之添加商品描述时，遇到了富文本编辑器，感觉功能还是挺强大的，很方便用户在网页上直接进行编辑，顺便了解了一下相关内容
种类：
KindEditor
http://kindeditor.net/
UEditor：百度编辑器
http://ueditor.baidu.com/website/
CKEditor
http://ckeditor.com/

富文本编辑器是纯js开发，跟后台语言没有关系。

在百度的ueditor中随便写几句：

可以实时转换为html代码：

在java中使用(配合easyUI)

第一步：在jsp中引入KindEditor的css和js代码。

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<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>
<div style="padding:10px 10px 10px 10px">

第二步：在表单中添加一个textarea控件。是一个富文本编辑器的载体。类似数据源。

<td>商品描述:</td>
	            <td>
	                <textarea style="width:800px;height:300px;visibility:hidden;" name="desc"></textarea>
	            </td>

第三步：初始化富文本编辑器。使用官方提供的方法初始化。

<script type="text/javascript">
	var itemAddEditor ;
	//页面初始化完毕后执行此方法
	$(function(){
		//创建富文本编辑器
		itemAddEditor = TAOTAO.createEditor("#itemAddForm [name=desc]");
		//初始化类目选择和图片上传器
		TAOTAO.init({fun:function(node){
			//根据商品的分类id取商品 的规格模板，生成规格信息。第四天内容。
			//TAOTAO.changeItemParam(node, "itemAddForm");
		}});
	});

第四步：取富文本编辑器的内容。

createEditor : function(select){
    	return KindEditor.create(select, TT.kingEditorParams);
    },
    

最后：
表单提交之前，把富文本编辑器的内容同步到textarea控件中。 （编辑器中的数据放到textarea中），最终提交数据是textarea提交到后台。

因此，富文本编辑器可以用在写博客网站或者后台管理系统，这样用户可以更加方便在网页上获得更好的编辑效果，增强用户体验。