Docx
The Deserialize Docx plugin allows you to copy and paste content from Microsoft Word documents directly into your Plate editor.
This functionality makes it easy to integrate formatted text and other content from Word documents into your editor without losing formatting or structure.
#
DemoTo see the Deserialize Docx plugin in action, simply copy content from a Microsoft Word document and paste it into your Plate editor.
The plugin will automatically preserve the formatting and structure of the pasted content.
import React from 'react'; import { createAlignPlugin, createDeserializeDocxPlugin, createFontBackgroundColorPlugin, createFontColorPlugin, createFontFamilyPlugin, createFontSizePlugin, createFontWeightPlugin, createHorizontalRulePlugin, createImagePlugin, createIndentListPlugin, createIndentPlugin, createLineHeightPlugin, createTablePlugin, createTextIndentPlugin, Plate, } from '@udecode/plate'; import { createJuicePlugin } from '@udecode/plate-juice'; import { alignPlugin } from './align/alignPlugin'; import { basicNodesPlugins } from './basic-nodes/basicNodesPlugins'; import { editableProps } from './common/editableProps'; import { plateUI } from './common/plateUI'; import { indentPlugin } from './indent/indentPlugin'; import { lineHeightPlugin } from './line-height/lineHeightPlugin'; import { deserializeDocxValue } from './serializing-docx/deserializeDocxValue'; import { createMyPlugins, MyValue } from './typescript/plateTypes'; const plugins = createMyPlugins( [ ...basicNodesPlugins, createImagePlugin(), createHorizontalRulePlugin(), createLineHeightPlugin(lineHeightPlugin), // createLinkPlugin(), createTablePlugin(), createAlignPlugin(alignPlugin), createFontBackgroundColorPlugin(), createFontFamilyPlugin(), createFontColorPlugin(), createFontSizePlugin(), createFontWeightPlugin(), createIndentListPlugin(), createIndentPlugin(indentPlugin), createTextIndentPlugin(), createDeserializeDocxPlugin(), createJuicePlugin(), ], { components: plateUI, } ); export default () => ( <Plate<MyValue> editableProps={editableProps} plugins={plugins} initialValue={deserializeDocxValue} /> );
#
InstallationFollow these steps to integrate the deserialize Docx plugin into your Plate editor:
- Install the required packages:
- npm
- Yarn
- Import the plugin and add it to your plugin list:
Given pasted HTML, @udecode/plate-juice
is used to inline CSS properties into the style
attribute.