百度Ueditor富文本编辑器上传图片

来源:互联网 发布:大数据搜索论文 编辑:程序博客网 时间:2024/04/28 09:13

下载地址: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);
                        }
                    }

            

0 0
原创粉丝点击