1、前言
在用户提交信息时，需要输入框提供换行设置字体样式大小等需求，普通input和textarea不能满足需求
2、使用百度开源富文本编辑器
需要注意的是js引用顺序，zh-cn.js汉化文件乱码时，需另存为UTF-8格式，ueditor.configKikyo.js文件是自定义编辑器的功能，详情参见文件内容
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<div>
<!-- 加载编辑器的容器 -->
<script id="container" name="content" type="text/plain">
</script>
</div>
<script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="/lib/ueditor1_4_3_1/ueditor.configKikyo.js"></script>
<script src="/lib/ueditor1_4_3_1/ueditor.all.min.js"></script>
<!--zh-cn文件若乱码，另存为utf-8-->
<script src="/lib/ueditor1_4_3_1/lang/zh-cn/zh-cn.js"></script>
<script>
var ue = UE.getEditor('container', {
autoHeightEnabled: true,
autoFloatEnabled: true,
initialFrameWidth: 800,
initialFrameHeight: 200
, wordCount: true //是否开启字数统计
, maximumWords: 300 //允许的最大字符数
, elementPathEnabled: false
, toolbars: [['source', 'undo', 'redo', 'bold', 'justifyleft', 'justifycenter']]
});
//对编辑器的操作最好在编辑器ready之后再做
ue.ready(function () {
//设置编辑器的内容
ue.setContent('hello');
//获取html内容，返回: <p>hello</p>
var html = ue.getContent();
//获取纯文本内容，返回: hello
var txt = ue.getContentTxt();
console.log("html==", html);
console.log("txt==", txt);
});
</script>
</body>
</html>
自定义编辑器js如下
, toolbars: [[
'undo', 'redo', '|'
, 'bold', 'pasteplain', '|',
, 'justifyleft', 'justifycenter', '|'
, 'fontsize', '|'
//'insertimage', 'insertvideo', '|'
//, 'wordimage', '|'
//, 'inserttable', 'insertrow', 'deleterow', 'insertcol', 'deletecol', 'mergecells', 'splittocells'
]]