.core

It can be accessed from object's "core" property returned after editor creation.

Members

_w

Window object.

_d

Document object.

_ww

Window object of the iframe if created as an iframe || _w

_wd

Document object of the iframe if created as an iframe || _d

util

Suneditor's "util" object

functions

Functions object

notice

Notice module object
notice.open(), notice.close()

icons

Default icons object

history

History object for undo, redo
Properties:
Name Type Description
stack Array History stack
push(delay) Function Saving the current status to the history object stack
If "delay" is true, it will be saved after (options.historyStackDelayTime || 400) miliseconds
If the function is called again with the "delay" argument true before it is saved, the delay time is renewal.
You can specify the delay time by sending a number.
undo() Function Undo function
redo() Function Redo function
go(index) Function Go to the history stack for argument "index"
If "index" is -1, go to the last stack
getCurrentIndex() Function Get the current history stack index.
reset(ignoreChangeEvent) Function Reset the history object
If "ignoreChangeEvent" is true the onChange event will not be called after a reset

plugins

Loaded plugins

pluginCallButtons

Plugin buttons

initPlugins

Whether the plugin is initialized

lang

Loaded language

context {Object}

Properties:
Name Type Description
element Object editor elements (Contains sub-options)
    originElement Element "Textarea" to be the base of the editor
    topArea Element The top-level element of the editor
    relative Element Element below top-level element in editor (class="sun-editor-container") It wraps all other div tags
    toolbar Element Toolbar element
    resizebar Element Element of the resize bar
    navigation Element Element of the current tag navigation
    charWrapper Element Character counter wrapper tag
    charCounter Element Character counter tag
    editorArea Element Element containing an iframe
    wysiwygFrame Element wysiwyg area (DIV or Iframe)
    wysiwyg Element wysiwyg edit area (DIV or Iframe.document.body)
    code Element textarea element used in code view mode
    placeholder Element The placeholder span
    loading Element The loding box
    resizeBackground Element Background div used when resize behavior
tool Object tool bar elements (Contains sub-options)
    cover Element Div that covers the toolbar when the button is "disable"
    bold Element bold button element
    underline Element underline button element
    italic Element italic button element
    strike Element strike button element
    sub Element subscript button element
    sup Element superscript button element
    undo Element undo button element
    redo Element redo button element
    save Element save button element
    outdent Element outdent button element
option, options Object inserted options (Contains sub-options)

effectNode

This is a reference node to apply the activation effect of the buttons.
If the node did not change after adding the custom plugin, if you need to reapply the button's activation effect, set this variable to "null".
submenu element

container

container element
active button element in submenu

containerActiveButton

active button element in container

controllerArray

The elements array to be processed unvisible when the controllersOff function is executed
(resizing, link modified button, table controller)

currentControllerName

The name of the plugin that called the currently active controller.

currentControllerTarget

The target element of current controller.

currentFileComponentInfo

The file component object of current selected file tag (getFileComponent(): {target, component, pluginName})

controllerFunction

The functions array to be executed when the controllersOff function is executed
ex) init function of table plugin

codeViewDisabledButtons

An array of buttons whose class name is not "se-code-view-enabled"

resizingDisabledButtons

An array of buttons whose class name is not "se-resizing-enabled"

editorTagsWhitelistRegExp

Editor tags whitelist (RegExp object)
util.createTagsWhitelist(options._editorTagsWhitelist)

editorTagsBlacklistRegExp

Editor tags blacklist (RegExp object)
util.createTagsBlacklist(options.tagsBlacklist)

pasteTagsWhitelistRegExp

Tag whitelist when pasting (RegExp object)
util.createTagsWhitelist(options.pasteTagsWhitelist)

pasteTagsBlacklistRegExp

Tag blacklist when pasting (RegExp object)
util.createTagsBlacklist(options.pasteTagsBlacklist)

hasFocus

Boolean value of whether the editor has focus

