Iframe Mode

Available in Release 2.10.0 and above.

When Iframe mode is enabled, the editing area is created inside an <iframe>, which minimizes the impact of external styles.

Setup Method

// synapeditor.config.js
'editor.mode.iframe': {
  'enable': true,
  'style.urls': ['../dist/iframeMode/contentsEditStyle.css', ... ],
  'script.urls': ['../dist/iframeMode/SEPolyfill.min.js']
}

• enable : whether Iframe mode is enabled.
• style.urls : URLs of stylesheets to add inside the iframe. contentsEditStyle.css must be added when Iframe mode is enabled.
• script.urls : URLs of scripts to add inside the iframe. SEPolyfill.min.js must be added when Iframe mode is enabled.

Notes

When using Iframe mode, you must wait until the editor has fully initialized before using editor APIs.

Loading HTML via parameter

var html = "<H1>Synap Editor</H1><P>Holistic Rich Text Editor</P>";
var editor = new SynapEditor('synapEditor', synapEditorConfig, html);

Loading HTML via openHTML and the SynapEditorInitialized function

var editorId = 'synapEditor';
var editorConfig = {};
var html = '<H1>Synap Editor</H1><P>Holistic Rich Text Editor</P>';

// Runs when the editor has finished initialization (async)
function SynapEditorInitialized(e) {
  var editor = e.editor;
  editor.openHTML(html);
}

// Runs when the editor has finished initialization (sync)
function SynapEditorInitializedSync(e) {
  var editor = e.editor;
  editor.openHTML(html);
}

new SynapEditor(editorId, editorConfig);

Loading HTML via openHTML and event registration

var editorId = 'synapEditor';
var editorConfig = {};
var html = '<H1>Synap Editor</H1><P>Holistic Rich Text Editor</P>';

var eventListeners = {
  initialized: function (e) {
    var editor = e.editor;
    editor.openHTML(html);
  },
  initializedSync: function (e) {
    var editor = e.editor;
    editor.openHTML(html);
  }
};

new SynapEditor(editorId, editorConfig, html, eventListeners);

For details about editor initialization, see API > Events > initialized.

Try It Out

Try Iframe mode