简介
wangEditor轻量级，小巧实用，配置方便，使用简单。可以自定义皮肤功能，免费开源。用户数量也很多，尤其是用在一些轻型环境，比如论坛社区回帖。wangEditor是国人出品的开源项目
编辑器目前种类繁杂，各有千秋根据项目功能特点选择即可。在此详细介绍wangeditor具体使用(主流好用的富文本编辑器)[https://blog.csdn.net/davidhzq/article/details/100842866]
安装依赖
npm 安装
npm i wangeditor --save
HTML
<template>
<div class="home">
<h3>wangEditor with vue</h3>
<div id="demo1"></div>
<button type="button" class="btn" @click="getEditorData">获取当前内容</button>
<h3>内容预览</h3>
<textarea name="" id="" cols="170" rows="20" readonly v-model="editorData"></textarea>
</div>
</template>
行为样式
<script>
// 引入 wangEditor
import wangEditor from 'wangeditor'
export default {
data() {
return {
editor: null,
editorData: ''
}
},
mounted() {
const editor = new wangEditor(`#demo1`)
// 配置 onchange 回调函数，将数据同步到 vue 中
editor.config.onchange = (newHtml) => {
this.editorData = newHtml
}
// 创建编辑器
editor.create()
this.editor = editor
},
methods: {
getEditorData() {
// 通过代码获取编辑器内容
let data = this.editor.txt.html()
alert(data)
}
},
beforeDestroy() {
// 调用销毁 API 对当前编辑器实例进行销毁
this.editor.destroy()
this.editor = null
}
}
</script>
<style lang="scss">
.home {
width: 1200px;
margin: auto;
position: relative;
.btn {
position: absolute;
right: 0;
top: 0;
padding: 5px 10px;
cursor: pointer;
}
h3 {
margin: 30px 0 15px;
}
}
</style>
效果
编辑器
