Docs
Serializing HTML

Serializing HTML

Copy paste from HTML to Slate.

Loading...

Features

  • Convert a Slate value to a HTML string.
  • Convert a HTML string to a Slate value.

Installation

npm install @udecode/plate-serializer-html

Usage

HTML -> Slate

createDeserializeHTMLPlugin is included in the core plugins of Plate, so you don't need to import it manually.

Slate -> HTML

An editor instance is required to serialize a Slate value to HTML. If you need to use serializeHtml in a context where no editor is available, you can create one using createPlateEditor({ plugins }). Include the plugins and components necessary for rendering all node types used in your Slate value.

// ...
import { createPlugins } from '@udecode/plate-common';
import { serializeHtml } from '@udecode/plate-serializer-html';
import { DndProvider } from 'react-dnd';
import { HTML5Backend } from 'react-dnd-html5-backend';
 
const plugins = createPlugins(
  [
    // ...plugins
  ],
  {
    components: createPlateUI(),
  }
);
 
const editor = createPlateEditor({ plugins });
 
const html = serializeHtml(editor, {
  nodes: editor.children,
  // if you use @udecode/plate-dnd
  dndWrapper: (props) => <DndProvider backend={HTML5Backend} {...props} />,
});

API

serializeHtml

Convert Slate Nodes into HTML string.

Parameters

Collapse all

    The Slate editor instance.

    Options to control the HTML serialization process.

Returns

Collapse all

    A HTML string representing the Slate nodes.

Serializing DOCXSerializing MD