百度富文本框Ueditor

本文轉載自查看原文 2020-01-03 20:15 1948 前端/ js

官網

http://ueditor.baidu.com/website/index.html

下載

官網下載JSP版本，1.4.3.3的UTF-8版本

使用

解壓后重命名為ueditor，放入WEB-INF/plugin文件夾下面。把jsp中的兩個lib包放入項目lib中。

因為在WEB-INF不可以直接訪問，所以要在springmvc.xml中配置資源映射

<!-- 靜態資源映射,可以配置多個 -->    
<mvc:resources mapping="/plugin/**" location="/WEB-INF/plugin/" />
<mvc:default-servlet-handler />

頁面中使用

<%--引入百度ueditor--%>
<link href="./plugin/ueditor/themes/default/css/umeditor.css" type="text/css" rel="stylesheet">
<script type="text/javascript" src="./plugin/ueditor/umeditor.config.js" charset="utf-8" ></script>
<script type="text/javascript" src="./plugin/ueditor/umeditor.min.js" charset="utf-8" ></script>
<script type="text/javascript" src="./plugin/ueditor/lang/zh-cn/zh-cn.js"></script>

<%--百度ueditor文本標簽--%>
<script type="text/plain" id="uEditor_up" name="content" style="width:100%;height:400px;">
</script>

<%--js初始化--%>
<script type="text/javascript">//編輯操作
        function edit(rowdata) {
            var d = rowdata;
            $('#id_up').val(d.id);
            $('#title_up').val(d.title);
                        
            //初始化編輯器
            var um = UM.getEditor('uEditor_up');
            //獲取編輯器中的初始化內容
            $.ax('./notice/selectByPrimaryKey', {
                id: d.id
            }, 'POST', function (data) {
                    //設置編輯器中的內容
                um.setContent(unescape(data.content), false);
            }, function (e) {
                layer.alert("公告內容獲取失敗!", {
                    title: '提示',
                    icon: 2
                });
            }, false);
            
                        //修改彈框
            noticeLayer = layer.open({
                type: 1,
                title: ['編輯公告', 'font-size:18px;'],
                content: $('#editDIV')
            });
            layer.full(noticeLayer);
        }
        
        /*修改*/
        function update_notice() {

            var id = $('#id_up').val();
            var title = $('#title_up').val();
            //獲取編輯器中html內容
            var content = escape(UM.getEditor('uEditor_up').getContent());

            var data = {
                id: id,
                title: title,
                content: content
            };
            
            $.ajax({
                url: "./notice/updateByPrimaryKeySelective",
                data: data,
                type: "post",
                dataType: "json",
                success: function (data) {
                    if (data.code == "success") {
                        layer.alert(data.msg, {
                            title: '提示',
                            icon: 1
                        }, function (index) {
                            layer.close(noticeLayer);
                            layer.close(index);
                            layui.form.render();
                            table.reload('dataGridList', {
                                url: "./notice/getListByPage"
                                //,where: {} //設定異步數據接口的額外參數
                            });
                        });
                        $("#editForm")[0].reset();
                    } else {
                        layer.alert(data.msg, {
                            title: '提示',
                            icon: 2
                        });
                    }
                }
            });
        }
</script>

效果圖如下

圖片上傳回顯問題

上傳

在WEB-INF下面不能直接訪問，所以要在web.xml中配置imageUp.jsp的訪問路徑。

    <!-- 百度富文本 圖片上傳jsp -->
    <servlet>
        <servlet-name>imageUp.jsp</servlet-name>
        <jsp-file>/WEB-INF/plugin/ueditor/jsp/imageUp.jsp</jsp-file>
    </servlet>
    <servlet-mapping>
        <servlet-name>imageUp.jsp</servlet-name>
        <url-pattern>/plugin/ueditor/jsp/imageUp.jsp</url-pattern>
    </servlet-mapping>

回顯

因為上面配置了

<mvc:resources mapping="/plugin/**" location="/WEB-INF/plugin/" />

所以，上傳的時候圖片會上傳到跟目錄下的plugin，而不是/WEB-INF/plugin/，回顯的時候依然會遵從這個配置原則，去/WEB-INF/plugin/下面找圖片，而實際上圖片是在跟目錄的plugin下面。

解決這個問題只需要在設置一個資源映射就可以了

     <!-- 百度富文本插件-上傳圖片回顯,上傳圖片會生成在根目錄的plugin下面,這行映射一定要配置在/plugin/**上面 -->  
     <mvc:resources mapping="/plugin/ueditor/jsp/upload/**" location="/plugin/ueditor/jsp/upload/" />
     <!-- 百度富文本插件-資源映射 -->  
     <mvc:resources mapping="/plugin/**" location="/WEB-INF/plugin/" />
     <mvc:default-servlet-handler />