Horizontal Line Extension

Release 2.7.0 and above.

A plugin that extends the horizontal line feature of Synap Editor.

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 horizontalLineExtension.min.js"></script>
<link rel="stylesheet" href="url of horizontalLineExtension.min.css">

Setting Style URL in Preview

In screens where the plugin's CSS is not set, the horizontal line is displayed in the default style.

Since the preview is composed of an iframe, it is displayed in the default style unless the style URL is set separately.

var synapEditorConfig = {
    ...
    /**
     * Adds the style url to the preview.
     */
    'editor.preview.style.urls': [
        'url of horizontalLineExtension.min.css'
    ]
    ...
};

Setting Style URL when Using Editor Iframe Mode

Release 2.10.0 and above.

When the editor is used in Iframe mode, it is displayed in the default style unless the style URL is set separately.

For details on Iframe mode, refer to Installation & Configuration > Configuration > Basic UI Settings > Iframe mode.

var synapEditorConfig = {
    ...
    'editor.mode.iframe': {
        'enable': true,
        'style.urls': [..., 'url of horizontalLineExtension.min.css'],
        'script.urls': []
    }
    ...
};

Note

In screens where the plugin's CSS is not set, the horizontal line is displayed in the default style.

Default style: