new ToastUIEditorCore(options)
ToastUIEditorCore
PARAMETERS
Name Type Description options
Object
Option object
PROPERTIES
Name Type Description el
HTMLElement
container element
height
string = '300px'
Editor's height style value. Height is applied as border-box ex) '300px', '100%', 'auto'
minHeight
string = '200px'
Editor's min-height style value in pixel ex) '300px'
initialValue
[ string ]
Editor's initial value
previewStyle
[ string ]
Markdown editor's preview style (tab, vertical)
previewHighlight
boolean = true
Highlight a preview element corresponds to the cursor position in the markdown editor
initialEditType
[ string ]
Initial editor type (markdown, wysiwyg)
events
[ Object ]
Events
PROPERTIES
Name Type Description load
[ function ]
It would be emitted when editor fully load
change
[ function ]
It would be emitted when content changed
caretChange
[ function ]
It would be emitted when format change by cursor position
focus
[ function ]
It would be emitted when editor get focus
blur
[ function ]
It would be emitted when editor loose focus
keydown
[ function ]
It would be emitted when the key is pressed in editor
keyup
[ function ]
It would be emitted when the key is released in editor
beforePreviewRender
[ function ]
It would be emitted before rendering the markdown preview with html string
beforeConvertWysiwygToMarkdown
[ function ]
It would be emitted before converting wysiwyg to markdown with markdown text
hooks
[ Object ]
Hooks
PROPERTIES
Name Type Description addImageBlobHook
[ addImageBlobHook ]
hook for image upload
language
string = 'en-US'
language
useCommandShortcut
boolean = true
whether use keyboard shortcuts to perform commands
usageStatistics
boolean = true
send hostname to google analytics
toolbarItems
[ Array ]
toolbar items.
hideModeSwitch
boolean = false
hide mode switch tab bar
plugins
[ Array ]
Array of plugins. A plugin can be either a function or an array in the form of function, options.
extendedAutolinks
[ Object ]
Using extended Autolinks specified in GFM spec
placeholder
[ string ]
The placeholder text of the editable element.
linkAttributes
[ Object ]
Attributes of anchor element that should be rel, target, hreflang, type
customHTMLRenderer
Object = null
Object containing custom renderer functions correspond to change markdown node to preview HTML or wysiwyg node
customMarkdownRenderer
Object = null
Object containing custom renderer functions correspond to change wysiwyg node to markdown text
referenceDefinition
boolean = false
whether use the specification of link reference definition
customHTMLSanitizer
function = null
custom HTML sanitizer
previewHighlight
boolean = false
whether highlight preview area
frontMatter
boolean = false
whether use the front matter
widgetRules
Array.<object> = []
The rules for replacing the text with widget node
theme
[ string ]
The theme to style the editor with. The default is included in toastui-editor.css.
autofocus
autofocus = true
automatically focus the editor on creation.
Static Methods
factory(options)
Factory method for Editor
PARAMETERS
Name Type Description options
object
Option for initialize TUIEditor
RETURNS:
{object
} - ToastUIEditorCore or ToastUIEditorViewer
setLanguage(code, data)
Set language
PARAMETERS
Name Type Description code
stringArray.<string>
code for I18N language
data
object
language set
Instance Methods
addCommand(type, name, command)
PARAMETERS
Name Type Description type
string
editor type
name
string
command name
command
function
command handler
addHook(type, handler)
Add hook to TUIEditor event
PARAMETERS
Name Type Description type
string
Event type
handler
function
Event handler
addWidget(node, style, pos)
Add widget to selection
PARAMETERS
Name Type Description node
Node
widget node
style
string
Adding style "top" or "bottom"
pos
[ numberArray.<number> ]
position
blur()
Remove focus of current Editor
changeMode(mode, withoutFocus)
Change editor's mode to given mode string
PARAMETERS
Name Type Description mode
string
Editor mode name of want to change
withoutFocus
[ boolean ]
Change mode without focus
changePreviewStyle(style)
change preview style
PARAMETERS
Name Type Description style
string
'tab'|'vertical'
convertPosToMatchEditorMode(start, end, mode)
Convert position to match editor mode
PARAMETERS
Name Type Description start
numberArray.<number>
start position
end
numberArray.<number> = start
end position
mode
string = this.mode
Editor mode name of want to match converted position to
deleteSelection(start, end)
Delete the content of selection range
PARAMETERS
Name Type Description start
[ numberArray.<number> ]
start position
end
[ numberArray.<number> ]
end position
destroy()
Destroy TUIEditor from document
exec(name, payload)
execute editor command
PARAMETERS
Name Type Description name
string
command name
payload
[ object ]
payload for command
focus()
Set focus to current Editor
getCurrentPreviewStyle()
Get current Markdown editor's preview style
RETURNS:
{string
}
getEditorElements()
Get markdown editor, preview, wysiwyg editor DOM elements
getHeight()
Get editor height
RETURNS:
{string
} - editor height in pixel
getHTML()
Get content to html
RETURNS:
{string
} - html string
getMarkdown()
Get content to markdown
RETURNS:
{string
} - markdown text
getMinHeight()
Get minimum height of editor content
RETURNS:
{string
} - min height in pixel
getRangeInfoOfNode(pos)
Get range of the node
PARAMETERS
Name Type Description pos
[ numberArray.<number> ]
position
RETURNS:
{Array.<Array.<>>Array.<number>
} - node <a href="undefined">start, end</a> rangeEXAMPLES
// Markdown mode const rangeInfo = editor.getRangeInfoOfNode(); console.log(rangeInfo); // { range: [[startLineOffset, startCurorOffset], [endLineOffset, endCurorOffset]], type: 'emph' } // WYSIWYG mode const rangeInfo = editor.getRangeInfoOfNode(); console.log(rangeInfo); // { range: [startCursorOffset, endCursorOffset], type: 'emph' }
getScrollTop()
Get scroll position value of editor container
RETURNS:
{number
} - scrollTop value of editor container
getSelectedText(start, end)
Get selected text content
PARAMETERS
Name Type Description start
[ numberArray.<number> ]
start position
end
[ numberArray.<number> ]
end position
RETURNS:
{string
} - selected text content
getSelection()
Get current selection range
RETURNS:
{Array.<Array.<>>Array.<number>
} - Returns the range of the selection depending on the editor modeEXAMPLES
// Markdown mode const mdSelection = editor.getSelection(); console.log(mdSelection); // [[startLineOffset, startCurorOffset], [endLineOffset, endCurorOffset]] // WYSIWYG mode const wwSelection = editor.getSelection(); console.log(wwSelection); // [startCursorOffset, endCursorOffset]
hide()
Hide TUIEditor
insertText(text)
Insert text
PARAMETERS
Name Type Description text
string
text content
isMarkdownMode()
Return true if current editor mode is Markdown
RETURNS:
{boolean
}
isViewer()
Return false
RETURNS:
{boolean
}
isWysiwygMode()
Return true if current editor mode is WYSIWYG
RETURNS:
{boolean
}
moveCursorToEnd(focus)
Set cursor position to end
PARAMETERS
Name Type Description focus
[ boolean ] = true
automatically focus the editor
moveCursorToStart(focus)
Set cursor position to start
PARAMETERS
Name Type Description focus
[ boolean ] = true
automatically focus the editor
off(type)
Unbind eventHandler from event type
PARAMETERS
Name Type Description type
string
Event type
on(type, handler)
Bind eventHandler to event type
PARAMETERS
Name Type Description type
string
Event type
handler
function
Event handler
removeHook(type)
Remove hook from TUIEditor event
PARAMETERS
Name Type Description type
string
Event type
replaceSelection(text, start, end)
Replace selection range with given text content
PARAMETERS
Name Type Description text
string
text content
start
[ numberArray.<number> ]
start position
end
[ numberArray.<number> ]
end position
replaceWithWidget(start, end, text)
Replace node with widget to range
PARAMETERS
Name Type Description start
numberArray.<number>
start position
end
numberArray.<number>
end position
text
string
widget text content
reset()
Reset TUIEditor
setHeight(height)
Set editor height
PARAMETERS
Name Type Description height
string
editor height in pixel
setHTML(html, cursorToEnd)
Set html value.
PARAMETERS
Name Type Description html
string = ''
html syntax text
cursorToEnd
boolean = true
move cursor to contents end
setMarkdown(markdown, cursorToEnd)
Set markdown syntax text.
PARAMETERS
Name Type Description markdown
string = ''
markdown syntax text.
cursorToEnd
boolean = true
move cursor to contents end
setMinHeight(minHeight)
Set minimum height to editor content
PARAMETERS
Name Type Description minHeight
string
min content height in pixel
setPlaceholder(placeholder)
Set the placeholder on all editors
PARAMETERS
Name Type Description placeholder
string
placeholder to set
setScrollTop(value)
Move on scroll position of the editor container
PARAMETERS
Name Type Description value
number
scrollTop value of editor container
setSelection(start, end)
Set selection range
PARAMETERS
Name Type Description start
numberArray.<number>
start position
end
numberArray.<number>
end position
show()
Show TUIEditor