百度富文本编辑器ueditor

1.官网下载对应的版本https://ueditor.baidu.com/website/download.html

直接下载速度特别慢，点击更多历史版本，打开是一个百度云连接，把文件保存到百度云下载会快点。

2.下载后解压，把整个文件放到项目下，index页面可以删掉

jsp中有依赖的jar包，把jar剪贴到lib中，add build path

3.jsp页面引用

引入两个js文件：

    <!-- 配置文件 -->
    <script type="text/javascript" src="ueditor.config.js"></script>
    <!-- 编辑器源码文件 -->
    <script type="text/javascript" src="ueditor.all.js"></script>

页面创建一个编辑器的容器：

    <!-- 加载编辑器的容器 -->
    <script id="container" name="content" type="text/plain">
    </script>

    或者用div都可以

    <!-- 加载编辑器的容器 -->
    <div  id="container" style="height: 85%" >
    </div>

实例化编辑器：

    <!-- 实例化编辑器 -->
    <script type="text/javascript">
        var ue = UE.getEditor('container');
    </script>

    或者实例化的同时对编辑器进行初始化：
    var ue = UE.getEditor('container',{
       	initialFrameHeight: 400,
        initialFrameWeight: 100
    });

或者直接修改ueditor.config.js文件中的初始化属性，来初始化，比如：

 //选择显示的工具，留下的是上图中我圈的这三个
 , toolbars: [[
     'source',  'fontfamily', 'fontsize', '|',
   ]]

 // 是否自动长高,默认true,改成false是固定长高，文本内容超过固定长度会出现滚动条
 ,autoHeightEnabled:false

有时候会设置内容的字符范围：

修改两个地方：ueditor.config.js的maximumWords和ueditor.all.js的ueditor.all.js

4.内容的赋值和取值

赋值，用一个隐藏的div去承接数据，js中去得到数据赋值。

之前是用一个input标签放数据，然后赋值，但是这种会出错，因为富文本里面的内容是自动拼加的html标签，这种带标签的值放在value中显示会把标签显示出来。

取值，ue.getContent()获取内容值：

//提交按钮调用方法
function uptext(){
            if (!ue.hasContents()){
            	alert('请先填写内容!');
            }else{
            	 var content = ue.getContent();
            	 $.ajax({
                     type: "post",
                     url: "/cms/servlet/UeditorServlet",
                     data: {news_id:$("#news_id").val(), info:content},
                     dataType: "json",
                     success: function(data){
						if(data.status==0){
							alert("保存成功！");
				            window.parent.hideBgLayer();
						}else{
							alert("保存失败！");
						}
                     }
                 });
            }
        }

当时是为了添加Excel数据表格才加的富文本，表格中的数据有几千条，内容过多导致后台接收参数为null，修改servel.xml文件，添加maxPostSize="0"，这是取消post提交数据大小限制，一般默认大小为2M。

5.上传图片

只需修改config.json中的两个值：imageUrlPrefix一般为IP地址加项目名，imagePathFormat是图片上传的位置

上传图片的时候报了一个错误，图片上传没有成功，这个错误的原因为commons.io的jar包缺失或者是jar包版本不对

java.lang.NoSuchMethodError: org.apache.commons.io.FileUtils.getTempDirectory()Ljava/io/File;

百度富文本编辑器ueditor

猜你喜欢