vue wangEditor组件

1.安装wangEditor

npm i wangeditor --save

2.在components下面创建文件夹：wangEditor

3.index.vue中的代码：

<template><div :class="prefixCls"><div ref="editor" class="editor-wrapper"></div></div>
</template><script>
import WEditor from "wangeditor"export default {name: "WangEditor",props: {className:String, //接收父组件上面的classNameprefixCls: {type: String,default: "my-editor"},// eslint-disable-next-linevalue: {type: String,default: ""}},data() {return {editor: null};},mounted() {this.initEditor();console.log(this.className,'value')},methods: {initEditor() {this.editor = new WEditor(this.$refs.editor);// 配置菜单栏，设置不需要的菜单this.editor.config.excludeMenus = ['image','video','code']this.editor.config.onchange = html => {this.$emit("change", html, this.className); // 将内容同步到父组件中，这里的className是一个信号吧，一个页面有多个编辑器的时候需要使用这个};// 创建富文本编辑器this.editor.create();this.editor.txt.html(this.value)  //设置编辑器内容，不然打开编辑页面的时候编辑器里面一直是空}}
};
</script><style lang="less" scoped>
.my-editor {.editor-wrapper {text-align: left;}
}
</style>

4.父组件代码：

<editor-barv-model="data.commodity_information"className="commodity_information"@change="getEditor"v-if="isOk"ref="weditor"></editor-bar>import EditorBar from '@/components/WangEditor' //引用组件
components: {EditorBar},
data结构：
data: {commodity_information:''},
isOk:false  //控制编辑器的调用，因为只有先获取编辑页面的数据，然后调用编辑器，才能将value值传入到子组件中methods:
// 获取富文本内容getEditor(value, className) {this.data[className] = value;}//获取页面数据
async initData() {this.isOk = falsethis.fetchData(this.id)},fetchData(id) {getCommodityDetail(id).then(response => {// this.parentid = response.data.parentidthis.data = response.datathis.isOk = true}).catch(err => {console.log(err)})},created:
created() {this.id = this.item.id// console.log('eidt-id',this.item.id)this.initData()  //打开编辑页面的时候渲染数据},

vue wangEditor组件相关推荐

Vue: wangEditor 编辑器使用示例
开源 Web 富文本编辑器,开箱即用,配置简单文档 https://doc.wangeditor.com/ wangEditor 5 https://www.wangeditor.com/ wang ...
Vue异步组件Demo
Vue异步组件Demo 在大型应用中,我们可能需要将应用拆分为多个小模块,按需从服务器下载.为了进一步简化,Vue.js 允许将组件定义为一个工厂函数,异步地解析组件的定义.Vue.js 只在组件需要 ...
Vue父组件网络请求回数据后再给子组件传值demo示例
QQ技术交流群 173683866 526474645 欢迎加入交流讨论,打广告的一律飞机票这里demo使用延迟执行模拟网络请求:父组件给子组件需要使用自定义属性 Prop ,下面是示例代码: &l ...
Vue中组件数据的传递
Vue中组件的作用域是隔离的,父组件中的数值子组件看不到!也就是说,用angular作比喻,组件的scope天生是scope:()的! 如果父组件需要往子组件中传数据,此时应该使用标签属性: < ...
vue中子组件和子组件之间怎么通信_vue.js组件之间如何通信？
vue.js组件之间如何通信?下面本篇文章就来给大家介绍一下Vue.js组件间通信方式.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. 平时在使用Vue框架的业务开发中,组件不仅仅要 ...
从零实现Vue的组件库（十）- Select 实现
当选项过多时,使用下拉菜单展示并选择内容. Select 组件主要特点在于: 数据双向绑定,下拉列表变动时,选中项如何回显: 单选.多选的区分,以及对应处理. 1. 实例代码 <fat-sel ...
开源Vue表格组件，表格插件源码
开源Vue表格组件,表格插件源码前言: 关于html里面原生的table,通常满足不了程序员的要求.所以开发了一款表格插件,其功能有: 1 导入json格式数据后,自动填充表格.表格长宽自适应.排 ...
构建你的第一个Vue.js组件
我记得当时我拿起CakePHP,我很喜欢,开始使用它是多么容易.这些文档不仅结构合理,详尽无遗,而且用户友好.多年以后,这正是我在Vue.js中感受到的.然而,与Cake相比,Vue文档仍然缺少一件事 ...
Vue父组件和子组件之间传递数据
Vue父组件和子组件之间传递数据 klmhly 已关注 2018.05.19 19:56* 字数 367 阅读 23评论 0喜欢 0 一.概念解析挂载点: Vue实例的el属性对应的id,vue只会 ...

vue wangEditor组件

vue wangEditor组件相关推荐

最新文章

热门文章