当前位置:首页 » 《随便一记》 » 正文

vue使用百度富文本编辑器(ueditor)

20 人参与  2022年07月21日 16:49  分类 : 《随便一记》  评论

点击全文阅读


vue使用百度富文本编辑器(ueditor)

前言:
最近项目中用到ueditor,但从来没有在vue上使用过,于是就简单尝试,但是始终不成功。搜索了几乎所有博客,但是基本都是从一个地方copy复制的!!!
关键还都是错的,我的妈呀,真的受不了,被误导了好久,最后总算搞出来了。
个人觉得博客是知识的传播载体,书写的时候还是应该带有责任感,而不是只会机械的复制粘贴,自己会的就是会,不会的就是不会,不应该做“南郭先生”。衷心的希望编辑博客的同学,在书写个人技术博客时还是负点责任,毕竟你是一个导师的角色。
言归正传,因为这个功能很简单,但被误导好久所以有点火大,好吧继续讲安装和使用的操作。

操作大纲:

1.进入官网或者github下载源码2.使用grunt编译3.引入`public/static`文件夹4.安装`vue-ueditor-wrap`5.组件中引入,自定义组件

1.进入官网或者github下载源码

地址:https://github.com/fex-team/ueditor

2.使用grunt编译

grunt是什么

全局安装grunt

npm install -g grunt-cli

将下载好的ueditor压缩包解压(我下载的zip格式);

使用vscode(或其他)开发工具进入目录,输入命令npm install 安装依赖;

依赖安装好以后,使用命令grunt default进行编译;

进入编译后生成的dist目录中复制utf8-php目录到vue项目的static/public 目录中,修改utf8-php目录名为UEditor

注意:

vue-cli2中我们放入的是static文件夹,设置UEDITOR_HOME_URL/static/UEditor/

vue-cli3中放入的是public文件夹,设置UEDITOR_HOME_URL/UEditor/

例如:

在这里插入图片描述

4.安装vue-ueditor-wrap

npm install vue-ueditor-wrap

5.组件中引入,自定义组件

引入组件:

<vue-ueditor-wrap v-model="dataStr" :config="myConfig"></vue-ueditor-wrap>import VueUeditorWrap from 'vue-ueditor-wrap'components: {  VueUeditorWrap}

参数配置:

data () {  return {    dataStr: '我是渲染字段',    myConfig: {      // 编辑器不自动被内容撑高      autoHeightEnabled: false,      // 初始容器高度      initialFrameHeight: 400,      // 初始容器宽度      initialFrameWidth: '100%',      // 上传文件接口(这个地址是我为了方便各位体验文件上传功能搭建的临时接口,请勿在生产环境使用!!!)      serverUrl: 'http://127.0.0.1:8080/ueditor',      // UEditor 资源文件的存放路径,如果你使用的是 vue-cli 生成的项目,通常不需要设置该选项,vue-ueditor-wrap 会自动处理常见的情况,如果需要特殊配置,参考下方的常见问题2      UEDITOR_HOME_URL: '/static/UEditor/'    }  }}

OK,结束,效果如下:

在这里插入图片描述


点击全文阅读


本文链接:http://zhangshiyu.com/post/43647.html

<< 上一篇 下一篇 >>

  • 评论(0)
  • 赞助本站

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

最新文章

  • 你惹她干啥她疯起来嘎乱杀结局+番外+完结(楚瑶)全书浏览_你惹她干啥她疯起来嘎乱杀结局+番外+完结全书浏览
  • 高考分数出来那天,全家哭着求我原谅后续+番外_何思涵妹妹何思墨未删减_小说后续在线阅读_无删减免费完结_
  • 婚礼前夜未婚夫喂我安眠药,只为让养妹当新娘独家番外_许绍宁养妹全文_小说后续在线阅读_无删减免费完结_
  • 以身入局,我要掀翻这座城的天结局+番外+续集(程少云阮朵)_以身入局,我要掀翻这座城的天结局+番外+续集(程少云阮朵)
  • 出狱后,真千金手撕白莲杀疯了全文免费阅读无弹窗大结局_秦季姜沁最新章节列表_笔趣阁(出狱后,真千金手撕白莲杀疯了:完结+结局+番外)
  • 似锦的夫君停妻另娶挚友遗孀后,我杀疯了贺朝朝贺凌洲全书在线
  • 今夜雨将至(安佩项齐晟)_今夜雨将至
  • 暗恋逢光(江司聿夏未央)全书浏览_暗恋逢光全书浏览
  • 全文季总他图谋已久列表(秦韵季野)列表_全文季总他图谋已久列表
  • 重回高考前一天,我不再阻止同学们去参加班花组织的成人礼高口碑_林绾绾绾孟瑶故事会_小说后续在线阅读_无删减免费完结_
  • 全文最终还是失去你+结局(苏棠月靳延)列表_全文最终还是失去你+结局
  • 热文推荐心机美人攀高枝记:全文+番外(苏莞丝薛赜礼)书荒必看列表

    关于我们 | 我要投稿 | 免责申明

    Copyright © 2020-2022 ZhangShiYu.com Rights Reserved.豫ICP备2022013469号-1