zhuhui's blog-- 基于vue的iview使用百度编辑器

基于vue的iview使用百度编辑器

发布日期：2018-07-04 作者：王健浏览次数： 177

文章来源：https://www.wj0511.com/site/detail.html?id=22

UEditor 介绍       UEditor 是由百度「FEX前端研发团队」开发的所见即所得富文本web编辑器，具有轻量，可定制，注重用户体验等特点，开源基于MIT协议，允许自由使用和修改代码。1：下载ueditor下来，放在vue项目中的static文件夹下(将php文件夹去除,php文件放置位置下面说明)<img src="//img.nihao365.cn/upload/blog/20181211/1544500517659709.png?x-oss-process=style/nihao365.cn" title="1530696807220942.png" alt="image.png"/>2：将php文件放到php接口项目内 <img src="//img.nihao365.cn/upload/blog/20181211/1544500519406982.png?x-oss-process=style/nihao365.cn" title="1530697032522147.png" alt="image.png"/>3：修改配置文件：(1)：修改ueditor.config.js配置文件// 这里是配置Ueditor内部进行文件请求时的静态文件服务地址<pre class="brush:as3;toolbar:false">window.UEDITOR_HOME_URL = "/static/UE/"; ,serverURL:'https://local.myapi.com/' + "php/controller.php"  //php接口地址 </pre> <img src="//img.nihao365.cn/upload/blog/20181211/1544500520181469.png?x-oss-process=style/nihao365.cn" title="1530697219891977.png" alt="image.png" width="507" height="334"/>(2):配置ueditor.all.js文件说明：由于页面部署与php接口的域名不同，上传图片时会出现iframe的跨域问题；将ueditor.all.js中的：<pre class="brush:as3;toolbar:false">domUtils.on(input, 'change', function(){
                if(!input.value) return;
                var loadingId = 'loading_' + (+new Date()).toString(36);
                var params = utils.serializeParam(me.queryCommandValue('serverparam')) || '';
                var imageActionUrl = me.getActionUrl(me.getOpt('imageActionName'));
                var allowFiles = me.getOpt('imageAllowFiles');
                me.focus();
                me.execCommand('inserthtml', '');
                function callback(){
                    try{
                        var link, json, loader,
                            body = (iframe.contentDocument || iframe.contentWindow.document).body,
                            result = body.innerText || body.textContent || '';
                        json = (new Function("return " + result))();
                        link = me.options.imageUrlPrefix + json.url;
                        if(json.state == 'SUCCESS' && json.url) {
                            loader = me.document.getElementById(loadingId);
                            loader.setAttribute('src', link);
                            loader.setAttribute('_src', link);
                            loader.setAttribute('title', json.title || '');
                            loader.setAttribute('alt', json.original || '');
                            loader.removeAttribute('id');
                            domUtils.removeClasses(loader, 'loadingclass');
                        } else {
                            showErrorLoader && showErrorLoader(json.state);
                        }
                    }catch(er){
                        showErrorLoader && showErrorLoader(me.getLang('simpleupload.loadError'));
                    }
                    form.reset();
                    domUtils.un(iframe, 'load', callback);
                }
                function showErrorLoader(title){
                    if(loadingId) {
                        var loader = me.document.getElementById(loadingId);
                        loader && domUtils.remove(loader);
                        me.fireEvent('showmessage', {
                            'id': loadingId,
                            'content': title,
                            'type': 'error',
                            'timeout': 4000
                        });
                    }
                }
                /* 判断后端配置是否没有加载成功 */
                if (!me.getOpt('imageActionName')) {
                    errorHandler(me.getLang('autoupload.errorLoadConfig'));
                    return;
                }
                // 判断文件格式是否错误
                var filename = input.value,
                    fileext = filename ? filename.substr(filename.lastIndexOf('.')):'';
                if (!fileext || (allowFiles && (allowFiles.join('') + '.').indexOf(fileext.toLowerCase() + '.') == -1)) {
                    showErrorLoader(me.getLang('simpleupload.exceedTypeError'));
                    return;
                }
                domUtils.on(iframe, 'load', callback);
                form.action = utils.formatUrl(imageActionUrl + (imageActionUrl.indexOf('?') == -1 ? '?':'&') + params);
                form.submit();
            });</pre>替换成：<pre class="brush:as3;toolbar:false">domUtils.on(input, 'change', function() {
            
              if(!input.value) return;
              var loadingId = 'loading_' + (+new Date()).toString(36);
              var imageActionUrl = me.getActionUrl(me.getOpt('imageActionName'));
              var allowFiles = me.getOpt('imageAllowFiles');
              me.focus();
              me.execCommand('inserthtml', '');
              /* 判断后端配置是否没有加载成功 */
              if (!me.getOpt('imageActionName')) {
                errorHandler(me.getLang('autoupload.errorLoadConfig'));
                return;
              }
              // 判断文件格式是否错误
              var filename = input.value,
                fileext = filename ? filename.substr(filename.lastIndexOf('.')):'';
              if (!fileext || (allowFiles && (allowFiles.join('') + '.').indexOf(fileext.toLowerCase() + '.') == -1)) {
                showErrorLoader(me.getLang('simpleupload.exceedTypeError'));
                return;
              }
              var params = utils.serializeParam(me.queryCommandValue('serverparam')) || '';
              var action = utils.formatUrl(imageActionUrl + (imageActionUrl.indexOf('?') == -1 ? '?' : '&') + params);
              var formData = new FormData();
              formData.append("upfile", form[0].files[0] );
              $.ajax({
                url: action,
                type: 'POST',
                cache: false,
                data: formData,
                processData: false,
                contentType: false,
                success: function (data) {
                  data = JSON.parse(data);
                  var link, loader,
                    body = (iframe.contentDocument || iframe.contentWindow.document).body,
                    result = body.innerText || body.textContent || '';
                  link = me.options.imageUrlPrefix + data.url;
                  if(data.state == 'SUCCESS' && data.url) {
                    loader = me.document.getElementById(loadingId);
                    loader.setAttribute('src', link);
                    loader.setAttribute('_src', link);
                    loader.setAttribute('title', data.title || '');
                    loader.setAttribute('alt', data.original || '');
                    loader.removeAttribute('id');
                    domUtils.removeClasses(loader, 'loadingclass');
                  } else {
                    showErrorLoader && showErrorLoader(data.state);
                  }
                  form.reset();
                }
              });
              function showErrorLoader(title){
                if(loadingId) {
                  var loader = me.document.getElementById(loadingId);
                  loader && domUtils.remove(loader);
                  me.fireEvent('showmessage', {
                    'id': loadingId,
                    'content': title,
                    'type': 'error',
                    'timeout': 4000
                  });
                }
              }
            });</pre>(3):配置百度编辑器php文件中的controller.php在controller.php文件的头部添加：<pre class="brush:as3;toolbar:false">header('Access-Control-Allow-Origin: *'); //允许跨域访问 header('Access-Control-Allow-Headers: X-Requested-With,X_Requested_With'); //设置允许的跨域header </pre><img src="//img.nihao365.cn/upload/blog/20181211/1544500521703129.png?x-oss-process=style/nihao365.cn" title="1530698071715168.png" alt="image.png"/>(4):配置百度编辑器php文件中的Uploader.class.php将：<pre class="brush:as3;toolbar:false">$this->stateMap['ERROR_TYPE_NOT_ALLOWED'] = iconv('unicode', 'utf-8', $this->stateMap['ERROR_TYPE_NOT_ALLOWED']); </pre>替换成：<pre class="brush:as3;toolbar:false">$this->stateMap['ERROR_TYPE_NOT_ALLOWED'] = mb_convert_encoding($this->stateMap['ERROR_TYPE_NOT_ALLOWED'], 'utf-8', 'auto'); </pre>在_construct方法开始是添加一个sleep()方法,上传时有时失败,添加的sleep()方法后就可以了,具原因暂不知道：<img src="//img.nihao365.cn/upload/blog/20181211/1544500522443576.png?x-oss-process=style/nihao365.cn" title="1530698258405487.png" alt="image.png"/>(5):配置config.json配置图片的访问路径及保存路径<img src="//img.nihao365.cn/upload/blog/20181211/1544500523873339.png?x-oss-process=style/nihao365.cn" title="1530698434371574.png" alt="image.png"/>4：由于上传图片使用了ajax上传方法，所以需要引入jquery文件<img src="//img.nihao365.cn/upload/blog/20181211/1544500524356812.png?x-oss-process=style/nihao365.cn" title="1530698536815521.png" alt="image.png"/>5：在vue的main.js文件中引入百度编辑器<img src="//img.nihao365.cn/upload/blog/20181211/1544500525683782.png?x-oss-process=style/nihao365.cn" title="1530698598711039.png" alt="image.png"/>6：使用百度编辑器在vue页面上使用百度编辑器<img src="//img.nihao365.cn/upload/blog/20181211/1544500526216576.png?x-oss-process=style/nihao365.cn" title="1530698702589614.png" alt="image.png"/> <img src="//img.nihao365.cn/upload/blog/20181211/1544500528219907.png?x-oss-process=style/nihao365.cn" title="1530698684373844.png" alt="image.png"/>报错：部分人使用时出现以下报错：<pre class="brush:as3;toolbar:false">Uncaught TypeError: 'caller', 'callee', and 'arguments' properties may not be accessed on strict mode functions or the arguments objects for calls to them... </pre>这个问题是因为项目中的使用的babel默认添加了use strict造成，解决方法为：(1):<pre class="brush:as3;toolbar:false">npm install babel-plugin-transform-remove-strict-mode </pre>(2):在.babelrc里添加下列代码:<pre class="brush:as3;toolbar:false">{   " plugins ": [ "transform-remove-strict-mode" ] } </pre> <img src="//img.nihao365.cn/upload/blog/20181211/1544500529913898.png?x-oss-process=style/nihao365.cn" title="1530752086173172.png" alt="image.png" width="793" height="371"/>
 </ul>

上一篇： 基于vue的iview实现权限配置

下一篇： 基于vue的iview使用wangEditor

关于我

博主：朱辉

文章数：520

浏览数：31820

最新 Top 10

最热 Top 20