技术饭

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

copylian    0 评论    1651 浏览    2020.12.23

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

1608710624(1).png

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

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

1608710773(1).png

1608710814(1).png

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

1609237303(1).png

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

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

飓风呀
感谢你的支持,我会继续努力!
扫码打赏,感谢您的支持!

文明上网理性发言!

  • 还没有评论,沙发等你来抢