logo

/github|v3.2.0

Class

new ToastUIEditorCore(options)

ToastUIEditorCore

PARAMETERS
NameTypeDescription

options

Object

Option object

PROPERTIES
NameTypeDescription

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
NameTypeDescription

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
NameTypeDescription

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
NameTypeDescription

options

object

Option for initialize TUIEditor

RETURNS:
{

object

} - ToastUIEditorCore or ToastUIEditorViewer

setLanguage(code, data)

Set language

PARAMETERS
NameTypeDescription

code

stringArray.<string>

code for I18N language

data

object

language set

Instance Methods

addCommand(type, name, command)

PARAMETERS
NameTypeDescription

type

string

editor type

name

string

command name

command

function

command handler

addHook(type, handler)

Add hook to TUIEditor event

PARAMETERS
NameTypeDescription

type

string

Event type

handler

function

Event handler

addWidget(node, style, pos)

Add widget to selection

PARAMETERS
NameTypeDescription

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
NameTypeDescription

mode

string

Editor mode name of want to change

withoutFocus

[ boolean ]

Change mode without focus

changePreviewStyle(style)

change preview style

PARAMETERS
NameTypeDescription

style

string

'tab'|'vertical'

convertPosToMatchEditorMode(start, end, mode)

Convert position to match editor mode

PARAMETERS
NameTypeDescription

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
NameTypeDescription

start

[ numberArray.<number> ]

start position

end

[ numberArray.<number> ]

end position

destroy()

Destroy TUIEditor from document

exec(name, payload)

execute editor command

PARAMETERS
NameTypeDescription

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
NameTypeDescription

pos

[ numberArray.<number> ]

position

RETURNS:
{

Array.<Array.<>>Array.<number>

} - node <a href="undefined">start, end</a> range
EXAMPLES
// 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
NameTypeDescription

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 mode
EXAMPLES
// 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
NameTypeDescription

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
NameTypeDescription

focus

[ boolean ] = true

automatically focus the editor

moveCursorToStart(focus)

Set cursor position to start

PARAMETERS
NameTypeDescription

focus

[ boolean ] = true

automatically focus the editor

off(type)

Unbind eventHandler from event type

PARAMETERS
NameTypeDescription

type

string

Event type

on(type, handler)

Bind eventHandler to event type

PARAMETERS
NameTypeDescription

type

string

Event type

handler

function

Event handler

removeHook(type)

Remove hook from TUIEditor event

PARAMETERS
NameTypeDescription

type

string

Event type

replaceSelection(text, start, end)

Replace selection range with given text content

PARAMETERS
NameTypeDescription

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
NameTypeDescription

start

numberArray.<number>

start position

end

numberArray.<number>

end position

text

string

widget text content

reset()

Reset TUIEditor

setHeight(height)

Set editor height

PARAMETERS
NameTypeDescription

height

string

editor height in pixel

setHTML(html, cursorToEnd)

Set html value.

PARAMETERS
NameTypeDescription

html

string = ''

html syntax text

cursorToEnd

boolean = true

move cursor to contents end

setMarkdown(markdown, cursorToEnd)

Set markdown syntax text.

PARAMETERS
NameTypeDescription

markdown

string = ''

markdown syntax text.

cursorToEnd

boolean = true

move cursor to contents end

setMinHeight(minHeight)

Set minimum height to editor content

PARAMETERS
NameTypeDescription

minHeight

string

min content height in pixel

setPlaceholder(placeholder)

Set the placeholder on all editors

PARAMETERS
NameTypeDescription

placeholder

string

placeholder to set

setScrollTop(value)

Move on scroll position of the editor container

PARAMETERS
NameTypeDescription

value

number

scrollTop value of editor container

setSelection(start, end)

Set selection range

PARAMETERS
NameTypeDescription

start

numberArray.<number>

start position

end

numberArray.<number>

end position

show()

Show TUIEditor

Resizable