Date Structure

wangEditor is based on Slate.js, so you may learn Slate node designopen in new window first.

What

You maybe have learned editor API, let me ask you some questions.

  • editor.addMark(key, value) can set tet style, but how can I set through-line, Which key and value?
  • editor.insertNode(node) can insert a node, but how can I insert a link node, how to define the node?
  • SlateTransforms.setNodes(editor, {...}) can set node props, but how can I set line-height, how to define {...}?

This article will tell you all of the node types and props, so you can do everything by the editor API.

Getting Started

If you want to know a node structure quickly, it's very simply.

  • Create an editor and run in browser, or use demoopen in new window
  • Do something, like: bold, set color, set header ...
  • Run editor.children in browser's console

For example, you type some text, set a header or list, run editor.children then you can see it's structure

Set line height and text style, run editor.children then you can see it's structure

All Nodes Structure

See type in every source code.

Last Updated:
Contributors: 王福朋