天天看點

百度Ueditor富文本編輯器上傳圖檔

下載下傳位址:http://ueditor.baidu.com/website/download.html#ueditor

*注:我下載下傳的是jsp版本,雖然是jsp版本其實使用異步html照常是可以使用。

一、首先解壓到resource資源目錄下

     ---webapp

           ---resource

                ----ueditor

       在頁面中引入editor.config.js 和editor.all.js 檔案,再在body标簽中引入如下代碼即可引入編輯器。

      <script id="container" name="content" type="text/plain"></script>

      <script type="text/javascript">

            window.UEDITOR_HOME_URL = '/resource/ueditor';

                    UE.Editor.prototype._bkGetActionUrl = UE.Editor.prototype.getActionUrl;

                    editor = UE.getEditor('container',{

                        toolbars:[['Source', 'Undo', 'Redo', 'Bold', 'pasteplain',

                            'selectall','preview','time','date', 'simpleupload'

                        ]],  

           //關閉elementPath

           elementPathEnabled:false,

           //純文字粘貼

           pasteplain: true,

           initialFrameHeight: 100,

           initialFrameWidth: 470,

           minFrameHeight: 100,

           initialContent: '',

           wordCount: true

       });

                   UE.Editor.prototype.getActionUrl = function(action) {

                        if (action == 'uploadimage') {

                            return '/file/upload_image';

                        } else {

                            return this._bkGetActionUrl.call(this, action);

                        }

                    }

</script>

二、需要把jsp目錄下的jar包引入項目

      1、非maven項目則把lib下面的jar複制帶WEB-INF的lib下,然後add path

       2、maven項目一般就隻需要在maven配置pom.xml中引入ueditor-1.1.2.jar

            <dependency>

                 <groupId>com.baidu.ueditor</groupId>

                 <artifactId>ueditor</artifactId>

                 <version>1.1.2</version>

                 <scope>system</scope>

                 <systemPath>${basedir}/src/main/webapp/WEB-INF/lib/ueditor-1.1.2.jar</systemPath>

           </dependency>

三、修改配置

      1、ueditor.config.js中serverUrl需要注意預設引入的是:serverUrl: URL + "jsp/controller.jsp"    可以直接使用但是需要注意架包的引入

      2、config.json 簡單配置可以不需要修改

      3、ueditor.all.js 要根據業務需求修改:UE.plugin.register('simpleupload', function (){  ----  函數

     到此上傳基本沒有問題,最重要的是注意重寫getActionUrl,上面也有完整代碼

     UE.Editor.prototype.getActionUrl = function(action) {

                        if (action == 'uploadimage') {

                            return '/file/upload_image';

                        } else {

                            return this._bkGetActionUrl.call(this, action);

                        }

                    }

繼續閱讀