Baidu rich text box Ueditor

Official website

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

download

Official website to download JSP version, UTF-8 version 1.4.3.3 of

use

After decompression rename ueditor, into WEB-INF / plugin folder. The jsp two lib package into the project lib.

Because it is not directly accessible in the WEB-INF, so to allocation of resources in mapping springmvc.xml

<-! Static resource mapping, you can configure multiple ->     
< MVC: Resources Mapping = "/ plugin / **" LOCATION = "/ the WEB-INF / plugin /"  /> 
< MVC: default-the servlet-Handler / >

Use the page

<%--引入百度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 initialization - %> 
< Script type = "text / JavaScript" > // Edit Operation 
        function Edit (rowData) {
             var D = rowData;
            $('#id_up').val(d.id);
            $('#title_up').val(d.title);
                        
            // Initialization editor 
            var UM = UM.getEditor ( ' uEditor_up ' );
             // Get content editor initialization 
            $ .ax ( ' ./notice/selectByPrimaryKey ' , {
                id: d.id
            }, ' The POST ' , function (Data) {
                     // set the content editor 
                um.setContent (unescape (data.content), to false );
            }, function (e) {
                layer.alert ( " Announcement content acquisition fails! " , {
                    title: ' prompt ' ,
                    icon: 2
                });
            }, false);
            
                        // modify the elastic block 
            noticeLayer = layer.open ({
                type: 1,
                title: [ ' edit announcement ' , ' font-size: 18px; ' ],
                content: $('#editDIV')
            });
            layer.full(noticeLayer);
        }
        
        / * Modify * / 
        function update_notice () {

            var ID = $ ( ' #id_up ' ) .val ();
             var title = $ ( ' #title_up ' ) .val ();
             // Get html content editor 
            var Content = Escape (UM.getEditor ( ' uEditor_up ' ) .getContent ());

            was data = {
                id: id,
                title: title,
                content: content
            };
            
            $.ajax({
                url: "./notice/updateByPrimaryKeySelective",
                date: date,
                type: "post",
                dataType: "json",
                success: function (data) {
                    if (data.code == "success") {
                        layer.alert(data.msg, {
                            title: ' prompt ' ,
                            icon: 1
                        }, function (index) {
                            layer.close(noticeLayer);
                            layer.close(index);
                            layui.form.render();
                            table.reload('dataGridList', {
                                URL: " ./notice/getListByPage " 
                                // , WHERE: {} // set the extra parameters asynchronous data interface 
                            });
                        });
                        $("#editForm")[0].reset();
                    } else {
                        layer.alert(data.msg, {
                            title: ' prompt ' ,
                            icon: 2
                        });
                    }
                }
            });
        }
</script>

FIG effect as

Upload pictures echo problem

Upload

You can not directly access the WEB-INF below, the access path to be configured in 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 />