1.使用ueditor富文本编辑器,首先现象项目中引入有关富文本编辑器的文件。(要引入的文件要到官网(http://ueditor.baidu.com/website/)中去下载,下载的地址为:http://ueditor.baidu.com/website/download.html)。我的项目是向jsp文件中引用富文本编辑器,所以我下载的是:
2.下载之后将其解压,把解压好的文件,复制到项目中,一般就放到项目所需要的插件文件夹中,统一管理。
3.再在要引用富文本编辑器的jsp页面上引用js文件:
<script type="text/javascript" charset="utf-8" src="项目路径/utf8-jsp/ueditor.config.js"></script>
<script type="text/javascript" charset="utf-8" src="项目路径/utf8-jsp/ueditor.all.min.js"> </script>
<script type="text/javascript" charset="utf-8" src="项目路径/utf8-jsp/lang/zh-cn/zh-cn.js"></script>
4.在jsp页面上显示富文本编辑框:
<!-- 加载编辑器的容器 -->
<div style="margin-bottom: 20px;margin-left:130px; width: 380px;">
<textarea id="container" style="width:630px;height:220px;"></textarea>
</div>
5.新建一个富文本编辑器:
<script type="text/javascript">
var ue = UE.getEditor('container');
</script>
6.这样就建立好一个富文本编辑框了。
7.自定义一个富文本编辑器:
var ue = UE.getEditor('container', {
toolbars: [
['fullscreen', 'source', 'undo', 'redo', 'bold','italic', 'underline', 'fontborder', 'strikethrough', 'superscript', 'subscript', 'removeformat','formatmatch', 'autotypeset', 'blockquote', 'pasteplain', '|', 'forecolor', 'backcolor', 'insertorderedlist'],
['insertunorderedlist', 'selectall', 'cleardoc', 'fontfamily', 'fontsize','paragraph','justifyleft','justifyright','justifycenter', 'justifyjustify'],
],
autoHeightEnabled: true,
autoFloatEnabled: true,
wordCount:false, //是否开启字数统计
maximumWords:1500, //允许的最大字符数
//是否启用元素路径,默认是显示
elementPathEnabled : false
});
8.引用富文本编辑器中的内容:(注意:在这之前要建好了一个编辑器ue)
//获取html内容
var html = ue.getContent();
//获取纯文本内容
var text = ue.getContentTxt();
9.设置文本框中内容:
ue.setContent(s);必须是文本编辑器存在的情况下。
10.设置文本框的样式的所有配置全在:
utf8-jsp\ueditor.config.js中
11.直接将文本编辑器的文件放到数据库中,在运行项目时会报错误:
上传功能不能正常使用。
解决办法是:将utf8-jsp\ueditor.config.js中的服务器统一请求端口注释掉。