Class SynapEditor

SynapEditor Class.

Index

Constructors

constructor

Constructors

constructor

new SynapEditor(): SynapEditor
Returns SynapEditor

Methods

addUploadPath

addUploadPath(fileType: SynapEditorFileType, uploadPath: string): void

Adds the path information of an uploaded file.

Parameters

fileType: SynapEditorFileType
File type ('image' | 'video' | 'file')
uploadPath: string
The uploaded path

Returns void

Example: Basic usage

editor.addUploadPath('image', 'upload/path/filename.png');

Example: Use case: Limiting the number of image uploads

editor.setEventListener('beforeUploadImage', (event) => {
    const fileType = event.fileType;
    const uploadCount = event.uploadCount;
    const imageCount = editor
        .getUploadedFiles(fileType)
        .filter((info) => !info.isDeleted).length;

    if (imageCount + uploadCount >= 5) {
        event.returnValue = false;
    }
});

clearDirty

clearDirty(): void

Updates the stringified value of the original SEModel used to determine whether the editor body has changed, to match the current editing content. Calling isDirty() immediately after this function will return false.

Returns void

Example: Basic usage

editor.clearDirty();
console.log(editor.isDirty()); // false

Example: Use case: Resetting the dirty state after saving

async function saveDocument() {
    const html = editor.getPublishingHtml();
    await fetch('/api/save', { method: 'POST', body: html });
    editor.clearDirty();
    console.log('Save complete, isDirty:', editor.isDirty()); // false
}

destroy

destroy(): void

Destroys the editor.

Returns void

Example: Basic usage

// React example (call destroy on unmount)
useEffect(() => {
    editorInstance = new SynapEditor();
    // Call the destroy function when leaving the page or when the component unmounts
    return () => {
        if (editorInstance) {
            editorInstance.destroy();
            editorInstance = null;
        }
    };
}, []);

// Clean up the editor on SPA page navigation
function cleanupEditor() {
    if (editorInstance) {
        editorInstance.destroy();
        editorInstance = null;
    }
}

window.addEventListener('beforeunload', cleanupEditor);

downloadAndUploadImages

downloadAndUploadImages(
 callbackFunc?: (
 uploadResultMap: SynapEditorDownloadUploadResultMap,
 ) => void,
 urlPattern?: string | RegExp,
): Promise<void>
Downloads all images in the editor body that match the specified URL pattern, then uploads them. Calls callbackFunc when all uploads are complete. Calling getPublishingHtml() inside callbackFunc returns HTML containing the updated image URLs. If no pattern is specified, only callbackFunc is called and the method returns immediately.
Parameters
- OptionalcallbackFunc: (uploadResultMap: SynapEditorDownloadUploadResultMap) => void
 Callback function invoked after upload is complete
- OptionalurlPattern: string | RegExp
 URL pattern of images to download. If not specified, the pattern configured in the config file is used.
Returns Promise<void>
A Promise indicating upload completion
Example: Basic usage
```
editor.downloadAndUploadImages(undefined, urlPattern).then(() => {
 const html = editor.getPublishingHtml();
});
```
Example: Use case: Using a callback function
```
const callback = () => {
 const html = editor.getPublishingHtml();
};

editor.downloadAndUploadImages(callback, urlPattern);
```

execCommand

execCommand(actionName: string, ...args: unknown[]): unknown

Executes an action.

Parameters

actionName: string
Name of the action to execute
...args: unknown[]
Arguments to pass to the action

Returns unknown

The result object of the execution

Example: Basic usage

var result = editor.execCommand('insertText', 'Hello SynapEditor');
if (!result.isSuccess) {
    console.error(result.errorMessage);
}

Example: Use case: Handling the result of a custom action

const result = editor.execCommand('bold');
if (result.isSuccess) {
    console.log('Bold applied successfully');
} else {
    console.log('Failed to apply bold');
}

exportFile

exportFile(
 name?: string,
 pageOrientation?: "portrait" | "landscape",
 exportFileFormat?: string,
): Promise<void>
Exports the editing content as a document file (docx, hwpx) and downloads it.

Notes:
- Identical representation and quality between the original imported document and the exported document is not guaranteed.
- Due to the structural characteristics of the web editor environment, 1:1 matching with the original document format is difficult, which may cause some objects to be missing or displayed abnormally.
Parameters
- Optionalname: string
 File name to save (default: 'untitled')
- OptionalpageOrientation: "portrait" | "landscape"
 Page orientation ('portrait' | 'landscape', default: 'portrait')
- OptionalexportFileFormat: string
 File format ('hwpx' | 'docx' | 'hwp', etc., default: 'hwpx')
Returns Promise<void>
A Promise indicating whether the file export operation completed
Example: Basic usage
```
editor.exportFile('Editor Document', 'portrait', 'hwpx').then(() => {
 console.log('Export complete.');
});
```

getAPIModelById

getAPIModelById(id: string, options?: SynapEditorAPIModelOptions): unknown
Returns an editable API model by ID. For repeated edits, you can improve performance by using skipRendering: true and then calling render().
Parameters
- id: string
  The element ID
