vue+vue-ueditor-wrap+秀米

我们的项目中使用的是ueditor+秀米的富文本编辑器，github上的大神做了一个基于vue的ueditor的组件，能够实现双向数据绑定，可以不用费劲的getContent、setContent。就决定用这个组件 —— vue-ueditor-wrap 。so~ vue+vue-ueditor-wrap+秀米. 开始吧 ?⤵︎

一：去ueditor官网下载官方源码

https://ueditor.baidu.com/website/download.html
下载完成后，放到你的Vue项目里static下并命名为UEditor。

二：安装vue-ueditor-wrap

npm i vue-ueditor-wrap

三：引入并使用

main.js

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
// 引入ueditor的依赖文件
import '../static/UEditor/ueditor.config'
import '../static/UEditor/ueditor.all.min.js'
import '../static/UEditor/lang/zh-cn/zh-cn.js'
import '../static/UEditor/ueditor.parse.min.js'Vue.config.productionTip = false/* eslint-disable no-new */
new Vue({el: '#app',router,components: { App },template: '<App/>'
})

组件里

<template><div class="hello"><!--数据绑定--><vue-ueditor-wrap v-model="msg"></vue-ueditor-wrap><div>{{msg}}</div></div>
</template><script>
import VueUeditorWrap from 'vue-ueditor-wrap' // 引入vue-ueditor-wrap
export default {name: 'HelloWorld',components: {VueUeditorWrap   //注册组件},data () {return {msg: 'Welcome to Your Vue.js App'}}
}
</script><style scoped></style>

这些完成后，你就可以看到一个初始化ok的ueditor了，并且可以很方便的绑定想要的数据 ?
接入秀米的童鞋继续向下看?

四：在ueditor基础上接入秀米

秀米提供：秀米图文排版UEditor插件示例

在你的index.html中引用 http://xiumi.us/connect/ue/xiumi-ue-dialog-v5.js 和 http://xiumi.us/connect/ue/xiumi-ue-v5.css 也可以下载文件后放在UEditor目录下引入本地文件，这样方便修改。（我是下载后引入本地的）如下

<link rel="stylesheet" href="static/UEditor/xiumi-ue-v5.css">
<script type="text/javascript" charset="utf-8" src="static/UEditor/xiumi-ue-dialog-v5.js"></script>

下载文件 http://xiumi.us/connect/ue/xiumi-ue-dialog-v5.html 和 http://hgs.xiumi.us/uedit/dialogs/internal.js 放在你的UEditor目录下。
修改UEditor的配置（ueditor.config.js），第414行左右：将section:[] 改为section:[‘class’, ‘style’]，避免ueditor修改秀米的格式信息，造成排版错误。
在xiumi-ue-dialog-v5.js中把iframeUrl改为本地秀米H5的路径，如果你都是按照以上步骤进行那么路径将是/static/UEditor/xiumi-ue-dialog-v5.html，如果不是的话要按你自己的路径。

???到这里就是可以正常使用秀米并且有着双向数据绑定的ueditor啦。
图片上传相关功能需要后台小哥哥的协助。
其余与秀米的对接可以参考与秀米对接
还是有疑问的小盆友可以下载我上传的demo，希望可以帮助到你 ?

vue+vue-ueditor-wrap+秀米相关推荐

vue使用vue-ueditor-wrap集成秀米
vue通过UEditor集成秀米接入Ueditor vue-ueditor-wrap 接入秀米接入Ueditor UEditor是由百度web前端研发部开发所见即所得富文本web编辑器,具有轻量, ...
在vue中应用ueditor引入秀米，支持图片以及背景图抓取
当前系统中引入的是jsp的ueditor,如果你们也是使用这个,前端可以直接使用我这边配置好的,至于后端的需要开发人员自己配置,当前支持: 秀米保存后图片自动抓取(包括背景图) ueditor插入视频 ...
vue-cli 使用ueditor集成秀米富文本
前言要做一个公众号文本和官网文章的同步操作公司准备集成秀米富文本一.准备工作进入秀米官网 (https://r.xiumi.us/board/v5/2a5va/16516964) 根据文章提示下 ...
ueditor 集成秀米背景图片不显示的问题
百度的富文本集成秀米的时候遇到一个大坑,就是远程抓取图片本地化抓取不到背景图片.原因是秀米的背景用的是<section>,而不是<img>,百度抓取不到.查了很多资料也没 ...
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通知栏等推 ...
php从富文本中抓出图片url,富文本编辑器抓取秀米图片转存到七牛云
制作图文排版秀米是一个不错的平台,而百度的UEditor编辑器可以集成秀米的插件,两者结合使文章的排版变得更加的快捷方便. UEditor集成秀米教程 http://hgs.xiumi.us/uedi ...
vue项目百度ueditor编辑器集成135和秀米，主题图标美化
目录前言效果预览教程 1. 首先下载主题美化插件 2. 接入135编辑器 3. 接入秀米编辑器 4. 组件封装 5. main.js引入样式和js文件 6. 页面使用完成! 前言本文介绍vu ...
vue项目引入秀米插件
使用步骤效果图查看秀米第三方对接平台,根据步骤配置链接地址:https://ent.xiumi.us/ue/ UEditor整个文件代码附上(在第一行,叫"npm i vue-ue ...

vue+vue-ueditor-wrap+秀米

vue+vue-ueditor-wrap+秀米相关推荐

最新文章

热门文章