PRO HTML Paste Processing Plugin from MSWord

Users paste a lot from Word and Excel. Jodit HTML Editor cleans up all unnecessary code and makes HTML just beautiful.

This plugin provides enhanced functionality for pasting content from Microsoft Word and Excel, ensuring clean and properly formatted HTML output.

Options

pasteFromWord.enable

• Type: boolean
• Default: false

Enables or disables the paste from Word processing functionality. By default, this feature is disabled and needs to be explicitly enabled.

Jodit.make('#editor', {
	pasteFromWord: {
		enable: true
	}
});
Copy

pasteFromWord.convertUnitsToPixel

• Type: boolean
• Default: false

When enabled, this option converts all units (cm, pt, etc.) to pixels in the pasted content.

Jodit.make('#editor', {
	pasteFromWord: {
		enable: true,
		convertUnitsToPixel: true
	}
});
Copy

pasteFromWord.allowedStyleProps

• Type: string[]
• Default: See below

A list of CSS style properties that will be preserved when pasting from Word. All other style properties will be removed.

Default value:

[
	'background',
	'background-color',
	'border',
	'border-.*',
	'color',
	'float',
	'font-family',
	'font-size',
	'font-style',
	'font-weight',
	'height',
	'line-height',
	'list-style-type',
	'margin',
	'margin-bottom',
	'margin-left',
	'margin-right',
	'margin-top',
	'padding',
	'text-align',
	'text-justify',
	'text-decoration',
	'text-indent',
	'vertical-align',
	'width'
]
Copy

You can customize this list to allow only specific style properties:

Jodit.make('#editor', {
	pasteFromWord: {
		enable: true,
		allowedStyleProps: [
			'color',
			'font-weight',
			'text-align'
		]
	}
});
Copy

Usage Examples

Basic Usage

Jodit.make('#editor', {
	pasteFromWord: {
		enable: true,
		convertUnitsToPixel: true
	}
});
Copy

Customized Style Properties

Jodit.make('#editor', {
	pasteFromWord: {
		enable: true,
		convertUnitsToPixel: true,
		allowedStyleProps: [
			'background-color',
			'color',
			'font-family',
			'font-size',
			'font-weight',
			'text-align',
			'text-decoration'
		]
	}
});
Copy

Disabling the Plugin

To completely disable the plugin:

Jodit.make('#editor', {
	disablePlugins: ['pasteFromWordPro']
});
Copy

Integration with Core Jodit Options

The plugin works in combination with the following core Jodit options:

askBeforePasteFromWord

• Type: boolean
• Default: true

When enabled, Jodit will show a dialog asking how to paste content from Word.

defaultActionOnPaste / defaultActionOnPasteFromWord

• Type: number
• Default: Jodit.INSERT_AS_HTML

Determines the default action when pasting content.

Example of integration with core options:

Jodit.make('#editor', {
	askBeforePasteFromWord: false,
	pasteFromWord: {
		enable: true,
		convertUnitsToPixel: true
	},
	beautifyHTML: false,
	defaultActionOnPaste: Jodit.INSERT_AS_HTML
});
Copy

Styles for Nested Lists

In order for the counters to work correctly with nested lists (e.g., 1, 1.1, 1.2), you must include the following CSS in your stylesheet:

ul ol[data-list-style-type='decimal'],
ol ol[data-list-style-type='decimal'] {
	counter-reset: item;
}

ol ol[data-list-style-type='decimal'] > li,
ul ol[data-list-style-type='decimal'] > li {
	display: block;
}

ol ol[data-list-style-type='decimal'] > li:before,
ul ol[data-list-style-type='decimal'] > li:before {
	content: counters(item, '.') '. ';
	counter-increment: item;
}
Copy

This CSS ensures that nested lists are properly formatted with hierarchical numbering.

How It Works

1. When content is pasted from Word, the plugin detects it based on specific markers in the HTML
2. The plugin then processes the content, removing unnecessary markup and preserving only the allowed style properties
3. If convertUnitsToPixel is enabled, all units (cm, pt, etc.) are converted to pixels
4. Special handling is applied for lists, tables, and other complex structures
5. The cleaned HTML is then inserted into the editor

This process ensures that content pasted from Word is clean, consistent, and properly formatted according to your specifications.