- Optionaloptions: SynapEditorAPIModelOptions
  API model options
Returns unknown
The API model
Example: Basic usage
```
const table = editor.getAPIModelById('ID');
table.insertCol(1);
table.insertRow(1);
table.setWidth(400);
```
Example: Use case: Using the skipUndoRedo option
```
const table = editor.getAPIModelById('ID', { skipUndoRedo: true });
table.insertCol(1);
table.insertRow(1);
table.setWidth(400);
```

getAPIModels

getAPIModels(options?: SynapEditorAPIModelOptions): unknown[]
Returns editable API models based on the current selection.
Parameters
- Optionaloptions: SynapEditorAPIModelOptions
 API model options
Returns unknown[]
An array of API models
Example: Basic usage
```
const paragraph = editor.getAPIModels()[0];
paragraph.append('TEXT');
```
Example: Use case: Using the skipUndoRedo option
```
const paragraph = editor.getAPIModels({ skipUndoRedo: true })[0];
paragraph.append('APPEND TEXT');
```

getAPIModelsBySelector

getAPIModelsBySelector(
selector: string,
options?: SynapEditorAPIModelOptions,
): unknown[]
Returns editable API models matching the given CSS selector.
Parameters
- selector: string
 CSS selector
- Optionaloptions: SynapEditorAPIModelOptions
 API model options
Returns unknown[]
An array of API models
Example: Basic usage
```
const body = editor.getAPIModelsBySelector('.se-contents')[0];
body.append('APPEND TEXT');
```
Example: Use case: Using the skipUndoRedo option
```
const body = editor.getAPIModelsBySelector('.se-contents', { skipUndoRedo: true })[0];
body.append('APPEND TEXT');
```

getBodyModelJSON

getBodyModelJSON(toString?: false): SynapEditorBodyModelJSON

Returns the body model JSON or a JSON string.

Parameters

OptionaltoString: false
If true, returns as a JSON string.

Returns SynapEditorBodyModelJSON

The body model JSON object or JSON string

Example: Basic usage

var model = editor.getBodyModelJSON();
var model = editor.getBodyModelJSON(true); // Returns as a JSON string

Example: Use case: Saving the model JSON to a server

const modelStr = editor.getBodyModelJSON(true);
fetch('/api/save-model', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ model: modelStr })
});

getBodyModelJSON(toString: true): string

Returns the body model JSON or a JSON string.

Parameters

toString: true
If true, returns as a JSON string.

Returns string

The body model JSON object or JSON string

Example: Basic usage

var model = editor.getBodyModelJSON();
var model = editor.getBodyModelJSON(true); // Returns as a JSON string

Example: Use case: Saving the model JSON to a server

const modelStr = editor.getBodyModelJSON(true);
fetch('/api/save-model', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ model: modelStr })
});

getContentsDocument

getContentsDocument(): Document

Returns the Document of the editor content area.

Returns Document

The Document object of the editor content area

Example: Basic usage

var contentsDocument = editor.getContentsDocument();
var element = contentsDocument.getElementById('id');

Example: Use case: Dynamically adding styles to the content area

const doc = editor.getContentsDocument();
const style = doc.createElement('style');
style.textContent = '.highlight { background-color: yellow; }';
doc.head.appendChild(style);

getHTMLElement

getHTMLElement(position?: unknown): HTMLElement
Returns the HTMLElement at the given position.
Parameters
- Optionalposition: unknown
  Position object. If omitted, uses the current selection's focus position.
Returns HTMLElement
The HTML element at the position, or null
Example: Basic usage
```
const element = editor.getHTMLElement();
console.log(element?.innerHTML);
```
Example: Use case: Getting elements based on selection position
```
const selection = editor.getSelection();
const startElement = editor.getHTMLElement(selection.start);
const endElement = editor.getHTMLElement(selection.end);

console.log(startElement?.innerHTML);
console.log(endElement?.innerHTML);
```

getHTMLElements

getHTMLElements(selectionObject?: SynapEditorSelectionRangeLike): HTMLElement[]
Returns an array of HTMLElements based on the selection.
Parameters
- OptionalselectionObject: SynapEditorSelectionRangeLike
  A selection object in the form { anchor, focus }. If omitted, uses the current selection.
Returns HTMLElement[]
An array of HTMLElements
Example: Basic usage
```
const elements = editor.getHTMLElements();
console.log(elements[0]?.innerHTML);
```
Example: Use case: Passing a selection object directly
```
const selection = editor.getSelection();
const elements = editor.getHTMLElements(selection);

console.log(elements[0]?.innerHTML);
```

getModelDiffHTML

getModelDiffHTML(
    beforeBodyModel: string | SynapEditorBodyModelJSON,
    currentBodyModel: string | SynapEditorBodyModelJSON,
    options?: SynapEditorModelDiffOptions,
): string
Compares two body model JSONs or JSON strings and returns the changed parts as HTML.
Parameters
- beforeBodyModel: string | SynapEditorBodyModelJSON
  The previous model (JSON object or JSON string)
