使⽤wangEditor富⽂本编辑器遇到的问题总结
1、当屏幕缩时,富⽂本编辑器的选项会被隐藏,如下图官⽹的demo:当屏幕变⼩时,菜单选项就超出了富⽂本编辑器的区域,撤回和恢复已经隐藏不见了
.w-e-toolbar{
flex-wrap:wrap;
}
135编辑器手机版注意:有时候我们在vue组件内部更改默认样式不起作⽤,此时可以在全局试试就可以了,⾄于为什么,我暂时还没搞明⽩,如果您知道,欢迎评论区留⾔告知哦,在此先谢过
2019-12-12
看到这⾥有遗留的问题(评论区有⼤神已经回复了哈):现在已经会了,解决办法:
1、不要放在scoped中,放在全局,为了避免和其他的组件冲突,可以加⼀个类名,在类名下修改就没有问题了
2、如果写在了scoped中,可以给类名前⾯加⼀个/deep/ ⾄于具体⽤法可以⾃⾏百度
就这么简单,然后看图:完美!
问题2:上传图⽚到服务器中(可以使⽤base64格式的,但是如果图⽚过⼤,经过base64编译过后⽂件会很⼤,所以不建议哦)
我封装了⼀个函数,可以上传图⽚,可以动态获取内容,如下:
data(){
return {
editContent:''//存储富⽂本编辑器的内容
}
},
methods:{
wangEdit (id) {
let editor = new E(id)
hange = (html) => {
this.editContent = html//动态获取富⽂本编辑器的内容
}
editor.customConfig.uploadImgMaxSize = 3 * 1024 * 1024;
editor.customConfig.uploadFileName = 'file[]'
editor.customConfig.uploadImgServer = '/proxy/ImgUpload'//换成后端给你的上传图⽚的接⼝ editor.customConfig.uploadImgHooks = {
before: function (xhr, editor, files) {
let formdata=new FormData();
for(let i=0;i<files.length;i++){
let url = files[i];
formdata.append('file[]', url)
}
},
customInsert: function (insertImg, result, editor) {
for(let i=0;i<result.data.length;i++){
let url = result.data[i]
insertImg(url)
}
}
}
}
}
//使⽤:this.wangEdit(‘#edit’)
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198,我们将在24小时内删除。
发表评论