Members

_w

Window object.

_d

Document object.

_wd

Document object of the iframe if created as an iframe.

_ww

Window object of the iframe if created as an iframe.

context {JsonObject}

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="kothing-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
    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
    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
    subscript Element subscript button element
    superscript Element superscript button element
    font Element font family button > span.txt
    fontTooltip Element font family tooltip element
    format Element format button > span.txt
    fontSize Element font size button > span.txt
    align Element align button > div.icon
    list Element list button element
    undo Element undo button element
    redo Element redo button element
    save Element save button element
    outdent Element outdent button element
option Object inserted options (Contains sub-options)
    lang Object language object
    mode String The mode of the editor (classic, inline, balloon)
    toolbarWidth String The width of the toolbar.
Applies only when the editor mode is 'inline' or 'balloon' mode.
    stickyToolbar Number Reference height value that should be changed to sticky toolbar mode
    iframe Boolean Content will be placed in an iframe and isolated from the rest of the page
    fullPage Boolean Allows the usage of HTML, HEAD, BODY tags and DOCTYPE declaration
    iframeCSSFileName String Name of the CSS file to apply inside the iframe.
    codeMirror Object CodeMirror core object
    codeMirrorEditor Object Generated CodeMirror Object
    position String The position property of editor
    display String The display property of editor
    popupDisplay String Size of background area when activating dialog window ('full'||'local')
    resizingBar Boolean Show the bottom resizing bar
    showPathLabel Boolean Displays the current node structure to resizingBar
    charCounter Boolean Shows the number of characters in the editor
    maxCharCount Number The maximum number of characters allowed to be inserted into the editor
    width String The width size of the editor
    minWidth String The min-width size of the editor
    maxWidth String The max-width size of the editor
    height String The height size of the editor
    minHeight String The min-height size of the editor
    maxHeight String The max-height size of the editor
    font Array Change default font-family array
    fontSize Array Change default font-size array
    formats Array Change default formatBlock array
    colorList Array Change default color array of color picker
    imageResizing Boolean Can resize the image
    imageWidth Number The default width size of the image frame
    imageFileInput Boolean Choose whether to create a file input tag in the image upload window
    imageUrlInput Boolean Choose whether to create a image url input tag in the image upload window
    imageUploadUrl String The image upload to server mapping address
    imageUploadSizeLimit Number The size of the total uploadable images (in bytes)
    videoResizing Boolean Can resize the video iframe
    videoWidth Number The default width size of the video frame
    videoHeight Number The default heigth size of the video frame
    youtubeQuery String The query string of a YouTube embedded URL
    callBackSave Function Callback functions that is called when the Save button is clicked
    templates Array Templates array

plugins

Loaded plugins

util

KothingEditor's "util" object

initPlugins

Whether the plugin is initialized

lang

Loaded language
submenu element
active button element in submenu

controllerArray

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

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 "code-view-enabled"

history

History object for undo, redo
Properties:
Name Type Description
push function Saving the current status to the history object stack
undo function Undo function
redo function Redo function
reset function Reset the history object

commandMap

Elements that need to change text or className for each selection change
Properties:
Name Type Description
FORMAT Element format button > span.txt
FONT Element font family button > span.txt
FONT_TOOLTIP Element font family tooltip element
SIZE Element font size button > span.txt
ALIGN Element align button > div.icon
LI Element list button
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
wysiwygActive Boolean The wysiwyg frame or code view state
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 Indented size when tab button clicked (4)
minResizingSize Number Minimum size of editing area when resized (65)
currentNodes Array An array of the current cursor's node structure

Methods

callPlugin(pluginName, callBackFunction)

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

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]
Enabled submenu
Parameters:
Name Type Description
element Element Submenu element to call
Disable submenu

controllersOn(arguments)

Show controller at editor area (link button, image resize button, init function, etc..)
Parameters:
Name Type Description
arguments {*} Controller elements, functions..

controllersOff()

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

execCommand(command, showDefaultUI, value)

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

focus()

Focus to wysiwyg area

setRange(startCon, startOff, endCon, endOff)

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

getRange() → {Object}

Get current range object

getSelection() → {Object}

Get window selection obejct

getSelectionNode() → {Node}

Get current select node

getSelectedElements(validation) → {Array}

Returns a "formatElement"(P, DIV, H[1-6], LI) array from the currently selected range.
Parameters:
Name Type Description
validation Function|null The validation function. (Replaces the default validation function-util.isFormatElement(current))

getSelectedElementsAndComponents() → {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.

isEdgePoint(container, offset) → {Boolean}

Determine if this offset is the edge offset of container
Parameters:
Name Type Description
container Object The container property of the selection object.
offset Number The offset property of the selection object.

showLoading()

Show loading box

closeLoading()

Close loading box

appendFormatTag(element, formatNodeName)

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

insertComponent(element) → {Element}

The method to insert a element. (used elements : table, hr, image, video)
This method is add the element next line and insert the new line.
When used in a tag in "LI", it is inserted into the LI tag.
Returns the next line added.
Parameters:
Name Type Description
element Element Element to be inserted

insertNode(oNode, afterNode)

Deletes the selected area and inserts the node.
If the "afterNode" exists, it is inserted after the "afterNode"
Parameters:
Name Type Description
oNode Element Element to be inserted
afterNode Element|null If the node exists, it is inserted after the node

removeNode()

Delete the currently selected node

applyRangeFormatElement(rangeElement)

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

detachRangeFormatElement(rangeElement, selectedFormats, newRangeElement, remove, notHistory)

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: nextSibling, ec: previousSibling}.
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: nextSibling, ec: previousSibling}
newRangeElement Element|null The node(rangeElement) to replace the currently wrapped node.
remove Boolean Delete without detached.
notHistory Boolean When true, it does not update the history stack and the selection object and return EdgeNodes (util.getEdgeChildNodes)

nodeChange(appendNode, checkCSSPropertyText, removeNodeArray)

Adds a node to the selected region, or deletes the node.
1. If there is a node in the "appendNode" argument, "appendNode" is added to the selection range.
2. If the "appendNode" argument has a null value, the node is modified without adding a new node.
3. Styles such as the style property of the "styleArray" argument will be deleted.
4. If the node is "appendNode" or if "appendNode" is null, Nodes with all styles removed will be deleted.
5. Tags with the same name as the value of the "removeNodeArray" argument will be deleted. Valid only when "appendNode" is null.
Parameters:
Name Type Description
appendNode Element|null The element to be added to the selection
checkCSSPropertyArray Array|null The css attribute name Array to check (['font-size'], ['font-family', 'background-color', 'border']...])
removeNodeArray Array|null An array of node names from which to remove types, Removes all formats when there is an empty array or null value. (['span'], ['b', 'u']...])

commandHandler(target, command)

Execute command of command button(All Buttons except submenu and dialog)
(redo, undo, bold, underline, italic, strikethrough, subscript, superscript, removeFormat, indent, outdent, fullscreen, showBlocks, codeview, preview, print)
Parameters:
Name Type Description
target 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.

setContents(element)

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

getContents() → {String}

Gets the current contents

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
String type Event type
Function listener Event listener
Boolean useCapture 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
String type Event type
Function listener Event listener