- currentBodyModel: string | SynapEditorBodyModelJSON
  The current model (JSON object or JSON string)
- Optionaloptions: SynapEditorModelDiffOptions
  Comparison options (style settings, HTML options, etc.)
Returns string
An HTML string showing the changed parts
Example: Basic usage
```
const beforeBodyModel = editor.getBodyModelJSON();
const currentBodyModel = editor.getBodyModelJSON();
const result = editor.getModelDiffHTML(beforeBodyModel, currentBodyModel);
```
Example: Use case: Specifying style options
```
const beforeBodyModel = editor.getBodyModelJSON();
const currentBodyModel = editor.getBodyModelJSON();
const options = {
    style: {
        edit: {
            color: 'rgba(144, 213, 235, 0.7)',
            borderColor: 'rgb(93, 181, 209)'
        }
    }
};

const result = editor.getModelDiffHTML(beforeBodyModel, currentBodyModel, options);
```

getPublishingHtml

getPublishingHtml(options?: SynapEditorGetPublishingHtmlOptions): string
Returns the publishing HTML.
Parameters
- Optionaloptions: SynapEditorGetPublishingHtmlOptions
  Publishing options object
Returns string
The publishing HTML string
Example: Basic usage
```
const html = editor.getPublishingHtml();
```
Example: Use case: Getting publishing HTML with various options
```
const plainHtml = editor.getPublishingHtml({ wrap: false });
const documentHtml = editor.getPublishingHtml({ contentPadding: 'document' });
const scopedHtml = editor.getPublishingHtml({ selector: '#test' });
```

getSelection

getSelection(): unknown

Returns the API Selection.

Returns unknown

The API Selection object

Example: Basic usage

const selection = editor.getSelection();
const { start, end, anchor, focus } = selection;

Example: Use case: Checking the anchor/focus type

const selection = editor.getSelection();
const anchorType = selection.anchor.getType();
const focusType = selection.focus.getType();

getTableCellDataByFieldName

getTableCellDataByFieldName(fieldName: string): SynapEditorTableCellData[]

Returns the ID and text of the TableCell corresponding to the given field name.

Parameters

fieldName: string
The field name to search for

Returns SynapEditorTableCellData[]

An array of { id, text } objects

Example: Basic usage

var tableCellData = editor.getTableCellDataByFieldName('test');
// [{ id: "cell_2", text: "2" }, { id: "cell_4", text: "4" }]

Example: Use case: Collecting table field data

const nameData = editor.getTableCellDataByFieldName('name');
const emailData = editor.getTableCellDataByFieldName('email');
const formData = {
    name: nameData.map(d => d.text),
    email: emailData.map(d => d.text)
};

getTableCellHTMLElement

getTableCellHTMLElement(): HTMLTableCellElement
Returns the TD or TH HTMLElement based on the current selection.

Returns HTMLTableCellElement
The focused table cell element, or null
Example: Basic usage
```
const td = editor.getTableCellHTMLElement();
td.innerHTML = "This is a table cell.";
```
Example: Use case: Applying a style to the selected cell
```
const td = editor.getTableCellHTMLElement();
if (td) {
    td.style.backgroundColor = '#f0f0f0';
    editor.render();
}
```

getTableOfContentsModelJSON

getTableOfContentsModelJSON(
shouldAssignId?: boolean,
): SynapEditorTableOfContentsModel[]
Returns the table of contents model JSON.
Parameters
- OptionalshouldAssignId: boolean
  Whether to assign new IDs
Returns SynapEditorTableOfContentsModel[]
A JSON array representing the hierarchical structure of the table of contents
Example: Basic usage
```
const model = editor.getTableOfContentsModelJSON();
const prefixedModel = editor.getTableOfContentsModelJSON(true);
```
Example: Use case: Preserving TOC IDs in content during save/load
```
editor.getTableOfContentsModelJSON(true);
editor.updateTableOfContentsIds();
```

getTableOfContentsModelListHTML

getTableOfContentsModelListHTML(shouldAssignId?: boolean): string

Returns the table of contents model as an <ol> HTML list string.

Parameters

OptionalshouldAssignId: boolean
Whether to assign new IDs

Returns string

The table of contents HTML string

Example: Basic usage

// Get HTML list
const html = editor.getTableOfContentsModelListHTML(true);
console.log(html);
// Synchronize IDs between TOC elements in content and the TOC model
editor.getTableOfContentsModelListHTML();
editor.updateTableOfContentsIds();

Example: Use case: Displaying the table of contents in a sidebar

const tocHtml = editor.getTableOfContentsModelListHTML(true);
const sidebar = document.getElementById('sidebar-toc');
sidebar.innerHTML = tocHtml;

getText

getText(selector: string): string

Extracts text from the element matching the given CSS selector.

Parameters

selector: string
CSS selector

Returns string

The text of the matching element, or null

Example: Basic usage

const text = editor.getText('#field');

Example: Use case: Collecting form field text

// Collect text from multiple fields at once
const formData = {
    name: editor.getText('#name'),
    birth: editor.getText('#birth'),
    address: editor.getText('#address'),
    phone: editor.getText('#phone')
};
console.log('Collected form data:', formData);

