vue2中wangeditor富文本编辑器使用方法（详细）

一、wangeditor富文本编辑器的特点
1.基于javascript和css开发的 Web富文本编辑器， 轻量、简洁、易用
2.WangEditor富文本编辑器配置方便、使用简单、且开源免费
3.各项基本配置基本齐全，适合功能需求简单的项目构建
4.兼容性是支持IE10+的浏览器【】
5.默认正文p、字体样式以span标签的行内样式添加

6.相关链接：快速开始 | wangEditor开源 Web 富文本编辑器，开箱即用，配置简单https://www.wangeditor.com/v5/getting-started.html

二、功能介绍

下图是基本也是全部的功能点

• 包括：【标题设置、字体加粗、斜体、下划线、删除、文字颜色、背景颜色、链接、列表（有序、无序）、表情、图片（网络图片、本地上传）、表格、视频、代码块、返回上一步、返回下一步（但其实ctrl+z快捷键也可以）】
• 

三.正确用法

1.安装：npm i wangeditor --save

2.安装好之后在components下面新建一个wangEditor文件夹

3.wangEditor文件夹下面index的内容如下，直接复制粘贴上去就可以

    

    .editor {         width: 100%;         margin: auto;         position: relative;     }

4.引入到组件

import WangEditor from '/src/components/wangEditor'---------这里注意路径不要引入错了

  

用的时候如果富文本层级过高，在样式里添加上下方内容