How to use roosterjs-editor-plugins - 10 common examples
To help you get started, we’ve selected a few roosterjs-editor-plugins examples, based on popular ways it is used in public projects.
Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.
microsoft / roosterjs-react / packages / roosterjs-react-editor / lib / components / LeanRooster.tsx View on Github 
private _createEditorOptions(): EditorOptions {
const {
plugins: additionalPlugins = [],
undo = new Undo(),
defaultFormat = {},
contentEditFeatures,
enableRestoreSelectionOnFocus,
coreApiOverride,
sanitizeAttributeCallbacks
} = this.props;
const plugins: EditorPlugin[] = [
new ContentEdit({ ...getDefaultContentEditFeatures(), defaultShortcut: false, smartOrderedList: true, ...contentEditFeatures }),
new HyperLink(this._hyperlinkToolTipCallback, undefined, this._onHyperlinkClick),
new Paste(null, { istemptitle: v => v, ...sanitizeAttributeCallbacks }),
...additionalPlugins
];
const disableRestoreSelectionOnFocus = !enableRestoreSelectionOnFocus;
// Important: don't set the initial content, the content editable already starts with initial HTML content
return { plugins, defaultFormat, undo, disableRestoreSelectionOnFocus, omitContentEditableAttributeChanges: true /* avoid unnecessary reflow */, coreApiOverride };
}private _createEditorOptions(): EditorOptions {
const {
plugins: additionalPlugins = [],
undo = new Undo(),
defaultFormat = {},
contentEditFeatures,
enableRestoreSelectionOnFocus,
coreApiOverride,
sanitizeAttributeCallbacks
} = this.props;
const plugins: EditorPlugin[] = [
new ContentEdit({ ...getDefaultContentEditFeatures(), defaultShortcut: false, smartOrderedList: true, ...contentEditFeatures }),
new HyperLink(this._hyperlinkToolTipCallback, undefined, this._onHyperlinkClick),
new Paste(null, { istemptitle: v => v, ...sanitizeAttributeCallbacks }),
...additionalPlugins
];
const disableRestoreSelectionOnFocus = !enableRestoreSelectionOnFocus;
// Important: don't set the initial content, the content editable already starts with initial HTML content
return { plugins, defaultFormat, undo, disableRestoreSelectionOnFocus, omitContentEditableAttributeChanges: true /* avoid unnecessary reflow */, coreApiOverride };
}private _createEditorOptions(): EditorOptions {
const {
plugins: additionalPlugins = [],
undo = new Undo(),
defaultFormat = {},
contentEditFeatures,
enableRestoreSelectionOnFocus,
coreApiOverride,
sanitizeAttributeCallbacks
} = this.props;
const plugins: EditorPlugin[] = [
new ContentEdit({ ...getDefaultContentEditFeatures(), defaultShortcut: false, smartOrderedList: true, ...contentEditFeatures }),
new HyperLink(this._hyperlinkToolTipCallback, undefined, this._onHyperlinkClick),
new Paste(null, { istemptitle: v => v, ...sanitizeAttributeCallbacks }),
...additionalPlugins
];
const disableRestoreSelectionOnFocus = !enableRestoreSelectionOnFocus;
// Important: don't set the initial content, the content editable already starts with initial HTML content
return { plugins, defaultFormat, undo, disableRestoreSelectionOnFocus, omitContentEditableAttributeChanges: true /* avoid unnecessary reflow */, coreApiOverride };
}function assemblePluginsString(plugins: EditorPlugin[], features: ContentEditFeatures): string {
if (plugins) {
let contentEditOptions = '';
let pluginsString = '';
if (features) {
pluginsString += 'var options = roosterjsPlugins.getDefaultContentEditFeatures();\n';
let defaultFeatures = getDefaultContentEditFeatures();
for (let key of Object.keys(defaultFeatures)) {
if (key != 'smartOrderedListStyles' && features[key] != defaultFeatures[key]) {
pluginsString += 'options.' + key + ' = ' + (features[key] ? 'true' : 'false') + ';\n';
}
}
contentEditOptions += ' new roosterjsPlugins.ContentEdit(options),\n';
} else {
contentEditOptions = ' new roosterjsPlugins.ContentEdit(),\n';
}
pluginsString += 'var plugins = [\n';
plugins.forEach(plugin => {
if (plugin instanceof Watermark) {
pluginsString += " new roosterjsPlugins.Watermark('Type content here...'),\n";
} else if (plugin instanceof ImageResize) {
pluginsString += ' new roosterjsImageResizePlugin.ImageResize(),\n';features.indentWhenTab = (document.getElementById('indentWhenTabCheckbox') as HTMLInputElement).checked;
features.outdentWhenShiftTab = (document.getElementById('outdentWhenShiftTabCheckbox') as HTMLInputElement).checked;
features.outdentWhenBackspaceOnEmptyFirstLine = (document.getElementById('outdentWhenBackspaceOnEmptyFirstLineCheckbox') as HTMLInputElement).checked;
features.outdentWhenEnterOnEmptyLine = (document.getElementById('outdentWhenEnterOnEmptyLineCheckbox') as HTMLInputElement).checked;
features.mergeInNewLineWhenBackspaceOnFirstChar = (document.getElementById('mergeInNewLineWhenBackspaceOnFirstCharCheckbox') as HTMLInputElement).checked;
features.unquoteWhenBackspaceOnEmptyFirstLine = (document.getElementById('unquoteWhenBackspaceOnEmptyFirstLineCheckbox') as HTMLInputElement).checked;
features.unquoteWhenEnterOnEmptyLine = (document.getElementById('unquoteWhenEnterOnEmptyLineCheckbox') as HTMLInputElement).checked;
features.autoBullet = (document.getElementById('autoBulletCheckbox') as HTMLInputElement).checked;
features.tabInTable = (document.getElementById('tabInTableCheckbox') as HTMLInputElement).checked;
features.upDownInTable = (document.getElementById('upDownInTableCheckbox') as HTMLInputElement).checked;
features.unlinkWhenBackspaceAfterLink = (document.getElementById('unlinkWhenBackspaceAfterLinkCheckbox') as HTMLInputElement).checked;
features.defaultShortcut = (document.getElementById('defaultShortcutCheckbox') as HTMLInputElement).checked;
features.smartOrderedList = (document.getElementById('smartOrderedListCheckbox') as HTMLInputElement).checked;
plugins.push(new ContentEdit(features));
let defaultFeatures = getDefaultContentEditFeatures();
let keys = Object.keys(defaultFeatures);
for (let key of keys) {
if (key != 'smartOrderedListStyles' && features[key] != defaultFeatures[key]) {
featuresChanged = true;
break;
}
}
}
if ((document.getElementById('watermarkCheckbox') as HTMLInputElement).checked) {
plugins.push(new Watermark('Type content here...'));
}
if ((document.getElementById('imageResizeCheckbox') as HTMLInputElement).checked) {
plugins.push(new ImageResize());
}private initEditor() {
let pluginList = this.state.pluginList;
editorInstanceToggleablePlugins = {
hyperlink: pluginList.hyperlink ? new HyperLink(this.getLinkCallback()) : null,
paste: pluginList.paste ? new Paste() : null,
contentEdit: pluginList.contentEdit
? new ContentEdit(this.getContentEditOptions())
: null,
watermark: pluginList.watermark ? new Watermark(this.state.watermarkText) : null,
imageResize: pluginList.imageResize ? new ImageResize() : null,
tableResize: pluginList.tableResize ? new TableResize() : null,
pickerPlugin: pluginList.pickerPlugin
? new PickerPlugin(new SampleColorPickerPluginDataProvider(), {
elementIdPrefix: 'samplepicker-',
changeSource: 'SAMPLE_COLOR_PICKER',
triggerCharacter: ':',
isHorizontal: true,
})
: null,
customReplace: pluginList.customReplace ? new CustomReplacePlugin() : null,
};
let plugins = [
...Object.keys(editorInstanceToggleablePlugins).map(export default function createEditor(
contentDiv: HTMLDivElement,
additionalPlugins?: EditorPlugin[],
initialContent?: string
): Editor {
let plugins: EditorPlugin[] = [new HyperLink(), new Paste(), new ContentEdit()];
if (additionalPlugins) {
plugins = plugins.concat(additionalPlugins);
}
let options: EditorOptions = {
plugins: plugins,
initialContent: initialContent,
defaultFormat: {
fontFamily: 'Calibri,Arial,Helvetica,sans-serif',
fontSize: '11pt',
textColor: '#000000',
},
};
return new Editor(contentDiv, options);
}if ((document.getElementById('contentEditCheckbox') as HTMLInputElement).checked) {
features.autoLink = (document.getElementById('autoLinkCheckbox') as HTMLInputElement).checked;
features.indentWhenTab = (document.getElementById('indentWhenTabCheckbox') as HTMLInputElement).checked;
features.outdentWhenShiftTab = (document.getElementById('outdentWhenShiftTabCheckbox') as HTMLInputElement).checked;
features.outdentWhenBackspaceOnEmptyFirstLine = (document.getElementById('outdentWhenBackspaceOnEmptyFirstLineCheckbox') as HTMLInputElement).checked;
features.outdentWhenEnterOnEmptyLine = (document.getElementById('outdentWhenEnterOnEmptyLineCheckbox') as HTMLInputElement).checked;
features.mergeInNewLineWhenBackspaceOnFirstChar = (document.getElementById('mergeInNewLineWhenBackspaceOnFirstCharCheckbox') as HTMLInputElement).checked;
features.unquoteWhenBackspaceOnEmptyFirstLine = (document.getElementById('unquoteWhenBackspaceOnEmptyFirstLineCheckbox') as HTMLInputElement).checked;
features.unquoteWhenEnterOnEmptyLine = (document.getElementById('unquoteWhenEnterOnEmptyLineCheckbox') as HTMLInputElement).checked;
features.autoBullet = (document.getElementById('autoBulletCheckbox') as HTMLInputElement).checked;
features.tabInTable = (document.getElementById('tabInTableCheckbox') as HTMLInputElement).checked;
features.upDownInTable = (document.getElementById('upDownInTableCheckbox') as HTMLInputElement).checked;
features.unlinkWhenBackspaceAfterLink = (document.getElementById('unlinkWhenBackspaceAfterLinkCheckbox') as HTMLInputElement).checked;
features.defaultShortcut = (document.getElementById('defaultShortcutCheckbox') as HTMLInputElement).checked;
features.smartOrderedList = (document.getElementById('smartOrderedListCheckbox') as HTMLInputElement).checked;
plugins.push(new ContentEdit(features));
let defaultFeatures = getDefaultContentEditFeatures();
let keys = Object.keys(defaultFeatures);
for (let key of keys) {
if (key != 'smartOrderedListStyles' && features[key] != defaultFeatures[key]) {
featuresChanged = true;
break;
}
}
}
if ((document.getElementById('watermarkCheckbox') as HTMLInputElement).checked) {
plugins.push(new Watermark('Type content here...'));
}
if ((document.getElementById('imageResizeCheckbox') as HTMLInputElement).checked) {private getEditorOptions(): EditorOptions {
let { plugins, viewState, undo, hyperlinkToolTipCallback, defaultFormat } = this.props;
let allPlugins: EditorPlugin[] = [new ContentEdit(), new HyperLink(hyperlinkToolTipCallback), new Paste(true /*useDirectPaste*/)];
if (plugins) {
allPlugins = allPlugins.concat(plugins);
}
let initialContent = HtmlSanitizer.convertInlineCss(viewState.content);
let options: EditorOptions = {
plugins: allPlugins,
defaultFormat: defaultFormat,
undo: undo,
initialContent: initialContent
};
return options;
}private initEditor() {
let pluginList = this.state.pluginList;
editorInstanceToggleablePlugins = {
hyperlink: pluginList.hyperlink ? new HyperLink(this.getLinkCallback()) : null,
paste: pluginList.paste ? new Paste() : null,
contentEdit: pluginList.contentEdit
? new ContentEdit(this.getContentEditOptions())
: null,
watermark: pluginList.watermark ? new Watermark(this.state.watermarkText) : null,
imageResize: pluginList.imageResize ? new ImageResize() : null,
tableResize: pluginList.tableResize ? new TableResize() : null,
pickerPlugin: pluginList.pickerPlugin
? new PickerPlugin(new SampleColorPickerPluginDataProvider(), {
elementIdPrefix: 'samplepicker-',
changeSource: 'SAMPLE_COLOR_PICKER',
triggerCharacter: ':',
isHorizontal: true,
})
: null,
customReplace: pluginList.customReplace ? new CustomReplacePlugin() : null,
