Getting Started

If you wanna to use wangEditor in Vue or React, please read this article first, then check this article.

Create Empty Editor

Define Html Code

<div id="toolbar-container">
    <!-- for toolbar -->

<div id="editor-container">
    <!-- for editor -->

Create Editor and Toolbar

Import wangEditor

// npm
import '@wangeditor/editor/dist/css/style.css'
import { createEditor, createToolbar, IEditorConfig, IDomEditor } from '@wangeditor/editor'

// CDN
// const { createEditor, createToolbar } = window.wangEditor

Create editor and toolbar

const editorConfig: Partial<IEditorConfig> = {}
editorConfig.placeholder = 'Type here please'
editorConfig.onChange = (editor: IDomEditor) => {
    // will be trigger when content or selection changed
    console.log('content', editor.children)
    console.log('html', editor.getHtml())

const toolbarConfig: Partial<IToolbarConfig> = {}

// create editor
const editor = createEditor({
  selector: '#editor-container',
  config: editorConfig,
  mode: 'default' // or 'simple'
// create toolbar
const toolbar = createToolbar({
  selector: '#toolbar-container',
  config: toolbarConfig,
  mode: 'default' // or 'simple'

With the simple code above, you will create a basic editor.


  1. The toolbar is not necessary
  2. You can config toolbar menus manually
  3. There are many editor configs


There are to modes, see Demoopen in new window.

  • default mode, Integrate all wangEditor functions
  • simple mode, Only basic functions, but terse


No matter which mode is used, it does not affect function and config.

Use <textarea>

When editor content changed, sync to <textarea>.

<textarea id="textarea-1"></textarea>
<textarea id="textarea-2"></textarea>
editorConfig.onChange = (editor: IDomEditor) => {
    const content = editor.children
    const contentStr = JSON.stringify(content)
    document.getElementById('textarea-1').value = contentStr

    const html = editor.getHtml()
    document.getElementById('textarea-2').value = html

Size and Style

Width and Height

Width is self-adaption, 100% by default.

Height is min-height: 300px; by default, you can change it manually.

<div id="toolbar-container"></div>
<div id="editor-container" style="height: 600px;"></div>


wangEditor do not set z-index ever, you can set it yourself.

<div id="toolbar-container" style="z-index: 101;"></div>
<div id="editor-container" style="z-index: 100;"></div>


wangEditor embed full-screen menu, but there is one requirement: toolbar-container and editor-container must have same parent node.

  .full-screen-container {
    z-index: 100; /* 如有需要,可以自定义 z-index */

<div class="full-screen-container">
  <div id="toolbar-container"> <!-- for editor --> </div>
  <div id="editor-container"> <!-- for toolbar --> </div>

If you unwanted full-screen menu, you can hide this by { excludeKeys: 'fullScreen' }, see Toolbar Config.


  • You can fixed toolbar to top by define toolbar-container style.
  • You can dev an editor like Google Doc by redefine html structure and style.

Multiple Editors

You can create many editors in one page.

  <div id="toolbar-container-1"></div>
  <div id="editor-container-1"></div>


  <div id="toolbar-container-2"></div>
  <div id="editor-container-2"></div>
// create editor1
const editor1 = createEditor({
  selector: '#editor-container-1',
  mode: 'default'
// create toolbar1
const toolbar1 = createToolbar({
  editor: editor1,
  selector: '#toolbar-container-1',
  mode: 'default'

// create editor2
const editor2 = createEditor({
  selector: '#editor-container-2',
  mode: 'simple'
// create toolbar2
const toolbar2 = createToolbar({
  editor: editor2,
  selector: '#toolbar-container-2',
  mode: 'simple'
Last Updated:
Contributors: 王福朋