UEditor是由百度开发的富文本web编辑器,它是开源的,允许*使用和修改。界面相似于word,可方便大家的使用
使用步骤:
1.下载与查看文档:
ueditor完全开源,可在其官方网站下载:http://ueditor.baidu.com/website/index.html
在官网上可以查看ueditor的文档了解它如何使用,阅读API文档来查看命令。
2. 源代码的导入:
根据自己所需的版本下载后解压,将得到的文件导入到项目根目录(webapp)下
3. 页面配置:
3.1在head中添加文件的引用
<script type="text/javascript" src="<c:url value="/resources/ueditor/ueditor.config.js" />" ></script>
<script type="text/javascript" src="<c:url value="/resources/ueditor/ueditor.all.min.js" />" ></script>
注意:这两个的顺序不能交换,否则编辑器不能初始化
3.2 在script中编写js
初始化编辑器:
var ue = UE.getEditor('editor');
设置编辑器的初始化内容:
ue.ready(function() {
//设置编辑器的内容"
ue.setContent(date); date为动态传入的数据
//获取编辑器带格式的内容
var plain = ue.getPlainTxt();
//获取编辑器html文本
var html = ue.getContent();
//获取编辑器纯文本内容
var text = ue.getContentText();
});
3.3配置body
<div>
<script id="editor" type="text/plain" name="content" style="width:845px;height:400px;">
这里也可以直接写固定的文本内容
</script>
</div>
4 编辑器的工具
这个工具列表有好多我们都用不到,需要去除一些不必要的工具。
4.1 方法一
在ueditor.config.js文件中对 toolbars[] 中不需要的工具删掉或注释掉就可以,建议注释掉,万一以后要用到呢。
4.2 方法二
在编辑器实例化的时候传入toolbars参数
toolbars: [ ['fullscreen', 'source', 'undo', 'redo', 'bold'] [' ',' '] 一个单引号里面一个工具,几个中括号表示工具栏分为几行,括号内的表示这行的工具 ]