Vue+tp5使用UEditor富文本编辑器单图和多图上传问题总结

前言

由于很多coder在做前后端分离的项目的时候使用到ueditor，由于跨域的问题会导致文件上传成功编辑器却显示上传失败并且无法在编辑器里面显示。在网上收集了很多资料，都差点放弃使用ueditor了，使用其他编辑器，不过结合了官网和其他的教程还是找到了解决办法。该文档是前端为vue，后端为php，后端框架为thinkphp5.0+，写得不好大家多多指教。

前端

1、下载百度ueditor官网最新的ueditor（1.4.3版本）

将下载的ueditor安装到vue项目的目录，这里不多讲，可以百度。

2、修改ueditor根目录ueditor.all.js文件

打开文件后搜索plugins/simpleupload.js，应该会定位大概在24455行左右的位置。往下20行左右找到

domUtils.on(input, 'change', function() {
....
}

将此处修改为

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', '<img class="loadingclass" id="' + loadingId + '" src="' + me.options.themePath + me.options.theme +'/images/spacer.gif" title="' + (me.getLang('simpleupload.loading') || '') + '" >');
                /!* 判断后端配置是否没有加载成功 *!/
                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(me.options.imageFieldName, form[0].files[0] );
                $.ajax({
                    url: action,
                    type: 'POST',
                    cache: false,
                    data: formData,
                    processData: false,
                    contentType: false,
                    success: function (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
                        });
                    }
                }
            });

其他的代码不用修改。修改是为了图片上传的部分改成ajax请求，这样子可以解决跨域问题。

后端

1、设置后端的Header，改成所有域名可以访问，或者指定域名访问。

TP框架打开public下的index.php设置，将一下代码加入其中，其他框架一样。

header('Access-Control-Allow-Origin:*');  //  *号代表所有的域名都可以访问，可单独设置请求的域名
// 响应类型
header('Access-Control-Allow-Methods:*');  //  *号代表可以接收所有的请求，可单独设置
// 响应头设置
header('Access-Control-Allow-Headers:x-requested-with,X_Requested_With,content-type');

2、编写后台上传的代码。（以下tp5为列）

（1）新建一个控制器Ueditor.php。
（2）配置图片上传的统一入口，此入口需要填写到ueditor.config.js的serviceUrl。
    public function index()
    {
        $action = Request::instance()->param('action');
        if (method_exists($this, $action)) {
            return $this->$action();
        } else {
            return jsonp(['state' => "请求地址出错"]);
        }
    }
（3）配置ueditor的后台配置文件，配置文件参考ueditor官网配置文档。
  public function config()
    {
        $config = [
            /* 上传图片配置项 */
            "imageActionName"         => "uploadImage", /* 执行上传图片的action名称 */
            "imageFieldName"          => "file",
            "imageMaxSize"            => 1048576, /* 上传大小限制，单位B */
            "imageAllowFiles"         => [".png", ".jpg", ".jpeg"], /* 上传图片格式显示 */
            "imageInsertAlign"        => "none", /* 插入的图片浮动方式 */
            "imageUrlPrefix"          => '', /* 图片访问路径前缀 */
            /* 涂鸦图片上传配置项 */
            "scrawlActionName"        => "uploadImageFile", /* 执行上传涂鸦的action名称 */
            "scrawlMaxSize"           => 1048576, /* 上传大小限制，单位B */
            "scrawlUrlPrefix"         => '', /* 图片访问路径前缀 */
            "scrawlInsertAlign"       => "none",
           // ............此处省略
        ];

        return jsonp($config);
    }
（4）编写上传文件的控制器

假设我们的配置文件中imageActionName的名字为uploadImage，那么我们图片上传的方法就应该为

 public function uploadImage()
    {
        if (Request::instance()->isOptions()){
            return jsonp(['state'=>'SUCCESS']);
        }
 $filePath =request()->file('file');  //file是前台表单提交的name，可以在配置文件中指定imageFieldName。
        $info=$filePath->getInfo();
        //此处为后台处理上传的逻辑代码
       //upload

      $ret=[
                "state"    => 'SUCCESS',
                "url"      => $info['src'],
                "title"    => $info['name'],
                "original" => $info['name'],
                "type"     => $info['type'],
                "size"     => $info['size'],
            ];
            return json($ret);
    //返回ueditor固定的格式，必须严格按照此格式返回。
    }
（5）其他的控制器跟着图片上传这个来就可以了。

至此就能够在ueditor正常上传文件了。如果还有不懂的可以留言。

注意事项

1、修改ueditor.config.js里面的serverUrl和ueditor静态文件地址。

   window.UEDITOR_HOME_URL = "/static/editor/";  //修改此处为您的vue项目静态文件地址
    var URL = window.UEDITOR_HOME_URL || getUEBasePath();

    /**
     * 配置项主体。注意，此处所有涉及到路径的配置别遗漏URL变量。
     */
    window.UEDITOR_CONFIG = {

        //为编辑器实例添加一个路径，这个不能被注释
        UEDITOR_HOME_URL: URL

        // 服务器统一请求接口路径
        , serverUrl: "域名+/lawyer/Ueditor/index"   //修改此处为您的服务器地址
       //....省略
}

2、关于文中代码有jsonp和json的返回方式说明。

由于涉及跨域访问，所以将所有通过Ueditor自身请求的都需要使用JSONP方法来返回相应的参数，否则前端就不能正常接收到数据。因为上传图片的位置我们修改了ueditor.all.js里面的请求方式，所以控制器中只需要使用JSON方法来返回就能正常运行。

3、关于上传文件的方法中的一段代码Request::instance()->isOptions()的解释。

        if (Request::instance()->isOptions()){
            return jsonp(['state'=>'SUCCESS']);
        }

为什么需要添加此行代码，关于这个问题我找了好半天，结果在ueditor的官方文档上发现了说明。因为在多图上传的时候，他同样的请求我们的图片上传方法，但是它会先发送一个OPTIONS请求进行试探，请求必须要返回状态码为200才能继续使用post请求上传图片。所以在这里需要设置这段代码。

4、关于返回值的说明。

所有的返回值都需要严格按照ueditor的返回值，必须携带的参数是state，请求成功返回SUCCESS，失败了就随意。其他参数查看ueditor官方文档。

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 202,056评论 5赞 474
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 84,842评论 2赞 378
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 148,938评论 0赞 335
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 54,296评论 1赞 272
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 63,292评论 5赞 363
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 48,413评论 1赞 281
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 37,824评论 3赞 393
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 36,493评论 0赞 256
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 40,686评论 1赞 295
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,502评论 2赞 318
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,553评论 1赞 329
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 33,281评论 4赞 318
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 38,820评论 3赞 305
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,873评论 0赞 19
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,109评论 1赞 258
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 42,699评论 2赞 348
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 42,257评论 2赞 341