vue、js前端集成ueditor编辑器，后端serverUrl的实现方式

vue、js前端集成ueditor编辑器，后端serverUrl的实现方式，对比其他的富文本编辑器，Ueditor的功能相对来说是最强的，对于在Vue、jquery中集成Ueditor想必还是有这个需求的，接下来就来看看Ueditor在后端如何进行配置提供上传功能。

前端的配置就不做过多的解释了，可以参考以下资料：

参考：http://www.shuchengxian.com/article/718.html

参考：https://blog.csdn.net/liujun03/article/details/84453287

1、配置serverUrl：

data () {

      return {

            msg: '<h2><img src="http://img.baidu.com/hi/jx2/j_0003.gif"/>Vue + UEditor + v-model双向绑定</h2>',

            myConfig: {

                  // 编辑器不自动被内容撑高

                  autoHeightEnabled: false,

                  // 初始容器高度

                  initialFrameHeight: 240,

                  // 初始容器宽度

                  initialFrameWidth: '100%',

                  // 上传文件接口（这个地址是我为了方便各位体验文件上传功能搭建的临时接口，请勿在生产环境使用！！！）

                  // UEditor 资源文件的存放路径，如果你使用的是 vue-cli 生成的项目，通常不需要设置该选项，vue-ueditor-wrap 会自动处理常见的情况，如果需要特殊配置，参考下方的常见问题2

                  UEDITOR_HOME_URL: '/static/UEditor/',

                  // 如果需要上传功能,找后端小伙伴要服务器接口地址

                  serverUrl: 'http://localhost:8090/front/uploadImage'

            }

      }

}

2、配置方法加载ueditor下的php目录的controller.php文件：

ueditor配置文件：

return [

      'ueditor_path' => './static/adminlte/plugins/ueditor'

];

加载controller.php文件：

/**

* [uploadImage ueditor编辑器图片上传]

*/

public function uploadImage()

{

      include config('ueditor.ueditor_path'). '/php/controller.php';

}

修改controller.php文件加载ueditor的config.json文件：

$CONFIG = json_decode(preg_replace("/\/\*[\s\S]+?\*\//", "", file_get_contents(config('ueditor.ueditor_path'). "/php/config.json")), true);

到这里ueditor的后端部分基本上就配置完成了，可以测试下接口看看是否请求成功。

另外值得提一下的就是正常ueditor的文件都是上传到服务器本地的，如果有oss存储服务的话，需要修改：Uploader.class.php 文件实现文件上传到oss

另外需要注意的是：前端请求的头部信息，一定要在后端头部设置一致，不一致会报跨域异常，注意这个头部参数：Authorization 不在后端允许的头部里，所以一致报了错误，改成已经设置的参数：sponsortoken就没有问题了。

// 指定允许其他域名访问

header('Access-Control-Allow-Origin:*');

// 跨域资源共享

header('Access-Control-Allow-Credentials:true');

// 响应头设置

header('Access-Control-Allow-Headers:x-token,x-uid,x-token-check,x-requested-with,content-type,Host,sponsortoken');

// 响应类型

header('Access-Control-Allow-Methods:*');

// 设置https

header("Content-Security-Policy: upgrade-insecure-requests");

// 指定本次预检请求的有效期

header("Access-Control-Max-Age: 1800");