Iframe 모드

2.10.0 버전부터 지원합니다.

Iframe 모드가 활성화되면, 편집 영역이 <iframe> 내부에 생성되어 외부 스타일의 영향을 최소화합니다.

1.00

설정 방법

// synapeditor.config.js
'editor.mode.iframe': {
  'enable': true,
  'style.urls': ['../dist/iframeMode/contentsEditStyle.css', ... ],
  'script.urls': ['../dist/iframeMode/SEPolyfill.min.js']
}
  • enable : Iframe 모드를 활성화할지 여부입니다.
  • style.urls : iframe 내부에 추가할 스타일시트의 URL입니다. Iframe 모드가 활성화된 경우 contentsEditStyle.css를 반드시 추가해야 합니다.
  • script.urls : iframe 내부에 추가할 스크립트의 URL입니다. Iframe 모드가 활성화된 경우 SEPolyfill.min.js를 반드시 추가해야 합니다.

참고 사항

Iframe 모드를 사용할 때는 에디터가 완전히 초기화될 때까지 기다린 후 에디터 API를 사용해야 합니다.

매개변수를 통한 HTML 불러오기

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

openHTML 및 SynapEditorInitialized 함수로 HTML 불러오기

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);

openHTML을 통한 HTML 불러오기 및 이벤트 등록

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);

에디터 초기화에 대한 자세한 내용은 API > 이벤트 > initialized를 참고합니다.