// Check if a specific field is empty
const nameText = editor.getText('#name');
if (!nameText) {
    alert('Please enter your name.');
}

getTextByRegex

getTextByRegex(regExp: RegExp): SynapEditorTextByRegexInfo[]
Returns text information matching the given regular expression.
Parameters
- regExp: RegExp
  Regular expression object to search for
Returns SynapEditorTextByRegexInfo[]
An array of matched text info { id, text, startIndex }
Example: Basic usage
```
const textInfoList = editor.getTextByRegex(/\+제\d+조$[가-힣\s\d\w]+$/g);
```
Example: Use case: Inserting bookmarks using getTextByRegex
```
const textInfoList = editor.getTextByRegex(/\+제\d+조$[가-힣\s\d\w]+$/g);

textInfoList.forEach((textInfo) => {
    editor.execCommand('setCaretById', textInfo.id);
    editor.execCommand('insertBookmark', textInfo.text);
});
```

getTextBySelectors

getTextBySelectors(selectors: string[]): string[]
Returns an array of texts corresponding to the given CSS selectors.
Parameters
- selectors: string[]
  An array of CSS selectors
Returns string[]
An array of texts corresponding to each selector (null if the element does not exist)
Example: Basic usage
```
texts = editor.getTextBySelectors(selectors);
```
Example: Use case: Collecting form data and sending it to a server
```
const selectors = ['#name', '#email', '#phone'];
const texts = editor.getTextBySelectors(selectors);
const formData = { name: texts[0], email: texts[1], phone: texts[2] };
fetch('/api/save', {
    method: 'POST',
    body: JSON.stringify(formData)
});
```

getTextContent

getTextContent(options?: SynapEditorGetTextContentOptions): string

Returns the content written in the editor as plain text.

Parameters

Optionaloptions: SynapEditorGetTextContentOptions
Text extraction options

Returns string

The full text of the editor

Example: Basic usage

const text = editor.getTextContent();

Example: Use case: Using text extraction options

// Extract text with emojis converted to HTML codes
const htmlCodeText = editor.getTextContent({ emoji: 'htmlcode' });
console.log('HTML code conversion:', htmlCodeText);

// Extract text with emojis preserved as Unicode
const unicodeText = editor.getTextContent({ emoji: 'unicode' });
console.log('Unicode conversion:', unicodeText);

// Extract plain text with emojis removed
const plainText = editor.getTextContent({ emoji: 'remove' });
console.log('Plain text:', plainText);

// Check the character count of the extracted text
const text = editor.getTextContent();
console.log('Total character count:', text.length);

getUploadedFiles

getUploadedFiles(): SynapEditorUploadedFilesMap

Returns the list of uploaded files. If a file type is provided, returns the list for that type only. If no file type is provided, returns the list for all file types.

Returns SynapEditorUploadedFilesMap

Example: Basic usage

const filesData = editor.getUploadedFiles();
const imageFiles = editor.getUploadedFiles('image');

Example: Use case: Limiting the number of image uploads

editor.setEventListener('beforeUploadImage', (event) => {
    const fileType = event.fileType;
    const uploadCount = event.uploadCount;
    const imageCount = editor
        .getUploadedFiles(fileType)
        .filter((info) => !info.isDeleted).length;

    if (imageCount + uploadCount >= 5) {
        event.returnValue = false;
    }
});

getUploadedFiles(fileType: SynapEditorFileType): SynapEditorUploadedFileInfo[]

Returns the list of uploaded files. If a file type is provided, returns the list for that type only. If no file type is provided, returns the list for all file types.

Parameters

fileType: SynapEditorFileType

Returns SynapEditorUploadedFileInfo[]

Example: Basic usage

const filesData = editor.getUploadedFiles();
const imageFiles = editor.getUploadedFiles('image');

Example: Use case: Limiting the number of image uploads

editor.setEventListener('beforeUploadImage', (event) => {
    const fileType = event.fileType;
    const uploadCount = event.uploadCount;
    const imageCount = editor
        .getUploadedFiles(fileType)
        .filter((info) => !info.isDeleted).length;

    if (imageCount + uploadCount >= 5) {
        event.returnValue = false;
    }
});

insertHTML

insertHTML(
 html: string,
 id?: string,
 offset?: number,
 forceRender?: boolean,
 options?: SynapEditorInsertHTMLOptions,
): unknown
Inserts HTML. If an ID is provided, inserts at the position corresponding to the ID and offset. If no ID is provided, inserts after the current selection's paragraph.
Parameters
- html: string
 HTML string to insert
- Optionalid: string
 Target element ID
- Optionaloffset: number
 Position within the paragraph
- OptionalforceRender: boolean
 Whether to render immediately (default: true)
- Optionaloptions: SynapEditorInsertHTMLOptions
 Insert options
Returns unknown
The end position of the inserted element
Example: Basic usage
```
const html = '<svg ...></svg>';
editor.insertHTML(html);
```
Example: Use case: Inserting at a specific ID and offset
```
const html = 'html Content';
editor.insertHTML(html, id, offset);
```