activePlugins

Plugins array with "active" method.
"activePlugins" runs the "add" method when creating the editor.

managedTagsInfo

@description Information of tags that should maintain HTML structure, style, class name, etc. (In use by "math" plugin)
When inserting "html" such as paste, it is executed on the "html" to be inserted. (core.cleanHTML)
Basic Editor Actions:
1. All classes not starting with "__se__" or "se-" in the editor are removed.
2. The style of all tags except the "span" tag is removed from the editor.

"managedTagsInfo" structure ex: 
managedTagsInfo() {
    query: '.__se__xxx, se-xxx'
    map: {
    '__se__xxx': method.bind(core),
    'se-xxx': method.bind(core),
    }
}

@example
Define in the following return format in the "managedTagInfo" function of the plugin. 
managedTagInfo() => {
    return {
        className: 'string', // Class name to identify the tag. ("__se__xxx", "se-xxx")
        // Change the html of the "element". ("element" is the element found with "className".)
        // "method" is executed by binding "core".
        method: function (element) {
            // this === core
            element.innerHTML = // (rendered html);
        }
    }
}

commandMap

Elements that need to change text or className for each selection change.
After creating the editor, activePlugins are added.
Properties:
Name Type Description
STRONG Element bold button
INS Element underline button
EM Element italic button
DEL Element strike button
SUB Element subscript button
SUP Element superscript button
OUTDENT Element outdent button

_variable

Variables used internally in editor operation
Properties:
Name Type Description
isChanged Boolean Editor content change status
isCodeView Boolean State of code view
isFullScreen Boolean State of full screen
innerHeight_fullScreen Number InnerHeight in editor when in full screen
resizeClientY Number Remember the vertical size of the editor before resizing the editor (Used when calculating during resize operation)
tabSize Number Indent size of tab (4)
codeIndent Number Indent size of Code view mode (2)
minResizingSize Number Minimum size of editing area when resized {Number} (.se-wrapper-inner {min-height: 65px;} || 65)
currentNodes Array An array of the current cursor's node structure

Methods

callPlugin(pluginName, callBackFunction, _target)

If the plugin is not added, add the plugin and call the 'add' function.
If the plugin is added call callBack function.
Parameters:
Name Type Description
pluginName String The name of the plugin to call
callBackFunction Function Function to be executed immediately after module call
_target Element|null Plugin target button (This is not necessary if you have a button list when creating the editor)

addModule(moduleObj)

If the module is not added, add the module and call the 'add' function
Parameters:
Name Type Description
moduleObj Array module object's Array [dialog, resizing]

getGlobalScrollOffset() → {Object}

Gets the current editor-relative scroll offset.
{top: number, left: number}

initMenuTarget(pluginName, target, menu)

Method for managing submenu element.
You must add the "submenu" element using the this method at custom plugin.
Parameters:
Name Type Description
pluginName String Plugin name
target Element|null Target button
menu Element Submenu element
Enable submenu
Parameters:
Name Type Description
element Element Submenu's button element to call
Disable submenu

containerOn(element)

Enable container
Parameters:
Name Type Description
element Element Container's button element to call

containerOff()

Disable container

controllersOn(arguments)

Show controller at editor area (controller elements, function, "controller target element(@Required)", "controller name(@Required)", etc..)
Parameters:
Name Type Description
arguments {*} Controller elements, functions..

controllersOff()

Hide controller at editor area (link button, image resize button..)

setControllerPosition(controller, referEl, position, addOffset)

Specify the position of the controller.
Parameters:
Name Type Description
controller Element Controller element
referEl Element Element that is the basis of the controller's position
position String Type of position ("top" | "bottom")
When using the "top" position, there should not be an arrow on the controller.
When using the "bottom" position there should be an arrow on the controller.
addOffset Object These are the left and top values that need to be added specially.
This argument is required. - {left: 0, top: 0}
Please enter the value based on ltr mode.
Calculated automatically in rtl mode.

