最近项目需要换一个比富文本编辑器高级一点的编辑器 用于在vue支持的编辑器其实不是特别多 最后选择了Ueditor ,Ueditor是百度下的一款难产儿 原因我不晓得 我只晓得里面的坑特别特别多,网上的教程大部分都是PHP的后端代码支持 ,对于我这种用Python的就有点尴尬了 ,所以呢我把我踩的坑都写出来 看看大家是否也需要
好现在我们先下载一个包https://github.com/HaoChuan9421/vue-ueditor-wrap/tree/master/assets/downloads
这位大哥做了很多的Bug修复 所以在他这里下载比较撇脱~ 我下载的是如图这个包

下载下来后解压 改名为UE放在public下 如图:

放好了后在在需要的地方加入这个东西
<VueUeditorWrap/>

然后呢在导入
import VueUeditorWrap from 'vue-ueditor-wrap'
然后呢 在注册组件
components: {
// 编辑器
VueUeditorWrap,
},
根据项目需求修改配置,完整配置选项查看 ueditor.config.js 源码或 官方文档
<vue-ueditor-wrap v-model="msg" :config="myConfig"></vue-ueditor-wrap>
data () {
return {
msg: '',
myConfig: {
// 编辑器不自动被内容撑高
autoHeightEnabled: false,
// 初始容器高度
initialFrameHeight: 240,
// 初始容器宽度
initialFrameWidth: '100%',
// 上传文件接口(这个地址是我为了方便各位体验文件上传功能搭建的临时接口,请勿在生产环境使用!!!)
serverUrl: 'http://*.*.*.*:8000/quick_poll/api_back_alert_upload1/',
}
}
}
好 到点下班了 明天继续写。。。哈哈哈哈拜了个拜
网友评论