isCodeViewMode

isCodeViewMode(): boolean

Returns whether the editor is in source view mode.

Returns boolean

Whether the editor is in source view mode

Example: Basic usage

if (editor.isCodeViewMode()) {
    editor.setMode('edit');
}

Example: Use case: Displaying the current mode

function getCurrentMode() {
    if (editor.isCodeViewMode()) {
        return 'Source view mode';
    } else if (editor.isEditMode()) {
        return 'Edit mode';
    }
    return 'Preview mode';
}

isDirty

isDirty(): boolean

Returns true if there are changes in the editor body.

Returns boolean

Whether the content has been changed

Example: Basic usage

if (editor.isDirty()) {
    console.log('There are unsaved changes.');
}

Example: Use case: Controlling the save button's enabled state

editor.setEventListener('contentChanged', () => {
    const saveButton = document.getElementById('saveBtn');
    saveButton.disabled = !editor.isDirty();
});

isEdited

isEdited(): boolean

Checks whether the editor has been edited. Returns true if the undo stack is not empty. Resets when creating a new document or opening/importing (new insert).

Returns boolean

Whether the editor has been edited

Example: Basic usage

var html;
if(!editor.isEdited()) {
    html = editor.getPublishingHtml();
}

Example: Use case: Confirming changes when leaving a page

window.addEventListener('beforeunload', (event) => {
    if (editor.isEdited()) {
        event.preventDefault();
        event.returnValue = 'You have unsaved changes. Are you sure you want to leave?';
    }
});

isEditMode

isEditMode(): boolean

Returns whether the editor is in edit mode.

Returns boolean

Whether the editor is in edit mode

Example: Basic usage

if (editor.isEditMode()) {
    editor.insertHTML('Hello SynapEditor~');
}

Example: Use case: Performing different actions based on mode

function handleSave() {
    if (editor.isEditMode()) {
        const html = editor.getPublishingHtml();
        fetch('/api/save', { method: 'POST', body: html });
    } else {
        editor.setMode('edit');
    }
}

isEmpty

isEmpty(): boolean

Returns whether the editor has content.

Returns boolean

Whether the content area is empty

Example: Basic usage

var html;
if(!editor.isEmpty()) {
    html = editor.getPublishingHtml();
}

Example: Use case: Validating an empty document before saving

function saveDocument() {
    if (editor.isEmpty()) {
        alert('Please enter some content.');
        return;
    }
    const html = editor.getPublishingHtml();
    fetch('/api/save', {
        method: 'POST',
        body: JSON.stringify({ content: html })
    });
}

isPreviewMode

isPreviewMode(): boolean

Returns whether the editor is in preview mode.

Returns boolean

Whether the editor is in preview mode

Example: Basic usage

if (editor.isPreviewMode()) {
    editor.setMode('edit');
}

Example: Use case: Toggling preview mode

function togglePreview() {
    if (editor.isPreviewMode()) {
        editor.setMode('edit');
    } else {
        editor.setMode('preview');
    }
}

openDocumentByData

openDocumentByData(data: SynapEditorOpenDocumentData): void

Opens directly with converted document data.

Parameters

data: SynapEditorOpenDocumentData
Document data object (docType, serializedData, importPath, etc.)

Returns void

Example: Basic usage

const DOC_TYPE = editor.constructor.CONST.DOC_TYPE
const data = {};
data.docType = DOC_TYPE.WORD;
data.serializedData = [10, 213, 156, ...];
data.importPath = "works/36a43f36f442b5824c6b061eb734553d";
data.name = "Editor Introduction.docx";
data.size = 71914;
window.editor.openDocumentByData(data);

Example: Use case: Opening a document from server response data

fetch('/api/convert', { method: 'POST', body: formData })
    .then(response => response.json())
    .then(data => {
        editor.openDocumentByData(data);
    });

openDocumentByURL

openDocumentByURL(url: string): void
Downloads and opens the document at the given URL. Due to CORS restrictions, only documents on the same server can be opened.
Parameters
- url: string
  Document URL
Returns void
Example: Basic usage
```
const url = '/resource/test.docx';
editor.openDocumentByURL(url);
```
Example: Use case: Opening a document with a dynamic URL
```
function loadTemplate(templateName: string) {
    const url = `/resource/template/${templateName}.docx`;
    editor.openDocumentByURL(url);
}
```

openDocumentOnServer

openDocumentOnServer(
 api: string,
 params: SynapEditorServerOpenParams,
 bOverwrite: boolean,
 headers?: Record<string, string>,
): void
Converts and opens a document via a server API.
Parameters
- api: string
 Server API URL
- params: SynapEditorServerOpenParams
 Request parameters
- bOverwrite: boolean
 Whether to overwrite existing content
- Optionalheaders: Record<string, string>
 Request headers
