Placeholder

Release 3.0.0 and above, Release 2.18.0 and above.

A plugin that allows you to set HTML to be displayed when there is no content in the editor.

When there is content in the editor, it is not displayed.

Placeholder example

How to Use

Loading Plugin Files

<!-- The SynapEditor object must exist for this to take effect,
     so include after the editor script files. -->
<script src="url of placeholder.min.js"></script>

Configure the Plugin

Set HTML to be Displayed When the Editor Has No Content

// synapeditor.config.js
//...
'placeholder.config': {
    'html': '<p>Hello Editor!!</p>' // Set HTML as a string
}
// ...

HTML setting example

Opacity Setting

Sets the opacity so that the HTML set in Placeholder can be displayed clearly or dimly.

You can set values from 0 to 1. The default value is 0.3.

// synapeditor.config.js
//...
'placeholder.config': {
    'html': '<p>Hello Editor!!</p>',
    'opacity': 0.3 // Opacity to set on the placeholder (set a value from 0 to 1)
}
// ...
<table> <thead> <tr><th><code>opacity: 0</code></th><th><code>opacity</code> default (0.3)</th></tr> </thead> <tbody> <tr> <td>

opacity 0

</td> <td>

opacity 0.3

</td> </tr> </tbody> </table> <table> <thead> <tr><th><code>opacity: 0.6</code></th><th><code>opacity: 1</code></th></tr> </thead> <tbody> <tr> <td>

opacity 0.6

</td> <td>

opacity 1

</td> </tr> </tbody> </table>