美文网首页
Django + VueCli + Ueditor编辑器的懒人教

Django + VueCli + Ueditor编辑器的懒人教

作者: 叶叶阿姨 | 来源:发表于2020-03-25 18:32 被阅读0次

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

78832734-7A64-4FB3-A426-F0132570B981.png
下载下来后解压 改名为UE放在public下 如图:

放好了后在在需要的地方加入这个东西
  <VueUeditorWrap/>
9171B17A-8128-449F-821E-2EBAD62E14CD.png

然后呢在导入

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/',
    }
  }
}

好 到点下班了 明天继续写。。。哈哈哈哈拜了个拜

相关文章

网友评论

      本文标题:Django + VueCli + Ueditor编辑器的懒人教

      本文链接:https://www.haomeiwen.com/subject/lumxuhtx.html