Docs
Serializing HTML

Serializing HTML

Copy paste from HTML to Slate.

Deserialize HTML

By default, when you paste content into the Slate editor, it will utilize the clipboard's 'text/plain'data. While this is suitable for certain scenarios, there are times when you want users to be able to paste content while preserving its formatting. To achieve this, your editor should be capable of handling 'text/html'data.
To experience the seamless preservation of formatting, simply copy and paste rendered HTML rich text content (not the source code) from another website into this editor. You'll notice that the formatting of the pasted content is maintained.

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