vue-ueditor-wrap php UEditor富文本编辑器配置说明

官方地址：https://github.com/HaoChuan9421/vue-ueditor-wrap

 

VUE:

 <el-form-item label="内容" prop="content">
                  <vue-ueditor-wrap
                    v-model="postForm.content"
                    :config="config1"
                    style="line-height:20px"></vue-ueditor-wrap>

</el-form-item>

import VueUeditorWrap from 'vue-ueditor-wrap' // ES6 Module

......................
data() {
        
        return {


          ...........................


            config1: {
                // FIXME headers token无效190921
                headers: {
                    Authorization: 'Bearer ' + getToken() // 服务端指定使用了Bearer类型的access token，所以客户端必须使用这种格式将access token传给资源服务器。
                },
                serverUrl: (process.env.NODE_ENV === 'development') ? '/dev-api/v1/upload.ueditor?container_name=CMS' : process.env.VUE_APP_BASE_API+'/v1/upload.ueditor?container_name=CMS', // 上传图片的地址   开发环境有API
                // UEditor 资源文件的存放路径，如果你使用的是 vue-cli 生成的项目，通常不需要设置该选项，vue-ueditor-wrap 会自动处理常见的情况，如果需要特殊配置，参考下方的常见问题2
                UEDITOR_HOME_URL: (process.env.NODE_ENV === 'development') ? '/UEditor/' : '/admin/UEditor/'  // TODO 必须要用对应:F:\web\x60\code-admin\public\UEditor     public目录引用时 使用根目录
            }
        }
    },

注意:

1 headers 携带上token

2 serverUrl,开发模式和线上生产连接后端地址分别设置

3 UEDITOR_HOME_URL 发模式和线上生产调用地址,分别设置

 

ueditor.all.js文件修改:

              /* 发出ajax请求 */
                    me._serverConfigLoaded = false;

                    configUrl && UE.ajax.request(configUrl,{
                        'method': 'GET',
                        //'dataType': isJsonp ? 'jsonp':'',//2020-02-21禁用,启用后,会出跨域的报错提示
                        'onsuccess':function(r){
                            try {
                                //var config = isJsonp ? r:eval("("+r.responseText+")");//2020-02-21禁用,启用后,由于是isJsonp会得不到配置信息
                                var config = eval("("+r.responseText+")");
                                utils.extend(me.options, config);
                                me.fireEvent('serverConfigLoaded');
                                me._serverConfigLoaded = true;
                            } catch (e) {
                                showErrorMsg(me.getLang('loadconfigFormatError'));
                            }
                        },
                        'onerror':function(){
                            showErrorMsg(me.getLang('loadconfigHttpError'));
                        }
                    });

1 约8096行左右将代码注释禁用,否则线上环境会引起跨域的报错提示,无法获得后端配置信息

//'dataType': isJsonp ? 'jsonp':'',//2020-02-21禁用,启用后,会出跨域的报错提示

错误信息:Cross-Origin Read Blocking (CORB) blocked cross-origin response

2 //var config = isJsonp ? r:eval("("+r.responseText+")");//2020-02-21禁用,启用后,由于是isJsonp会得不到配置信息

var config = eval("("+r.responseText+")");

此处代码注释并修改,否则后端来的配置信息,无法使用

 

 

PHP laravel,两个路由,一个获取配置,一个上传保存文件

1 配置获取

