Watermark plugin

Go back to Built-in plugins

Watermark plugin provides a watermark-like placeholder text in empty editor. Once user focused into editor or there is already content inside editor, the placeholder text will be hidden.

Create plugin instance

Watermark is an optional plugin. To use this plugin, you need to manually create instance of this plugin and add it to your editor by createEditor() API or constructor of Editor class. To manually create an instance of this plugin, you can use its constructor:

interface DefaultFormat {
    fontFamily?: string;
    fontSize?: string;
    textColor?: string;
    backgroundColor?: string;
    bold?: boolean;
    italic?: boolean;
    underline?: boolean;
}

constructor(private watermark: string, private format?: DefaultFormat);

Parameters

watermark

This is the string to show as the watermark text.

format

This is the format of the watermark text. If not passed, the plugin will use the following default format:

• font size: 14px
• color: #AAAAAA

More info

Package: roosterjs-editor-plugins

Support from: 6.3.0

Source code: Watermark.ts