您现在的位置是:网站首页>>前端技术>>Vue

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

发布时间:2018-07-04 18:05:05作者:wangjian浏览量:627点赞量:2

    UEditor 介绍

           UEditor 是由百度「FEX前端研发团队」开发的所见即所得富文本web编辑器,具有轻量,可定制,注重用户体验等特点,开源基于MIT协议,允许自由使用和修改代码。

    1:下载ueditor下来,放在vue项目中的static文件夹下(将php文件夹去除,php文件放置位置下面说明)

    image.png

    2:将php文件放到php接口项目内

    image.png

    3:修改配置文件:

    (1):修改ueditor.config.js配置文件

    // 这里是配置Ueditor内部进行文件请求时的静态文件服务地址

    window.UEDITOR_HOME_URL = "/static/UE/";
    ,serverURL:'https://local.myapi.com/' + "php/controller.php"  //php接口地址


    image.png

    (2):配置ueditor.all.js文件

    说明:由于页面部署与php接口的域名不同,上传图片时会出现iframe的跨域问题;

    将ueditor.all.js中的:

    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();
                });

    替换成:

    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
                      });
                    }
                  }
                });

    (3):配置百度编辑器php文件中的controller.php

    在controller.php文件的头部添加:

    header('Access-Control-Allow-Origin: *'); //允许跨域访问
    header('Access-Control-Allow-Headers: X-Requested-With,X_Requested_With'); //设置允许的跨域header

    image.png

    (4):配置百度编辑器php文件中的Uploader.class.php

    将:

    $this->stateMap['ERROR_TYPE_NOT_ALLOWED'] = iconv('unicode', 'utf-8', $this->stateMap['ERROR_TYPE_NOT_ALLOWED']);

    替换成:

    $this->stateMap['ERROR_TYPE_NOT_ALLOWED'] = mb_convert_encoding($this->stateMap['ERROR_TYPE_NOT_ALLOWED'], 'utf-8', 'auto');

    在_construct方法开始是添加一个sleep()方法,上传时有时失败,添加的sleep()方法后就可以了,具原因暂不知道:

    image.png

    (5):配置config.json

    配置图片的访问路径及保存路径

    image.png

    4:由于上传图片使用了ajax上传方法,所以需要引入jquery文件

    image.png

    5:在vue的main.js文件中引入百度编辑器

    image.png

    6:使用百度编辑器

    在vue页面上使用百度编辑器

    image.png


    image.png

    报错:

    部分人使用时出现以下报错:

    Uncaught TypeError: 'caller', 'callee', and 'arguments' properties may not be accessed on strict mode functions or the arguments objects for calls to them...

    这个问题是因为项目中的使用的babel默认添加了use strict造成,解决方法为:

    (1):

    npm install babel-plugin-transform-remove-strict-mode

    (2):在.babelrc里添加下列代码:

    {
      "
    plugins
    ": [
    "transform-remove-strict-mode"
    ]
    }


    image.png

2 +1