Returns void
Example: Basic usage
```
const api = './importOnServer';
const params = { path: 'D:\\test.docx' };
const overwrite = true;
editor.openDocumentOnServer(api, params, overwrite);
```
Example: Use case: Opening a document from a server with custom headers
```
const api = './importOnServer';
const params = new FormData();
params.append('file', docFile);
const headers = { 'Authorization': 'Bearer token123' };
editor.openDocumentOnServer(api, params, false, headers);
```

openHTML

openHTML(html: string, options?: SynapEditorOpenHTMLOptions): void

Opens an HTML string.

Parameters

html: string
HTML string to open
Optionaloptions: SynapEditorOpenHTMLOptions
Open options

Returns void

Example: Basic usage

const html = "<H1>Synap Editor</H1><P>Holistic Rich Text Editor</P>";
editor.openHTML(html);

Example: Use case: Opening HTML with a callback

const html = '<h1>Title</h1><p>Body content.</p>';
editor.openHTML(html, {
    callback: () => {
        console.log('HTML loaded successfully');
    },
    bFocus: true
});

openSEModel

openSEModel(
model: SynapEditorSEModelInput,
options?: SynapEditorOpenSEModelOptions,
): Promise<void>
Opens an SEModel object or JSON.
Parameters
- model: SynapEditorSEModelInput
 Document or Body model / JSON object or JSON string
- Optionaloptions: SynapEditorOpenSEModelOptions
 Open options
Returns Promise<void>
A Promise indicating open completion
Example: Basic usage
```
const json = editor.getBodyModelJSON();
editor.openSEModel(json);
const jsonStr = editor.getBodyModelJSON(true);
editor.openSEModel(jsonStr);
```
Example: Use case: Opening an SEModel received from a server
```
fetch('/api/document/123')
 .then(response => response.json())
 .then(data => {
 editor.openSEModel(data.bodyModel);
 });
```

render

render(): void

Performs rendering if there are changed models.

Returns void

Example: Basic usage

var table = editor.getAPIModelById('ID', { skipRendering : true });
table.insertCol(1);
table.insertRow(1);
table.setWidth(400);
editor.render();

Example: Use case: Modifying a table via API model and then rendering

const table = editor.getAPIModelById('tableId', { skipRendering: true });
table.insertRow(2);
table.insertCol(3);
editor.render();

setContentsToPaste

setContentsToPaste(html: string): void

Sets the HTML contents to be pasted. Used to adjust clipboard data in the beforePaste event.

Parameters

html: string
HTML string to paste

Returns void

Example: Basic usage

editor.setEventListener('beforePaste', function(data) {
    var html = data.clipboardData.html;
    var text = data.clipboardData.text;
    var data = html ? html : getHTMLString(text);
    editor.setContentsToPaste('<h1>SynapEditor</h1>' + data);
});

Example: Use case: Filtering pasted content

editor.setEventListener('beforePaste', (data) => {
    let html = data.html;
    // Remove external styles before pasting
    html = html.replace(/style="[^"]*"/g, '');
    editor.setContentsToPaste(html);
});

setCustomImportFunction

setCustomImportFunction(func: SynapEditorCustomImportFunction): void

Sets a custom import function. When this function is set, it is called instead of the internal file import logic.

Parameters

func: SynapEditorCustomImportFunction
Custom import function

Returns void

Example: Basic usage

editor.setCustomImportFunction((docFile, bOverwrite) => {
    return {
        serializedData,
        importPath,
        importImageMap
    };
});

Example: Use case: Async function example (async)

editor.setCustomImportFunction(async (docFile, bOverwrite) => {
    return Promise.resolve({ serializedData, importPath, importImageMap });
});

setCustomUploadFunction

setCustomUploadFunction(func: SynapEditorCustomUploadFunction): void
Sets a custom upload function. When this function is set, it is called instead of the internal file upload logic. The parameters passed from the editor to the custom function are file and fileType (image, video, file).
Parameters
- func: SynapEditorCustomUploadFunction
  Custom upload function
Returns void
Example: Basic usage
```
editor.setCustomUploadFunction((file, uploadFileType) => {
    const url = '/uploads/image.png';
    return url;
});
```
Example: Use case: Async function example (async)
```
editor.setCustomUploadFunction(async (file, uploadFileType) => {
    const url = await Promise.resolve('/uploads/image.png');
    return url;
});
```

setLock

setLock(selector: string): void

Locks the element matching the given CSS selector.

Parameters

selector: string
CSS selector

Returns void

Example: Basic usage

window.editor.setLock('#lock_element_Id');
window.editor.setLock('.not_editable');

Example: Use case: Setting specific areas as read-only

// Lock the signature area and copyright area
editor.setLock('#signature_area');
editor.setLock('#copyright_notice');

setMode

setMode(
    mode: string,
    callback?: () => void,
    options?: SynapEditorSetModeOptions,
): void
Changes the editor mode.
Parameters
- mode: string
  Mode to switch to ('edit', 'preview', 'code', 'readonly')
- Optionalcallback: () => void
  Callback function invoked after the mode change is complete
- Optionaloptions: SynapEditorSetModeOptions
  Mode change options
