Vue使用wangEditor 封装成独立组件实现富文本编辑器

1.使用npm安装:

npm install wangeditor

2.将编辑器封装一个组件，创建editor.vue组件:

<template><div id="editor"></div>
</template><script>import E from 'wangeditor'export default {data() {return {editor: ""}},methods: {init() {const _this = this;this.editor = new E('#editor');this.setMenus();//设置菜单this.editor.create();//创建编辑器this.editor.change = function() { // 这里是change 不是官方文档中的 onchangeconsole.log(this.txt.html());// 编辑区域内容变化时，实时打印出当前内容_this.$emit('changeHtml', this.txt.html());}},setMenus() {this.editor.customConfig.menus = ['head',  // 标题'bold',  // 粗体'fontSize',  // 字号'fontName',  // 字体'italic',  // 斜体'underline',  // 下划线'strikeThrough',  // 删除线'foreColor',  // 文字颜色'backColor',  // 背景颜色'link',  // 插入链接'list',  // 列表'justify',  // 对齐方式'image',  // 插入图片'table',  // 表格'undo',  // 撤销'redo'  // 重复]},getHtml() {return this.editor.txt.html();},setHtml(txt) {this.editor.txt.html(txt);}},mounted() {this.$nextTick(function() {this.init();});}}
</script>

3.在父组件中使用，引入editor子组件：

<template><div><editor ref="editor"></editor><button @click="save">保存</button></div>
</template><script>
import editor from '@/components/common/editor'
export default {components:{editor},data () {return {myeditor:"<p>dfasdfasdfsad</p>",}},methods:{init(){this.$refs.editor.setHtml(this.myeditor);},save(){this.myeditor=this.$refs.editor.getHtml();console.log(this.myeditor)}},mounted () {this.$nextTick(function() {this.init();});}
}
</script>

Vue使用wangEditor 封装成独立组件实现富文本编辑器相关推荐

【uniapp-内置组件editor富文本编辑器】
在b站跟着咸虾米老师学的 editor组件 <template><view class="edit"><view class="title& ...
wangEditor - 支持word上传的富文本编辑器
由于工作需要必须将word文档内容粘贴到编辑器中使用但发现word中的图片粘贴后变成了file:///xxxx.jpg这种内容,如果上传到服务器后其他人也访问不了,网上找了很多编辑器发现没有一个能直 ...
vue富文本编辑器 Vue-Quill-Editor
主流富文本编辑器对比前言:vue中很多项目都需要用到富文本编辑器,在使用了ueditor和tinymce后,发现并不理想.所以果断使用vue-quill-editor来实现. wangEditor( ...
「newbee-mall新蜂商城开源啦」页面优化，最新版 wangEditor 富文本编辑器整合案例...
在开源项目达到一定规模时,社区就会给出非常多的反馈,想要开源保持长久的生命力和正向的影响力,定期维护和更新是十分必要的.同时,从另一个角度来说,这也是对该开源项目使用者负责. 1 新蜂商城开源项目的重 ...
Vue中引入富文本编辑器
这里使用的是 vue-quill-editor 富文本组件先安装一下: npm i vue-quill-editor -s 下载之后去components文件夹中新建一个文件夹 KEditor,然 ...
使用wangEditor富文本编辑器上传图片和文字
"刘郎已恨蓬山远,更隔蓬山一万重" 序现在做的是从web端给眼镜端发送消息,其实就是web端把消息存到数据库,然后眼镜从数据库获取消息即可.现在在web端的输入框需要直接复制图片 ...
富文本编辑器wangEditor的使用（即学即用）
介绍 wangEditor 是一款基于JavaScript和CSS开发的Web富文本编辑器,其具有轻量级.简洁.易用的特点.当然,市面上有许多别的富文本编辑器,各有特点,本文专注于介绍wangEdit ...
Vue封装WangEditor富文本编辑器
Vue中很多用vue-quill-editor编辑器的,但是感觉并不是很好用,于是决定使用以前感觉不错的WangEditor编辑器. 1.安装WangEditor npm install wanged ...
VisionPro联合C#编程，康耐视cognex，程序案例针对VisionPro联合C#框架搭建，封装成独立控件（控件如主图所示）
VisionPro联合C#编程,康耐视cognex,程序案例针对VisionPro联合C#框架搭建, 封装成独立控件(控件如主图所示)开发项目时将控件拖出,简单几句代码即可实现框架搭建.简单直接,对 ...

Vue使用wangEditor 封装成独立组件实现富文本编辑器

Vue使用wangEditor 封装成独立组件实现富文本编辑器相关推荐

最新文章

热门文章