wangEditor —— 轻量级 web 富文本编辑器，配置方便，使用简单。

事例

基本使用

NPM

npm i wangeditor --save

安装后几行代码即可创建一个编辑器：

    
欢迎使用 wangEditor 富文本编辑器

import E from "wangeditor"
const editor = new E("#div1")
editor.create()

CDN

设置编辑区域的高度

编辑区域高度默认为 300px ，可通过以下方式修改。

const editor = new E('#div1')

// 设置编辑区域高度为 500px
editor.config.height = 500

// 注意，先配置 height ，再执行 create()
editor.create()

菜单和编辑区域分离

如果你想要像 知乎专栏、简书、石墨、网易云笔记 这些编辑页面一样，将编辑区域和菜单分离，也可以实现。

这样，菜单和编辑器区域就是使用者可自己控制的元素，可自定义样式。例如：将菜单fixed、编辑器区域高度自动增加等。

    


    

        container 和 toolbar 分开
    
    
        
        
------ 我是分割线 ------
        
    

    
    

从上面代码可以看出，菜单和编辑区域其实就是两个单独的 ，位置、尺寸都可以随便定义。

使用 textarea

wangEditor 从 v3 版本开始不支持 textarea ，但是可以通过 onchange 来实现 textarea 中提交富文本内容。

    
欢迎使用 wangEditor 富文本编辑器

一个页面多个编辑器

wangEditor 支持一个页面创建多个编辑器。

    


    
    
    中间隔离带
    
        
第一个 demo（菜单和编辑器区域分开）
    

    
        
第二个 demo（常规）
    

    
    

设置内容

以下方式中，如果条件允许，尽量使用第一种方式，效率最高。

html 初始化内容

直接将内容写到要创建编辑器的 标签中。

    
初始化的内容
    
初始化的内容

js 设置内容

创建编辑器之后，使用 editor.txt.html(…) 设置编辑器内容。

获取 html

使用 editor.txt.html() 获取 html 。

需要注意的是：从编辑器中获取的 html 代码是不包含任何样式的纯 html，如果显示的时候需要对其中的

验证码：