$router->any('upload.ueditor', [
    'as' => 'api_upload_ueditor',
    'uses' => 'Controller@Ueditor',
    /*    'middleware' => [
          'auth:api',
        ],
        'authorizeCheckParameters' => [
            'hasAccess_plus',
        ],*/
]);


 switch ($request->action) {
            case 'config':
                $result = Config::get('filesystems.upload_config');
                break;
            /* 上传图片 */
            case 'uploadimage':
                $config = [
                    "maxSize" => Config::get('filesystems.upload_config.imageMaxSize'),
                    "allowFiles" => Config::get('filesystems.upload_config.imageAllowFiles'),
                    //"fieldName" => Config::get('filesystems.upload_config.imageFieldName'),
                ];
                $real_upload_file = $request->file('file');//实际上传的文件
                $container_name = $request->container_name;//控制器名称
                $result = Apiato::call('X_upload@CreateUploadTask', [$real_upload_file, $container_name, $config]);
                break;

            /* 上传文件 */
            case 'uploadfile':
                $config = [
                    "maxSize" => Config::get('filesystems.upload_config.fileMaxSize'),
                    "allowFiles" => Config::get('filesystems.upload_config.fileAllowFiles'),
                    // "fieldName" => Config::get('filesystems.upload_config.fileFieldName'),
                ];
                $real_upload_file = $request->file('file');//实际上传的文件
                $container_name = $request->container_name;//控制器名称
                $result = Apiato::call('X_upload@CreateUploadTask', [$real_upload_file, $container_name, $config]);
                break;
            /* 抓取远程文件 */
            case 'catchimage':
                $list = array();
                $config = [
                    "maxSize" => Config::get('filesystems.upload_config.catcherAllowFiles'),
                    "allowFiles" => Config::get('filesystems.upload_config.fileAllowFiles'),
                ];
                $real_upload_source_array = $request->source;//远程的文件列表

            //dump($request->toArray());
            //dump($real_upload_file);
                $container_name = $request->container_name;//控制器名称
                foreach ($real_upload_source_array as $imgUrl) {

                    $return_temp = Apiato::call('X_upload@CreateCrawlerTask', [$imgUrl, $container_name, $config]);

                   // dump($imgUrl);
                   // dump($return_temp);
                    array_push($list, array(
                        "state" => $return_temp["state"],
                        "url" => $return_temp["url"],
                       // "size" => $result["size"],
                    ));
                }
                //dump( ($list));
                //dump(count($list));

                $result['state'] = count($list) ? 'SUCCESS' : 'ERROR';
                $result['list'] = $list;

                break;


            /* 上传涂鸦 */
            //case 'uploadscrawl':
            /* 上传视频 */
            //case 'uploadvideo':

            /* 列出图片 */
            //case 'listimage':
            //  $result = include("action_list.php");
            //   break;
            /* 列出文件 */
            //case 'listfile':
            //    $result = include("action_list.php");
            //     break;

            default:
                $result['state'] = '请求地址出错';
                break;
        }


        return $result;

 

 

 

2 上传文件

$router->post('upload.img', [
    'as' => 'api_upload_create_upload_img',
    'uses'  => 'Controller@createUploadImg',
/*    'middleware' => [
      'auth:api',
    ],
    'authorizeCheckParameters' => [
        'hasAccess_plus',
    ],*/
]);




   if ($request->hasFile('file')) {
            $file = $request->file('file');

            // 文件是否上传成功
            if ($file->isValid()) {
                $config_imageAllowFiles = Config::get('filesystems.upload_config.imageAllowFiles');
                $config_imageMaxSize = Config::get('filesystems.upload_config.imageMaxSize');
                $size = $file->getSize();
                $ext = $file->getClientOriginalExtension();     // 扩展名


                $this->_result['code'] = 101;

                if ($size > $config_imageMaxSize) {
                    $this->_result['message'] = '文件大小超过配置';
                    // return false;
                } else if (!in_array($ext, $config_imageAllowFiles)) {
                    $this->_result['message'] = '文件格式不正确';
                    // echo json_encode($this->_result);
                    //exit();
                } else {


                    $this->_result = Apiato::call('X_upload@CreateUploadTask', [$file, $request->container_name]);


                }
            } else {
                $this->_result['message'] = '上传失败';
                //echo json_encode($this->_result);
            }
        } else {
            $this->_result['message'] = '上传失败';

        }
        return $this->_result;