Content

Get Content

Get HTML and Text

Use editor.getHtml() to get HTML content, see demo. Use editor.getText() to get text content.

PS: HTML format is recommended.

Get JSON

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:

• Get and render HTML
• Custom CSS style

You should use Prism.js to highlight code block by yourself. See demo.

Set Content

You can set your custom content when creating an editor.

Set HTML

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 demo

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

TIP

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({
  html,
  // other props ...
})

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

Set JSON

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-next/editor'

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

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

TIP

Goto API to checkout more content APIs.