execCommand(command, showDefaultUI, value)

javascript execCommand
Parameters:
Name Type Description
command String javascript execCommand function property
showDefaultUI Boolean|undefined javascript execCommand function property
value String|undefined javascript execCommand function property

nativeFocus()

Focus to wysiwyg area using "native focus function"

focus()

Focus to wysiwyg area

focusEdge(focusEl)

If "focusEl" is a component, then that component is selected; if it is a format element, the last text is selected
If "focusEdge" is null, then selected last element
Parameters:
Name Type Description
focusEl Element | null Focus element.

blur()

Focusout to wysiwyg area (.blur())

setRange(startCon, startOff, endCon, endOff) → {Object}

Set range object and return.
Parameters:
Name Type Description
startCon Node The startContainer property of the selection object.
startOff Number The startOffset property of the selection object.
endCon Node The endContainer property of the selection object.
endOff Number The endOffset property of the selection object.

removeRange()

Remove range object and button effect

getRange() → {Object}

Get current range object

getRange_addLine(range, container) → {Object}

If the "range" object is a non-editable area, add a line at the top of the editor and update the "range" object.
Returns a new "range" or argument "range".
Parameters:
Name Type Description
range Object core.getRange()
container Element|null If there is "container" argument, it creates a line in front of the container.

getSelection() → {Object}

Get window selection obejct

getSelectionNode() → {Node}

Get current select node

getSelectedElements(validation) → {Array}

Returns a "formatElement"(util.isFormatElement) array from the currently selected range.
Parameters:
Name Type Description
validation Function|null The validation function. (Replaces the default validation function-util.isFormatElement)

getSelectedElementsAndComponents(removeDuplicate) → {Array}

Get format elements and components from the selected area. (P, DIV, H[1-6], OL, UL, TABLE..)
If some of the component are included in the selection, get the entire that component.
Parameters:
Name Type Description
removeDuplicate Boolean If true, if there is a parent and child tag among the selected elements, the child tag is excluded.

isEdgePoint(container, offset, dir) → {Boolean}

Determine if this offset is the edge offset of container
Parameters:
Name Type Description
container Node The node of the selection object. (range.startContainer..)
offset Number The offset of the selection object. (core.getRange().startOffset...)
dir String|undefined Select check point - Both edge, Front edge or End edge. ("front": Front edge, "end": End edge, undefined: Both edge)

showLoading()

Show loading box

closeLoading()

Close loading box

appendFormatTag(element, formatNode) → {Element}

Append format element to sibling node of argument element.
If the "formatNode" argument value is present, the tag of that argument value is inserted,
If not, the currently selected format tag is inserted.
Returns the inserted element.
Parameters:
Name Type Description
element Element Insert as siblings of that element
formatNode String|Element|null Node name or node obejct to be inserted

insertComponent(element, notHistoryPush, notSelect) → {Element}

The method to insert a element and return. (used elements : table, hr, image, video)
If "element" is "HR", insert and return the new line.
Parameters:
Name Type Description
element Element Element to be inserted
notHistoryPush Boolean When true, it does not update the history stack and the selection object and return EdgeNodes (util.getEdgeChildNodes)
checkCharCount Boolean If true, if "options.maxCharCount" is exceeded when "element" is added, null is returned without addition.
notSelect Boolean If true, Do not automatically select the inserted component.

getFileComponent(element) → {Object}

Gets the file component and that plugin name
return: {target, component, pluginName} | null
Parameters:
Name Type Description
element Element Target element (figure tag, component div, file tag)

selectComponent(element, pluginName)

The component(image, video) is selected and the resizing module is called.
Parameters:
Name Type Description
element Element Element tag (img, iframe, video)
pluginName String Plugin name (image, video)

insertNode(oNode, afterNode) → {Object|Node|null}

