Get Content

Get HTML and Text

Use editor.getHtml() to get HTML content, see demoopen in new window. Use editor.getText() to get text content.

PS: HTML format is recommended.


Use editor.children to get JSON content.

You can convert JSON to HTML or text format in browser and nodejs.
If in nodejs, you should exec yarn add jsdom global-jsdom firstly, then require('global-jsdom/register') in front of the below codes.

const editor = createEditor({ content }) // `content` is JSON content
const html = editor.getHtml()
const text = editor.getText()

Custom Style

editor.getHtml() can only get pure HTML, there is no inline styles. You need to define your custom style. See some demos:

You should use Prism.jsopen in new window to highlight code block by yourself. See demoopen in new window.

Set Content

You can set your custom content when creating an editor.


Be careful: wangEditor can only understand the HTML format from editor.getHtml(), but not all HTML formats.

For instance, wangEditor can understand <strong>hello</strong>, but can not understand <span style="font-weight:bold;"></span>.

Set HTML when create editor

const editor = createEditor({
  html: '<p>hello <strong>world</strong></p>', // html content, got from `editor.getHtml()`
  // other props ...

Set HTML after create editor

See demoopen in new window

editor.setHtml('<p>hello <strong>world</strong></p>')


setHtml is mainly used for re-write editor HTML content which got by editor.getHtml().
If you want to insert some HTML, use dangerouslyInsertHtml please.

Set Text

// 1. Convert text to HTML format
const text = '...' // text content
const html = text.split(/\n/).map(line => `<p>${line}</p>`).join('\n')

// 2. set HTML
const editor = createEditor({
  // other props ...

// 3. or setHtml after create editor
// editor.setHtml(html)


const editor = createEditor({
  content: [...], // JSON content, got from `editor.children`
  // other props ...

Ajax async set content

You can create editor after ajax success callback.

// pseudo code
import { IDomEditor } from '@wangeditor/editor'

let editor: IDomEditor | null = null  // TS syntax
// let editor = null                  // JS syntax

ajax(url, res => {
  editor = createEditor({
    // content or html
    // other props...


Goto API to checkout more content APIs.

Last Updated:
Contributors: 王福朋