vue UEditor集成秀米

vue 集成UEditor +秀米，网上的资料比较少，记录下这个过程。

首先，感谢github上某大神的组件 vue-ueditor-wrap，大家感觉有用，给大神点个star吧。

第一步：下载大神的代码，解压，找到如下目录：

第二步：解压utf8-jsp.zip,然后把解压后的文件，在自己项目static目录下建一个目录名为UEditor,并把刚刚解压后的文件复制到该目录下。结果如图：

第三步：安装依赖

npm i vue-ueditor-wrap

第四步：在需要富文本页面引用vue-ueditor-wrap

import VueUeditorWrap from 'vue-ueditor-wrap'

第五步：注册组件，及使用

components: {VueUeditorWrap
},
data() {return {msg: '',modalName:"Image",show:true,myConfig: {autoHeightEnabled:false,autoHeight: false, // 初始容器宽度initialFrameWidth: '100%',initialFrameHeight:600, // 上传文件接口（这个地址是我为了方便各位体验文件上传功能搭建的临时接口，请勿在生产环境使用！！！）serverUrl: 'https://qasp.yhcrm.cn/chatapi/file/ossUpload',// UEditor 资源文件的存放路径，如果你使用的是 vue-cli 生成的项目，通常不需要设置该选项，vue-ueditor-wrap 会自动处理常见的情况，如果需要特殊配置，参考下方的常见问题2UEDITOR_HOME_URL: '/static/UEditor/'}}},

<vue-ueditor-wrap ref="editor" v-model="msg" :config="myConfig"  ></vue-ueditor-wrap>

启动项目出现UEditor,集成成功。

接下来，集成秀米。
首先，下载秀米的几个文件，有几个文件比较难找，我已上传到csdn,地址如下：
https://download.csdn.net/download/weixin_44037376/11636583
接着把文件下载下来，放到项目的static/UEditor/dialogs 目录下
最后在编辑页面引入。

import '../../static/UEditor/ueditor.config.js'
import '../../static/UEditor/ueditor.all.min.js'
import '../../static/UEditor/dialogs/xiumi-ue-dialog-v5.js'
import '../../static/UEditor/dialogs/xiumi-ue-v5.css'

启动，多出一个秀米的logo,点击弹出秀米编辑页面。

end!!!

vue UEditor集成秀米相关推荐

vue-cli 使用ueditor集成秀米富文本
前言要做一个公众号文本和官网文章的同步操作公司准备集成秀米富文本一.准备工作进入秀米官网 (https://r.xiumi.us/board/v5/2a5va/16516964) 根据文章提示下 ...
ueditor 集成秀米背景图片不显示的问题
百度的富文本集成秀米的时候遇到一个大坑,就是远程抓取图片本地化抓取不到背景图片.原因是秀米的背景用的是<section>,而不是<img>,百度抓取不到.查了很多资料也没 ...
vue使用vue-ueditor-wrap集成秀米
vue通过UEditor集成秀米接入Ueditor vue-ueditor-wrap 接入秀米接入Ueditor UEditor是由百度web前端研发部开发所见即所得富文本web编辑器,具有轻量, ...
ueditor（vue-ueditor-wrap）集成秀米全过程以及遇到的问题
1.ueditor(vue-ueditor-wrap)集成秀米踩坑记录链接如下: https://www.jianshu.com/p/af5e935ea506 第一选择肯定是打开ueditor官网地 ...
在vue中应用ueditor引入秀米，支持图片以及背景图抓取
当前系统中引入的是jsp的ueditor,如果你们也是使用这个,前端可以直接使用我这边配置好的,至于后端的需要开发人员自己配置,当前支持: 秀米保存后图片自动抓取(包括背景图) ueditor插入视频 ...
Neditor集成秀米
首先去秀米官网下载需要的四个文件,这里做的下载用户体验非常坏死,只有一个HTML文件可以直接下载,剩下的需要访问只能在浏览器中打开,而且还有乱码,那么这里涉及到一个浏览器转码首先用火狐浏览器访问文件 ...
vue项目引入秀米插件
使用步骤效果图查看秀米第三方对接平台,根据步骤配置链接地址:https://ent.xiumi.us/ue/ UEditor整个文件代码附上(在第一行,叫"npm i vue-ue ...
php从富文本中抓出图片url,富文本编辑器抓取秀米图片转存到七牛云
制作图文排版秀米是一个不错的平台,而百度的UEditor编辑器可以集成秀米的插件,两者结合使文章的排版变得更加的快捷方便. UEditor集成秀米教程 http://hgs.xiumi.us/uedi ...
Vue+UEditor+秀米
一.下载Ueditor相关静态文件存放位置去Ueditor官网下载相关资源(本文下载的1.4.3.3版本): 下载之后,把资源放到 /static/ueditor/ 目录下.文档结构如下: ![在这 ...
手机token记录、支付宝、个推、goeasy、手机前端框架、阿里大于、百度编辑器、秀米集成解决方案
goeasy:web页面推送解决方案包名:goeasy jar:goeasy-sdk-0.3.5.jar gson-2.3.1.jar slf4j-api-1.7.2.jar 个推:app通知栏等推 ...

vue UEditor集成秀米

vue UEditor集成秀米相关推荐

最新文章

热门文章