Deletes the selected area and inserts the node and return.
If the "afterNode" exists, it is inserted after the "afterNode"
Inserting a text node merges with both text nodes on both sides and returns a new "{ container, startOffset, endOffset }".
Parameters:
Name Type Description
oNode Element Element to be inserted
afterNode Element|null If the node exists, it is inserted after the node

removeNode → {Object}

Delete the currently selected nodes and reset selection range
Returns {
    container: "the last element after deletion",
    offset: "offset",
    prevContainer: "previousElementSibling Of the deleted area"
}

applyRangeFormatElement(rangeElement)

Appended all selected format Element to the argument element and insert
Parameters:
Name Type Description
rangeElement Element Element of wrap the arguments (BLOCKQUOTE...)

detachRangeFormatElement(rangeElement, selectedFormats, newRangeElement, remove, notHistoryPush) → {Object}

The elements of the "selectedFormats" array are detached from the "rangeElement" element. ("LI" tags are converted to "P" tags)
When "selectedFormats" is null, all elements are detached and return {cc: parentNode, sc: previousSibling, ec: nextSibling, removeArray: [Array of removed elements]}.
Parameters:
Name Type Description
rangeElement Element Range format element (PRE, BLOCKQUOTE, OL, UL...)
selectedFormats Array|null Array of format elements (P, DIV, LI...) to remove.
If null, Applies to all elements and return {cc: parentNode, sc: previousSibling, ec: nextSibling}
newRangeElement Element|null The node(rangeElement) to replace the currently wrapped node.
remove Boolean If true, deleted without detached.
notHistoryPush Boolean When true, it does not update the history stack and the selection object and return EdgeNodes (util.getEdgeChildNodes)

detachList(selectedFormats, remove) → {Object} : {sc: <LI>, ec: <LI>}

"selectedFormats" array are detached from the list element.
The return value is applied when the first and last lines of "selectedFormats" are "LI" respectively.
Parameters:
Name Type Description
selectedFormats Array Array of format elements (LI, P...) to remove.
remove Boolean If true, deleted without detached.

nodeChange(appendNode, styleArray, removeNodeArray, strictRemove)

Add, update, and delete nodes from selected text.
1. If there is a node in the "appendNode" argument, a node with the same tags and attributes as "appendNode" is added to the selection text.
2. If it is in the same tag, only the tag's attributes are changed without adding a tag.
3. If the "appendNode" argument is null, the node of the selection is update or remove without adding a new node.
4. The same style as the style attribute of the "styleArray" argument is deleted.
    (Styles should be put with attribute names from css. ["background-color"])
5. The same class name as the class attribute of the "styleArray" argument is deleted.
    (The class name is preceded by "." [".className"])
6. Use a list of styles and classes of "appendNode" in "styleArray" to avoid duplicate property values.
7. If a node with all styles and classes removed has the same tag name as "appendNode" or "removeNodeArray", or "appendNode" is null, that node is deleted.
8. Regardless of the style and class of the node, the tag with the same name as the "removeNodeArray" argument value is deleted.
9. If the "strictRemove" argument is true, only nodes with all styles and classes removed from the nodes of "removeNodeArray" are removed.
10. It won't work if the parent node has the same class and same value style.
    However, if there is a value in "removeNodeArray", it works and the text node is separated even if there is no node to replace.
Parameters:
Name Type Description
appendNode Element|null The element to be added to the selection. If it is null, only delete the node.
styleArray Array|null The style or className attribute name Array to check (['font-family', 'color', '.className']...])
removeNodeArray Array|null An array of node names to remove types from,
remove all formats when "appendNode" is null and there is an empty array or null value. (['span'], ['strong', 'em'] ...])
strictRemove Boolean|null If true, only nodes with all styles and classes removed from the nodes of "removeNodeArray" are removed.

actionCall(command, display, target)

