富文本wangeditor的使用

文档网址：https://www.wangeditor.com/

1 安装

npm i wangeditor --save

2 导入

import E from "wangeditor"

3 准备数据

state = {

editor: null,

formData: {

newHtml: newHtml,

},

}

4 准备结构

<div id="editor"></div>

5 配置富文本编辑器

setEditor = () => {

if (!this.state.editor) {

this.setState(

{

editor: new E("#editor"),

},

() => {

const { editor } = this.state

editor.config.menus = [

"bold",//加粗

"head",//标题h1-h6

"italic",//斜体

"justify",//对齐方式

"fontSize",//字体大小

"image",//上传图片

"video",//视频

] // 配置菜单栏，删减菜单，调整顺序

editor.config.showFullScreen = false