Editor Mode

Iframe mode

Isolates the editor content area in an iframe, preventing interference from the host page's CSS and scripts.

mode: iframe isolated DOM

Iframe Mode

This content area is rendered inside an iframe. The host page's global CSS, scripts, and events cannot penetrate it.

Advantages

Style isolation — The host page's reset CSS, fonts, and margins do not affect the content.
Independent scroll — The editor content scrolls separately without disrupting the page layout.
Security — User input is not directly coupled with the host DOM, reducing XSS risks.

Notes

Font and color variables from the host page are not applied to the content.

                Configuration
                mode: iframe
                
            
var config = Object.assign(synapEditorConfig, {
    'editor.license': synapEditorLicense,
    'editor.lang': 'en',
    'editor.mode.iframe': {
        'enable': true,
        'style.urls': ['https://cdn.synapeditor.com/latest/iframeMode/contentsEditStyle.css'],
        'script.urls': ['https://cdn.synapeditor.com/latest/iframeMode/SEPolyfill.min.js']
    }
});

// Create editor instance
var editor = new SynapEditor('synapEditor', config, initialHtml);