如果你要跨域,就不要用了,【单图上传】需要解决跨域问题的前后端,不然不能用!
前端部分
1、首先去下载编辑器
http://ueditor.baidu.com/website/download.html
2、然后,把他放到static文件夹内!
3、新建组件,引入js
<template> <div class="editors"> <script ref="ueditorElem" id="editor" type="text/plain"> </script> </div> </template> <script> import '../../../static/ueditor/ueditor.parse' import '../../../static/ueditor/ueditor.config' import '../../../static/ueditor/ueditor.all' import '../../../static/ueditor/lang/zh-cn/zh-cn' export default { name: 'ueditor', data () { return { catchData: '', config: { initialFrameWidth: null, initialFrameHeight: 300 } } }, mounted () { this.ue = window.UE.getEditor('editor', this.config) } } </script> <style lang="less" scoped> .editors { width: 100%; height: 600px; position: relative; } </style>
这一步完成会导致报错!
4、修改ueditor.config.js,内的路径
把
(function () { /** * 编辑器资源文件根路径。它所表示的含义是:以编辑器实例化页面为当前路径,指向编辑器资源文件(即dialog等文件夹)的路径。 * 鉴于很多同学在使用编辑器的时候出现的种种路径问题,此处强烈建议大家使用"相对于网站根目录的相对路径"进行配置。 * "相对于网站根目录的相对路径"也就是以斜杠开头的形如"/myProject/ueditor/"这样的路径。 * 如果站点中有多个不在同一层级的页面需要实例化编辑器,且引用了同一UEditor的时候,此处的URL可能不适用于每个页面的编辑器。 * 因此,UEditor提供了针对不同页面的编辑器可单独配置的根路径,具体来说,在需要实例化编辑器的页面最顶部写上如下代码即可。当然,需要令此处的URL等于对应的配置。 * window.UEDITOR_HOME_URL = "/xxxx/xxxx/"; */ var URL = window.UEDITOR_HOME_URL || getUEBasePath()
修改成,
(function () { /** * 编辑器资源文件根路径。它所表示的含义是:以编辑器实例化页面为当前路径,指向编辑器资源文件(即dialog等文件夹)的路径。 * 鉴于很多同学在使用编辑器的时候出现的种种路径问题,此处强烈建议大家使用"相对于网站根目录的相对路径"进行配置。 * "相对于网站根目录的相对路径"也就是以斜杠开头的形如"/myProject/ueditor/"这样的路径。 * 如果站点中有多个不在同一层级的页面需要实例化编辑器,且引用了同一UEditor的时候,此处的URL可能不适用于每个页面的编辑器。 * 因此,UEditor提供了针对不同页面的编辑器可单独配置的根路径,具体来说,在需要实例化编辑器的页面最顶部写上如下代码即可。当然,需要令此处的URL等于对应的配置。 * window.UEDITOR_HOME_URL = "/xxxx/xxxx/"; */ window.UEDITOR_HOME_URL = '/static/ueditor/' var URL = window.UEDITOR_HOME_URL || getUEBasePath()
/static/ueditor/是你的static下的ueditor文件路径
好了!这里前端部分就可以了!
但是粘贴图片和上传图片是不可用的,这里需要用到后端功能
后端部分
我们把php的文件夹放到服务器
然后打开ueditor.config.js
,新增函数,+++号部分为新加的
(function () { window.UEDITOR_HOME_URL = '/static/ueditor/' window.UEDITOR_IMG_URL = ' 图片上传后端地址 var URL = window.UEDITOR_HOME_URL || getUEBasePath() var imgupURL = window.UEDITOR_IMG_URL //++++ /** * 配置项主体。注意,此处所有涉及到路径的配置别遗漏URL变量。 */ window.UEDITOR_CONFIG = { // 为编辑器实例添加一个路径,这个不能被注释 UEDITOR_HOME_URL: URL, // 服务器统一请求接口路径 serverUrl: imgupURL + 'php/controller.php',//+++++++
你会发现还不行,是因为跨域了!
需要在controller.php
上添加跨域header
header("Access-Control-Allow-Origin: *");
好了试下吧!