ueditor(vue-ueditor-wrap)集成秀米踩坑记录vue-cli4

一个不断学习的前端菜鸟,欢迎指正,别喷。。。

前言

  首先, KB编辑器! ,官网都提莫的没了。然后得感谢某某某等大佬,因为确实查了好久的资料,你问我为什么不换个编辑器,???(手动问号),我没这个权力......,业务需要,开搞吧(项目是vue-cli4)。


试水

  第一选择肯定是打开ueditor官网地址看下文档吧

image

  ??????

  然后去github https://github.com/fex-team/ueditor,哦,已经放弃治疗了

image

  先按照教 readme 试试水,下载1.5.0版本代码,结合某些古代的博客,先main.js引入这个,然后引入那个。问题来了,代码中没找到这些文件,脸更黑了。

  呵,好吧,由于水平太菜,接着百度,幸运的是,找到一颗好乘凉的大树 vue-ueditor-wrap,有大佬封装了,看着大佬代码开整。

干货

  1. 安装使用 vue-ueditor-wrap

  npm i vue-ueditor-wrap 或者 yarn add vue-ueditor-wrap

  1. 下载 UEditor 资源文件

  我是用的这个大神的,https://github.com/HaoChuan9421/vue-ueditor-wrap-demo,直接拿到他的static下的UEditor文件夹(1.4.4.3),有dmeo可以参考可以省好多力气

  当然你也可以去vue-ueditor-wrap这个大神的git中下载

  下载完成以后,将UEditor文件夹放在public文件夹下(因为我是vue-cli4版本,其他版本根据情况放在static中还是public中)

  1. 引入 UEditor 资源

  在main.js中依次引入

  // 要按顺序
  import '../public/UEditor/ueditor.config.js'
  import '../public/UEditor/ueditor.all.min.js'
  import '../public/UEditor/lang/zh-cn/zh-cn.js'
  import '../public/UEditor/ueditor.parse.min.js'
  //上面提到的 1.5.0版本找不到的就是这些文件

  这里一定要 注意注意注意 路径问题

  按照HaoChuan9421这个大神说,可以不引入,因为vue-ueditor-wrap做了处理,但是我用了秀米ui插件,不引入的话,插件得单独处理,我比较懒,所以我就引入了...

image
  1. 修改UEditor部分文件

  ueditor.config.js中添加window.UEDITOR_HOME_URL = "/UEditor/"(文件上面注释中有提示)

  third-party/zeroclipboard/ZeroClipboard中修改以下部分(解决一个报错,原因不解释了,很多博客都有说,如 https://segmentfault.com/a/1190000016966347)

image
  1. 在页面中使用编辑器
  <vue-ueditor-wrap ref="editor" v-model="msg" :config="editorConfig" :destroy="true" />
  import VueUeditorWrap from 'vue-ueditor-wrap'
  components: {
    VueUeditorWrap
  },
  data() {
    return {
      msg: '<h2><img src="http://img.baidu.com/hi/jx2/j_0003.gif"/>Vue + UEditor + v-model双向绑定 + 坑比编辑器</h2>',
      // ueditor配置
      editorConfig: {
        autoHeightEnabled: true, // 自动变高
        autoFloatEnabled: true,
        initialContent: '请输入内容',
        autoClearinitialContent: true,
        initialFrameWidth: '50%', // 初始化宽
        initialFrameHeight: 200, // 初始化高
        BaseUrl: '',
        // 上传文件接口(这个地址是我为了方便各位体验文件上传功能搭建的临时接口) - 修改成自己后端地址
        serverUrl: 'http://35.201.165.105:8000/controller.php',
        // UEditor 资源文件的存放路径
        UEDITOR_HOME_URL: '/UEditor/' // 重要重要重要重要重要重要重要重要重要 必须配置好路径!!!
      }
    }
  }

  正常情况下,页面中应该可以显示编辑器了

image

  当然,如果你报下面错误的话,一定要检查检查上面各步骤的路径,说到底,这个玩意,就是路径容易出问题,其他倒是没有什么

image

下面是使用秀米ui

  1. 下载秀米资源

  参考秀米官网文档

  下载4个资源文件,放在UEditor文件夹下

  1. 引入秀米ui文件
<link rel="stylesheet" href="./UEditor/xiumi-ue-v5.css">
<script type="text/javascript" charset="utf-8" src="./UEditor/xiumi-ue-dialog-v5.js"></script>

  还是那句话,注意注意注意 路径问题

  1. 修改 xiumi-ue-dialog-v5 文件

  iframeUrl: './UEditor/xiumi-ue-dialog-v5.html',

  注意路径......

  1. 修改 ueditor.config.js

  section:['class', 'style'],

  此时,路径不出意外的话,应该是没有啥问题了

  另外: 图片上传、视频上传等改成自己服务器地址,需要后台配合修改(改第5步的 serverUrl


总结

  注意路径,放平心态,对着文档和博客啥的开搞就完了

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 202,905评论 5 476
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,140评论 2 379
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 149,791评论 0 335
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,483评论 1 273
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,476评论 5 364
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,516评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,905评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,560评论 0 256
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,778评论 1 296
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,557评论 2 319
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,635评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,338评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,925评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,898评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,142评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,818评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,347评论 2 342

推荐阅读更多精彩内容