vue-ueditor-wrap 改为cdn加载UEditor源码,资源可以加载,但打开dialog会出现iframe跨域
Uncaught DOMException: Blocked a frame with origin "http://10.0.2.111:8080"
from accessing a cross-origin frame.
如何通过cdn引入'UEditor'github.com/HaoChuan942…
修改之前
<template>
<div>
<vue-ueditor-wrap
v-model="msg"
:config="ueditorConfig"
></vue-ueditor-wrap>
</div>
</template>
<script>
/**
* When I wrote this code,Only God and I understood what I was doing.
* Now,God only knows !!!
*/
import VueUeditorWrap from 'vue-ueditor-wrap';
export default {
name: "bb",
components: {VueUeditorWrap},
data(){
return{
msg:'+++',
ueditorConfig:{
// 编辑器不自动被内容撑高
autoHeightEnabled: false,
// 初始容器高度
initialFrameHeight: 200,
// 初始容器宽度
// initialFrameWidth: '100%',
// 上传文件接口(这个地址是我为了方便各位体验文件上传功能搭建的临时接口,请勿在生产环境使用!!!)
serverUrl: `http://localhost:9023/lw-ueditor-backend-server/ueditor/oss/upload`,
// UEditor 资源文件的存放路径,如果你使用的是 vue-cli 生成的项目,通常不需要设置该选项,vue-ueditor-wrap 会自动处理常见的情况,如果需要特殊配置,参考下方的常见问题2
UEDITOR_HOME_URL: `http://10.0.2.111:8080/UEditor/`,
// 是否保持toolbar的位置不动,默认true
autoFloatEnabled: false
},
}
}
}
</script>
<style lang="scss" scoped>
</style>
修改之后: 将 UEDITOR_HOME_URL:
http://10.0.2.111:8080/UEditor/替换为 UEDITOR_HOME_URL:/UEditor/
<template>
<div>
<vue-ueditor-wrap
v-model="msg"
:config="ueditorConfig"
></vue-ueditor-wrap>
</div>
</template>
<script>
/**
* When I wrote this code,Only God and I understood what I was doing.
* Now,God only knows !!!
*/
import VueUeditorWrap from 'vue-ueditor-wrap';
export default {
name: "bb",
components: {VueUeditorWrap},
data(){
return{
msg:'+++',
ueditorConfig:{
// 编辑器不自动被内容撑高
autoHeightEnabled: false,
// 初始容器高度
initialFrameHeight: 200,
// 初始容器宽度
// initialFrameWidth: '100%',
// 上传文件接口(这个地址是我为了方便各位体验文件上传功能搭建的临时接口,请勿在生产环境使用!!!)
serverUrl: `http://localhost:9023/lw-ueditor-backend-server/ueditor/oss/upload`,
// UEditor 资源文件的存放路径,如果你使用的是 vue-cli 生成的项目,通常不需要设置该选项,vue-ueditor-wrap 会自动处理常见的情况,如果需要特殊配置,参考下方的常见问题2
UEDITOR_HOME_URL: `/UEditor/`,
// 是否保持toolbar的位置不动,默认true
autoFloatEnabled: false
},
}
}
}
</script>
<style lang="scss" scoped>
</style>
增加代理
proxyList: {
"/UEditor": {
target: "http://10.0.2.111:8080",
changeOrigin: true,
pathRewrite: {
"^/UEditor": "/UEditor",
},
headers: {
referer: "http://10.0.2.111:8080",
},
},
},
在vue中配置代理,便可以解决这个跨域问题