Returns void
Example: Basic usage
```
if (editor.isPreviewMode()) {
    editor.setMode('edit');
} else {
    editor.setMode('preview');
}
```
Example: Use case: Using a callback function (release 2.12.0 or later)
```
const callback = () => {
    console.log('done');
};

editor.setMode('edit', callback);
```

setText

setText(selector: string, text: string): void

Sets text on the element matching the given CSS selector.

Parameters

selector: string
CSS selector
text: string
Text to set

Returns void

Example: Basic usage

window.editor.setText('#field', 'Field Text');
window.editor.setText('#name', 'Name Text');

Example: Use case: Bulk-filling form fields

const fields = { '#name': 'Hong Gildong', '#email': 'hong@example.com', '#phone': '010-1234-5678' };
Object.entries(fields).forEach(([selector, text]) => {
    editor.setText(selector, text);
});

setTextBySelectors

setTextBySelectors(datas: SynapEditorTextSelectorData[]): void

Sets text on multiple elements matching the given selectors in bulk.

Parameters

datas: SynapEditorTextSelectorData[]
An array of { selector, text } objects

Returns void

Example: Basic usage

window.editor.setTextBySelectors([
    { selector: '#field', text: 'Field Text' },
    { selector: '#name', text: 'Name Text' }
]);

Example: Use case: Populating form fields with server data

fetch('/api/user/profile')
    .then(res => res.json())
    .then(data => {
        editor.setTextBySelectors([
            { selector: '#name', text: data.name },
            { selector: '#email', text: data.email },
            { selector: '#phone', text: data.phone }
        ]);
    });

setUnlock

setUnlock(selector: string): void

Unlocks the element matching the given CSS selector.

Parameters

selector: string
CSS selector

Returns void

Example: Basic usage

window.editor.setUnlock('#unlock_element_Id');
window.editor.setUnlock('.editable');

Example: Use case: Unlocking areas with admin privileges

if (userRole === 'admin') {
    editor.setUnlock('#signature_area');
    editor.setUnlock('#copyright_notice');
}

setUserInfo

setUserInfo(userInfo: SynapEditorUserInfo): void

Sets user information.

Parameters

userInfo: SynapEditorUserInfo
User information object

Returns void

Example: Basic usage

window.editor.setUserInfo({
    id: 'editor',
    name: 'editor',
    color:'#3C39B8',
    userData: {
        userId: 'userId',
        connected: Date.now(),
        profileImage:'/img/path.png'
    }
});

Example: Use case: Linking logged-in user information

fetch('/api/user/me')
    .then(res => res.json())
    .then(user => {
        editor.setUserInfo({
            id: user.id,
            name: user.displayName,
            color: user.themeColor,
            userData: { department: user.department }
        });
    });

updateBodyModel

updateBodyModel(options?: SynapEditorAPIModelOptions): void

Updates the entire editing model based on the current body DOM.

Parameters

Optionaloptions: SynapEditorAPIModelOptions
API model options

Returns void

Example: Basic usage

const paragraphs = document.querySelectorAll('.se-contents p');
paragraphs.forEach(function(para, index){ para.innerText = index + 'test'; });
editor.updateBodyModel();

Example: Use case: Synchronizing the model after directly modifying the DOM

const doc = editor.getContentsDocument();
const paragraphs = doc.querySelectorAll('.se-contents p');
paragraphs.forEach(p => {
    p.style.lineHeight = '1.8';
});
editor.updateBodyModel();

updateModel

updateModel(
    beforeId: string,
    afterId?: string,
    options?: SynapEditorAPIModelOptions,
): void
Updates the editing model of a specific element based on the changed DOM.
Parameters
- beforeId: string
  The element ID before the change
- OptionalafterId: string
  The element ID after the change (if the ID was changed)
- Optionaloptions: SynapEditorAPIModelOptions
  API model options
Returns void
Example: Basic usage
```
const paragraph = document.getElementById('p1');
if (paragraph) {
    paragraph.innerText = 'Updating the text.';
    editor.updateModel('p1');
}
```
Example: Use case: When the ID has changed
```
const paragraph = document.getElementById('p1');
if (paragraph) {
    paragraph.id = 'p2';
    paragraph.innerText = 'Updating the text.';
    editor.updateModel('p1', 'p2');
}
```

uploadBase64Images

uploadBase64Images(callbackFunc?: () => void): Promise<void>
Uploads all images included as base64 strings in the body. When upload is complete, replaces the src in the HTML tag with the uploaded URL and calls callbackFunc. Calling getPublishingHtml() inside callbackFunc returns the updated HTML tag.
Parameters
- OptionalcallbackFunc: () => void
 Callback function invoked after upload is complete
Returns Promise<void>
A Promise indicating upload completion
Example: Basic usage
```
editor.uploadBase64Images().then(() => {
 editor.getPublishingHtml();
});
```
Example: Use case: Using a callback function
```
const callback = () => {
 editor.getPublishingHtml();
};

editor.uploadBase64Images(callback);
```

xhtml4pubdoc

xhtml4pubdoc(options?: SynapEditorXhtml4PubdocOptions): string

Returns the body with an e-government document filter applied as a string.

