BaiduのリッチテキストボックスUeditor

公式サイト

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

ダウンロード

、UTF-8バージョン1.4.3.3のをJSPバージョンをダウンロードする公式サイト

使用

解凍リネームueditorした後、フォルダをプラグインのWEB-INF /に。プロジェクトのlibに、JSP 2のlibパッケージ。

それはそうマッピングspringmvc.xml内のリソースの割り当てを、WEB-INFで直接アクセスすることはできませんので

<！ - 静的リソースマッピング、あなたが複数設定することができます- >     
< MVC：リソースマッピング= "/プラグイン/ **" LOCATION = "/ WEB-INF /プラグイン/"  /> 
< MVC：デフォルト・サーブレット・ハンドラ/ >

ページを使用します

<％-引入百度ueditor - ％> 
< リンクのhref = "./プラグイン/ ueditor /テーマ/デフォルト/ CSS / umeditor.css" タイプ= "テキスト/ cssの" REL = "スタイルシート" > 
< スクリプトタイプ=」テキスト/ javascriptの" SRC =" ./プラグイン/ ueditor / umeditor.config.js " のcharset = "UTF-8"  > </ スクリプト> 
< スクリプトタイプ= "テキスト/ javascriptの" SRC =" ./プラグイン/ ueditor / umeditor .min.js」のcharset = "UTF-8"  > </ スクリプト>
< スクリプトタイプ= "テキスト/ javascriptの"SRC = "./プラグイン/ ueditor / LANG / ZH-CN / ZH-cn.js" > </ スクリプト> 

<％- 百度ueditor文本标签- ％> 
< スクリプトタイプ= "text / plainの" ID =」 uEditor_up」名前= "コンテンツ" スタイル= "幅：100％;高さ：400ピクセル;" > 
</ スクリプト> 

<％- JS初始化- ％> 
< スクリプトタイプ= "テキスト/ javascriptの" >
        ' #Id_up ' ）.val（d.id）; 
            $（' #title_up ' ）.val（d.title）; 
                        
            // 初期化エディタ
            VAR UM = UM.getEditor（' uEditor_up ' ）;
             // 取得エディタコンテンツの初期化
            の$ .ax（' ./notice/selectByPrimaryKey ' { 
                ：d.id ID 
            }、' POST ' 、関数（データ）{
                     // コンテンツ設定エディタ
                um.setContent（アンエスケープ（data.contentを）、偽）;
            }、関数（E）{ 
                layer.alert（" 広告コンテンツ取得失敗！" 、{ 
                    タイトル：' プロンプト' 、
                    アイコン：2 
                }）; 
            }、falseに）; 
            
                        //は弾性ブロックを修飾
            noticeLayer = layer.open（{ 
                タイプ：1。 、
                タイトル：[ ' 編集告知' 、' フォントサイズ：18px; ' ]、
                コンテンツ：$（' #editDIV '）
            }）; 
            Layer.full（noticeLayer）; 
        } 
        
        / * 変更* / 
        関数update_notice（）{ 

            VARのID = $（' #id_up ' ）.val（）;
             VARのタイトル= $（' #title_up ' ）.val（ ）;
             // 取得するHTMLコンテンツエディタ
            のvar 内容= エスケープ（UM.getEditor（' uEditor_up ' ）.getContent（））; 

            VAR データ= { 
                ID：ID、
                タイトル：タイトル、
                コンテンツ：コンテンツ
            }。
            
            $アヤックス（{ 
                URL：" ./notice/updateByPrimaryKeySelective " 、
                データ：データ、
                種類：" ポスト" 、
                データ型：" JSON " 、
                成功：機能（データ）{
                     場合（data.code ==  " 成功" ）{ 
                        layer.alert（data.msg、{ 
                            タイトル：' 提示' 、 
                            アイコン：
                        }、関数（指数）{ 
                            layer.close（noticeLayer）; 
                            layer.close（インデックス）; 
                            layui.form.render（）; 
                            table.reload（' dataGridList ' 、{ 
                                URL：" ./notice/getListByPage " 
                                // 、ここで、{} //追加パラメータ非同期データインタフェースを設定
                            }）; 
                        }）; 
                        $（" #editForm " ）[ 0  ] .RESET（）。
                    } 他{ 
                        layer.alert（data.msg、{ 
                            タイトル：' 提示' 、
                            アイコン：2 
                        }）。
                    } 
                } 
            }）。
        } 
</ スクリプト>

図の効果として、

アップロード写真は、問題をエコー

アップロード

あなたは、直接アクセス・パスは、web.xmlのimageUp.jspで構成するには、以下のWEB-INFにアクセスすることはできません。

    <!-- 百度富文本 图片上传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 />