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>

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

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({
  editor,
  selector: '#toolbar-container',
  config: toolbarConfig,
  mode: 'default' // or 'simple'
})

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

TIP

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

Mode

There are to modes, see Demoopen in new window.

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

TIP

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>

Z-Index

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>

Full-Screen

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

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

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

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

Others

  • 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>
  <div id="toolbar-container-1"></div>
  <div id="editor-container-1"></div>
</div>

<hr>

<div>
  <div id="toolbar-container-2"></div>
  <div id="editor-container-2"></div>
</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: 王福朋