It is a plugin that extends Synap Editor's quotes function.

How to use

Loading plugin files

<!-- SynapEditor object must exist to apply it, so it must be included under editor script file. -->

<script src="quoteExtension.min.js의 url"></script>
<link rel="stylesheet" href="quoteExtension.min.css의 url">

Setting style URL in preview

On screens where the plugin's CSS is not set, quotes are displayed in the default style.

In the case of preview, it is composed of iframes, so if you do not set the style URL separately, it is displayed in the default style.

var synapEditorConfig = {
	...
	/**
	 * Set style url to preview.
     */
	'editor.preview.style.urls': [
		'quoteExtension.min.css의 url'
	]
	...
};

Setting style URL when using editor iframe mode

RELEASE 2.10.0 OR ABOVE

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

For more information on iframe mode, refer to [Installation and Settings> Environment Settings > Basic UI Settings > iframe mode].

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

Reference

On screens where the plugin's CSS is not set, quotes are displayed in the default style.

Default style :