Run plugin calls and basic commands.
Parameters:
Name Type Description
command String Command string
display String Display type string ('command', 'submenu', 'dialog', 'container')
target Element The element of command button

commandHandler(target, command)

Execute command of command button(All Buttons except submenu and dialog)
(selectAll, codeView, fullScreen, indent, outdent, undo, redo, removeFormat, print, preview, showBlocks, save, bold, underline, italic, strike, subscript, superscript)
Parameters:
Name Type Description
target|null Element The element of command button
command String Property of command button (data-value)

removeFormat()

Remove format of the currently selected range (IE, Edge not working)

indent(command)

This method implements indentation to selected range.
Setted "margin-left" to "25px" in the top "P" tag of the parameter node.
Parameters:
Name Type Description
command String Separator ("indent" or "outdent")

toggleDisplayBlocks()

Add or remove the class name of "body" so that the code block is visible

toggleCodeView()

Changes to code view or wysiwyg view

toggleFullScreen(element)

Changes to full screen or default screen
Parameters:
Name Type Description
element Element full screen button

print()

Prints the current contents of the editor.

preview()

Open the preview window.

setDir(dir)

Set direction to "rtl" or "ltr".
Parameters:
Name Type Description
String dir "rtl" or "ltr"

setContents(html)

Sets the HTML string
Parameters:
Name Type Description
html String HTML string

setIframeContents(ctx)

Sets the contents of the iframe's head tag and body tag when using the "iframe" or "fullPage" option.
Parameters:
Name Type Description
ctx Object { head: HTML string, body: HTML string}

getContents(onlyContents) → {String}

Gets the current contents
* not working during enabled codeView mode
Parameters:
Name Type Description
onlyContents Boolean Return only the contents of the body without headers when the "fullPage" option is true

getFullContents(onlyContents) → {String}

Gets the current contents with containing parent div(div.sun-editor-editable). <div class="sun-editor-editable">{contents}</div>
Parameters:
Name Type Description
onlyContents Boolean Return only the contents of the body without headers when the "fullPage" option is true

getText() → {String}

Gets only the text of the suneditor contents
* not working during enabled codeView mode

cleanHTML(html, whitelist, blacklist) → {String}

Gets the clean HTML code for editor
Parameters:
Name Type Description
html String HTML string
whitelist String|RegExp|null Regular expression of allowed tags.
RegExp object is create by util.createTagsWhitelist method. (core.pasteTagsWhitelistRegExp)
blacklist String|RegExp|null Regular expression of disallowed tags.
RegExp object is create by util.createTagsBlacklist method. (core.pasteTagsBlacklistRegExp)

checkCharCount(element, charCounterType) → {Boolean}

When "element" is added, if it is greater than "options.maxCharCount", false is returned.
Parameters:
Name Type Description
element Node|String Element node or String
charCounterType String|null charCounterType. If it is null, the options.charCounterType

getCharLength(content, charCounterType) → {Number}

Get the length of the content. Depending on the option, the length of the character is taken. (charCounterType)
Parameters:
Name Type Description
content String Content to count
charCounterType String options.charCounterType

addDocEvent(type, listener, useCapture)

Add an event to document.
When created as an Iframe, the same event is added to the document in the Iframe.
Parameters:
Name Type Description
type String Event type
listener Function Event listener
useCapture Boolean Use event capture

removeDocEvent(type, listener)

Remove events from document.
When created as an Iframe, the event of the document inside the Iframe is also removed.
Parameters:
Name Type Description
type String Event type
listener Function Event listener

convertContentsForEditor(contents) → {String}

Converts contents into a format that can be placed in an editor.
Parameters:
Name Type Description
contents String Contents

convertHTMLForCodeView(html, comp) → {String}

Converts wysiwyg area element into a format that can be placed in an editor of code view mode
Parameters:
Name Type Description
html Element|String WYSIWYG element (context.element.wysiwyg) or HTML string
comp Boolean If true, does not line break and indentation of tags.