Getting Started

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

Create Empty Editor

You can see demoopen in new window page source code.

Import CSS and define style

<link href="" rel="stylesheet">
  #editor—wrapper {
    border: 1px solid #ccc;
    z-index: 100; /* If you need */
  #toolbar-container { border-bottom: 1px solid #ccc; }
  #editor-container { height: 500px; }

Define Html Code

<div id="editor—wrapper">
    <div id="toolbar-container"><!-- toolbar --></div>
    <div id="editor-container"><!-- editor --></div>


Import JS and create editor

<script src=""></script>
const { createEditor, createToolbar } = window.wangEditor

const editorConfig = {
    placeholder: 'Type here...',
    onChange(editor) {
      const html = editor.getHtml()
      console.log('editor content', html)
      // You can sync HTML to <textarea>

const editor = createEditor({
    selector: '#editor-container',
    html: '<p><br></p>',
    config: editorConfig,
    mode: 'default', // or 'simple'

const toolbarConfig = {}

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


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

Next Todo

If you want a completed editor, you may need to the following work

Last Updated:
Contributors: 王福朋