在vue
中使用ueditor
,可以用已经封装好的vue-ueditor-wrap
,配置简单,功能也是十分强大
npm i vue-ueditor-wrap
ueditor
将下载好的ueditor
解压至项目static
目录
VueUeditorWrap
组件//可全局引入也可局部引入
import VueUeditorWrap from 'vue-ueditor-wrap';
components: { VueUeditorWrap, }
VueUeditorWrap
配置data () {
return {
contents: 'Vue + UEditor + v-model双向绑定
',
myConfig: {
autoHeightEnabled: false,// 编辑器不自动被内容撑高
initialFrameHeight: 240,// 初始容器高度
initialFrameWidth: '100%',// 初始容器宽度
serverUrl: 'http://35.201.165.105:8000/controller.php',// 上传文件接口
UEDITOR_HOME_URL: '/UEditor/' , // UEditor 资源文件的存放路径
如果服务器网站是php
、jsp
、asp
搭建的,百度提供了demo
,请自行参考ueditor文档http://fex.baidu.com/ueditor/
如果用python,参考DjangoUeditor3
定制属于我们自己的ueditor
服务端接口
我们来打开DjangoUeditor3
的仓库https://github.com/twz915/DjangoUeditor3,
新建我们的ueditor
视图接口ueditor_view.py
拷贝仓库中的DjangoUeditor3/DjangoUeditor/views.py
文件内容到ueditor_view.py
视图中引用了自己的一个setting
,包含自己ueditor
上传的一些设置,我们也一起拿过来
在我们当前应用中创建settings.py
DjangoUeditor3/DjangoUeditor/settings.py
复制到其中
url
|
|
get_ueditor_controller
就是我们的入口
vue
将vue
使用ueditor
前端配置中的serverUrl
配置为我们刚才的接口地址,我这里都在本地测试,端口不同
|
|
点击上传图片无反应
默认请求接口带了一个action
和callback
的参数,200接口访问成功,但是却没有取回任何数据,观察下之前我们用到的测试服务接口,是有返回数据的,对方是用的php
,我们来看下ueditor_view.py
源码
控制台也打印了如下:
|
|
|
|
可以看出来做了一个类似反射的东西,初始连接带了action
参数为config
,所以对应的把我们给踢到get_ueditor_settings
方法中了,继续跟进到这个方法
|
|
我们来打印下json_data
|
|
有返回数据,可以前台没有响应,再仔细观察下除了action
还带了一个callback
参数,我们还没用到,刷新发下,这个callback
的值每次还随机变动,跟原示例返回值比较下,外层少了一个callback()
,我们简单来组装下这个参数。
|
|
再次测试,控制台没有警告了,且我们也取到返回值了
|
|
测试单图片上传,应该大多数人已经可以成功上传了。
图片上传成功,却提示上传错误,不显示图片
这部分都是跨域问题,解决办法如下:UploadFile
函数返回值做修改,添加一个header
即可。
|
|
点击上传多张图片按钮会出现以下提示:
控制台:
|
|
图片上传失败;跨域问题;而且访问接口请求成功200,请求方法却是options
以前没有用到过该方法,百度查了下,大概意思是说这个浏览器自己发的,先试探下服务器允不允许。我在ueditor_view
入口函数包括上传函数中都打印请求,很显然什么也没打印出来,真是不知道这个options
方法会走到程序的哪里,甚至打算将这个视图写成cbv
,走走options
函数试试。
后来想到初始使用vue
连django
时也出现了该提示,详见:Access-Control-Allow-Origin跨域问题,当时用的是
django-cors-headers
,按照文中内容配置好
主要配置:
|
|
测试多图片上传,完美
在本地调试需带上callback
参数,服务器上则需要去掉callback
参数
1.ueditor图片和图片调节框错位
可以通过修改ueditor.all.js的代码来实现调节框位置与图片位置一致。如下
原代码17097行:
‘top’: iframePos.y + imgPos.y - me.editor.document.body.scrollTop - editorPos.y - parseInt(resizer.style.borderTopWidth) + ‘px’;
修改为:
‘top’: iframePos.y + imgPos.y - me.editor.document.documentElement.scrollTop - editorPos.y - parseInt(resizer.style.borderTopWidth) + ‘px’;
2.如何隐藏图片调节框
直接在css文件里设置
#edui1_imagescale{display:none !important;} /去除点击图片后出现的拉伸边框/
3.视频无法播放,格式被自动存为gif
修改ueditor.all.js文件
ueditor.all.js,17769行
html.push(creatInsertStr( vi.url, vi.width || 420, vi.height || 280, id + i, null, cl, 'image'));
修改为
html.push(creatInsertStr( vi.url, vi.width || 420, vi.height || 280, id + i, null, cl, 'video'));
7343,7344,7346行,注释掉一下三行代码:
var root = UE.htmlparser(html);
me.filterInputRule(root);
html = root.toHtml();
参考文章:https://www.diandian100.cn/9923e2ee.html
参考文章:https://blog.csdn.net/qq_35405240/article/details/82786590
参考文章:https://blog.csdn.net/eadela/article/details/76264168