Parameters

Optionaloptions: SynapEditorXhtml4PubdocOptions
E-government document filter options

Returns string

An HTML string with the filter applied

Example: Basic usage

var pubdoc = editor.xhtml4pubdoc();
var pubdocOption = editor.xhtml4pubdoc({applyFirstTextStyle: ['fontSize', 'color']});

Example: Use case: Sending an e-government document to the server

const pubdoc = editor.xhtml4pubdoc({ applyFirstTextStyle: ['fontSize', 'color'] });
fetch('/api/pubdoc', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ content: pubdoc })
});

`Static`addIcons

addIcons(icons: Record<string, string>): void

Adds icon resources. If an icon with the same name already exists, it will be overwritten.

Parameters

icons: Record<string, string>
Icon resource object to add

Returns void

Static

Example: Basic usage

const iconResources = {
    image: '<img ...>',
    bold: '<svg ...>'
};

SynapEditor.addIcons(iconResources);

Example: Use case: Applying custom icons

const customIcons = {
    bold: '<img src="/assets/bold.png" />',
    italic: '<svg ...></svg>'
};

SynapEditor.addIcons(customIcons);
const editor = new SynapEditor('synapEditor', synapEditorConfig);

`Static`addMessages

addMessages(language: string, messages: Record<string, string>): void

Adds messages. If a message with the same key already exists, it will be overwritten.

Parameters

language: string
Language code (e.g., 'ko', 'en')
messages: Record<string, string>
Message object to add

Returns void

Static

Example: Basic usage

const messages = {
    'myPlugin.message.synap': '사이냅',
    'myPlugin.message.editor': '에디터'
};

SynapEditor.addMessages('ko', messages);

Example: Use case: Changing default messages

const changedMessages = {
    'message.label.bold': '★두껍게★',
    'message.label.italic': '♧이탤릭♧'
};

SynapEditor.addMessages('ko', changedMessages);
const editor = new SynapEditor('synapEditor', synapEditorConfig);

`Static`getIcons

getIcons(): Record<string, string>
Returns the icon resources.

Returns Record<string, string>
The registered icon resource object
Static
Example: Basic usage
```
const icons = SynapEditor.getIcons();
```
Example: Use case: Checking whether a specific icon exists
```
const icons = SynapEditor.getIcons();
if (icons['bold']) {
 console.log('The bold icon is registered.');
}
```

`Static`getMessages

getMessages(language: string): Record<string, string>

Returns the messages for the specified language.

Parameters

language: string
Language code (e.g., 'ko', 'en')

Returns Record<string, string>

An object in the format { messageKey: message }

Static

Example: Basic usage

const language = 'ko';
const messages = SynapEditor.getMessages(language);

Example: Use case: Using multilingual messages

// Get Korean messages
const koMessages = SynapEditor.getMessages('ko');
console.log(koMessages);

// Get English messages
const enMessages = SynapEditor.getMessages('en');
console.log(enMessages);

// Set UI text with messages matching the current editor language
const lang = navigator.language.startsWith('ko') ? 'ko' : 'en';
const messages = SynapEditor.getMessages(lang);
document.getElementById('saveBtn').textContent = messages['save'] || 'Save';

Class SynapEditor

Index

Constructors

Methods

Constructors

constructor

Returns SynapEditor

Methods

addUploadPath

Parameters

Returns void

Example: Basic usage

Example: Use case: Limiting the number of image uploads

clearDirty

Returns void

Example: Basic usage

Example: Use case: Resetting the dirty state after saving

destroy

Returns void

Example: Basic usage

Example: Use case: Cleaning up the editor on SPA page navigation

downloadAndUploadImages

Parameters

Returns Promise<void>

Example: Basic usage

Example: Use case: Using a callback function

execCommand

Parameters

Returns unknown

Example: Basic usage

Example: Use case: Handling the result of a custom action

exportFile

Parameters

Returns Promise<void>

Example: Basic usage

getAPIModelById

Parameters

Returns unknown

Example: Basic usage

Example: Use case: Using the skipUndoRedo option

getAPIModels

Parameters

Returns unknown[]

Example: Basic usage

Example: Use case: Using the skipUndoRedo option

getAPIModelsBySelector

Parameters

Returns unknown[]

Example: Basic usage

Example: Use case: Using the skipUndoRedo option

getBodyModelJSON

Parameters

Returns SynapEditorBodyModelJSON

Example: Basic usage

Example: Use case: Saving the model JSON to a server

Parameters

Returns string

Example: Basic usage

Example: Use case: Saving the model JSON to a server

getContentsDocument

Returns Document

Example: Basic usage

Example: Use case: Dynamically adding styles to the content area

getHTMLElement

Parameters

Returns HTMLElement

Example: Basic usage

Example: Use case: Getting elements based on selection position

getHTMLElements

Parameters

Returns HTMLElement[]

Example: Basic usage

Example: Use case: Passing a selection object directly

getModelDiffHTML

Parameters

Returns string

Example: Basic usage

Example: Use case: Specifying style options

getPublishingHtml

Parameters