Vue使用富文本编辑器

安装wangegitor

控制台

npm i wangeditor --save

组件化富文本编辑器

1）在components文件夹下创建Wangedit.vue

2）目标：
2.1）能够输入；
2.2）获取到输入后的富文本(为存入数据库作准备)；
2.3）将字符串化后的富文本能够展示出正确的格式（取数据库的数据）

3）html结构

<template>
    <div>
    	//div1用来承载富文本编辑器
        <div id = "div1"></div>
        //按钮用来数据的转换
        <button @click='syncHTML'>同步内容</button>
        //展示被富文本编辑器编辑后的结果，用于存入数据库
        <textarea cols="170" rows="20" readonly v-model="textvalue"></textarea>
        //再次展示时应该按富文本展示
        <div v-html="textvalue">
        </div>
    </div>
</template>

4）js部分处理
整体情况如下

<script>