Selection

selection.Selection

Implements

constructor

new Selection(jodit): Selection

Parameters

Name Type
jodit IJodit

Returns

Selection

Defined in

src/core/selection/selection.ts#51

jodit

Readonly jodit: IJodit

Defined in

src/core/selection/selection.ts#51

sel

get sel(): null | Selection

Return current selection object

Returns

null | Selection

Implementation of

ISelect.sel

Defined in

src/core/selection/selection.ts#97


range

get range(): Range

Return first selected range or create new

Returns

Range

Implementation of

ISelect.range

Defined in

src/core/selection/selection.ts#111


isInsideArea

get isInsideArea(): boolean

Checks if the selected text is currently inside the editor

Returns

boolean

Implementation of

ISelect.isInsideArea

Defined in

src/core/selection/selection.ts#120


hasMarkers

get hasMarkers(): boolean

Check if editor has selection markers

Returns

boolean

Implementation of

ISelect.hasMarkers

Defined in

src/core/selection/selection.ts#222


markers

get markers(): HTMLElement[]

Check if editor has selection markers

Returns

HTMLElement[]

Implementation of

ISelect.markers

Defined in

src/core/selection/selection.ts#229


html

get html(): string

Return current selected HTML

Returns

string

Example

const editor = Jodit.make();
console.log(editor.s.html); // html
console.log(Jodit.modules.Helpers.stripTags(editor.s.html)); // plain text

Implementation of

ISelect.html

Defined in

src/core/selection/selection.ts#1205

createRange

createRange(select?): Range

Return current selection object

Parameters

Name Type Default value Description
select boolean false Immediately add in selection

Returns

Range

Implementation of

ISelect.createRange

Defined in

src/core/selection/selection.ts#132


remove

remove(): void

Remove all selected content

Returns

void

Implementation of

ISelect.remove

Defined in

src/core/selection/selection.ts#145


clear

clear(): void

Clear all selection

Returns

void

Implementation of

ISelect.clear

Defined in

src/core/selection/selection.ts#160


removeNode

removeNode(node): void

Remove node element from editor

Parameters

Name Type
node Node

Returns

void

Implementation of

ISelect.removeNode

Defined in

src/core/selection/selection.ts#169


insertCursorAtPoint

insertCursorAtPoint(x, y): boolean

Insert the cursor to any point x, y

Parameters

Name Type Description
x number Coordinate by horizontal
y number Coordinate by vertical

Returns

boolean

false - Something went wrong

Implementation of

ISelect.insertCursorAtPoint

Defined in

src/core/selection/selection.ts#187


removeMarkers

removeMarkers(): void

Remove all markers

Returns

void

Implementation of

ISelect.removeMarkers

Defined in

src/core/selection/selection.ts#236


marker

marker(atStart?, range?): HTMLSpanElement

Create marker element

Parameters

Name Type Default value
atStart boolean false
range? Range undefined

Returns

HTMLSpanElement

Implementation of

ISelect.marker

Defined in

src/core/selection/selection.ts#243


restore

restore(): void

Restores user selections using marker invisible elements in the DOM.

Returns

void

Implementation of

ISelect.restore

Defined in

src/core/selection/selection.ts#288


fakes

fakes(): [] | [Node] | [Node, Node]

Returns

[] | [Node] | [Node, Node]

Implementation of

ISelect.fakes

Defined in

src/core/selection/selection.ts#331


restoreFakes

restoreFakes(fakes): void

Parameters

Name Type
fakes [] | [Node] | [Node, Node]

Returns

void

Implementation of

ISelect.restoreFakes

Defined in

src/core/selection/selection.ts#362


save

save(silent?): MarkerInfo[]

Saves selections using marker invisible elements in the DOM.

Parameters

Name Type Default value Description
silent boolean false Do not change current range

Returns

MarkerInfo[]

Implementation of

ISelect.save

Defined in

src/core/selection/selection.ts#394


focus

focus(options?): boolean

Set focus in editor

Parameters

Name Type
options FocusOptions

Returns

boolean

Implementation of

ISelect.focus

Defined in

src/core/selection/selection.ts#474


isCollapsed

isCollapsed(): boolean

Checks whether the current selection is something or just set the cursor is

Returns

boolean

true Selection does't have content

Implementation of

ISelect.isCollapsed

Defined in

src/core/selection/selection.ts#520


isFocused

isFocused(): boolean

Checks whether the editor currently in focus

Returns

boolean

Implementation of

ISelect.isFocused

Defined in

src/core/selection/selection.ts#535


current

current(checkChild?): Nullable<Node>

Returns the current element under the cursor inside editor

Parameters

Name Type Default value
checkChild boolean true

Returns

Nullable<Node>

Implementation of

ISelect.current

Defined in

src/core/selection/selection.ts#546


insertNode

insertNode(node, insertCursorAfter?, fireChange?): void

Insert element in editor

Parameters

Name Type Default value Description
node Node undefined Node for insert
insertCursorAfter boolean true After insert, cursor will move after element
fireChange boolean true After insert, editor fire change event. You can prevent this behavior

Returns

void

Implementation of

ISelect.insertNode

Defined in

src/core/selection/selection.ts#598


insertHTML

insertHTML(html, insertCursorAfter?): void

Inserts in the current cursor position some HTML snippet

Parameters

Name Type Default value Description
html string | number | Node undefined HTML The text to be inserted into the document
insertCursorAfter boolean true After insert, cursor will move after element

Returns

void

Example

parent.s.insertHTML('<img src="image.png"/>');

Implementation of

ISelect.insertHTML

Defined in

src/core/selection/selection.ts#683


insertImage

insertImage(url, styles?, defaultWidth?): void

Insert image in editor

Parameters

Name Type Default value Description
url string | HTMLImageElement undefined URL for image, or HTMLImageElement
styles Nullable<IDictionary<string>> null If specified, it will be applied $(image).css(styles)
defaultWidth Nullable<string | number> null If specified, it will be applied css('width', defaultWidth)

Returns

void

Implementation of

ISelect.insertImage

Defined in

src/core/selection/selection.ts#738


eachSelection

eachSelection(callback): void

Call callback for all selection node

Parameters

Name Type
callback (current: Node) => void

Returns

void

Implementation of

ISelect.eachSelection

Defined in

src/core/selection/selection.ts#812


cursorInTheEdge

cursorInTheEdge(start, parentBlock, fake?): Nullable<boolean>

Checks if the cursor is at the end(start) block

Parameters

Name Type Default value Description
start boolean undefined true - check whether the cursor is at the start block
parentBlock HTMLElement undefined Find in this
fake null | Node null Node for cursor position

Returns

Nullable<boolean>

true - the cursor is at the end(start) block, null - cursor somewhere outside

Implementation of

ISelect.cursorInTheEdge

Defined in

src/core/selection/selection.ts#936


cursorOnTheLeft

cursorOnTheLeft(parentBlock, fake?): Nullable<boolean>

Wrapper for cursorInTheEdge

Parameters

Name Type
parentBlock HTMLElement
fake? null | Node

Returns

Nullable<boolean>

Implementation of

ISelect.cursorOnTheLeft

Defined in

src/core/selection/selection.ts#1005


cursorOnTheRight

cursorOnTheRight(parentBlock, fake?): Nullable<boolean>

Wrapper for cursorInTheEdge

Parameters

Name Type
parentBlock HTMLElement
fake? null | Node

Returns

Nullable<boolean>

Implementation of

ISelect.cursorOnTheRight

Defined in

src/core/selection/selection.ts#1015


setCursorAfter

setCursorAfter(node): Nullable<Text>

Set cursor after the node

Parameters

Name Type
node Node

Returns

Nullable<Text>

fake invisible textnode. After insert it can be removed

Implementation of

ISelect.setCursorAfter

Defined in

src/core/selection/selection.ts#1027


setCursorBefore

setCursorBefore(node): Nullable<Text>

Set cursor before the node

Parameters

Name Type
node Node

Returns

Nullable<Text>

fake invisible textnode. After insert it can be removed

Implementation of

ISelect.setCursorBefore

Defined in

src/core/selection/selection.ts#1036


setCursorIn

setCursorIn(node, inStart?): Node

Set cursor in the node

Parameters

Name Type Default value Description
node Node undefined Node element
inStart boolean false set cursor in start of element

Returns

Node

Implementation of

ISelect.setCursorIn

Defined in

src/core/selection/selection.ts#1089


selectRange

selectRange(range, focus?): this

Set range selection

Parameters

Name Type Default value
range Range undefined
focus boolean true

Returns

this

Implementation of

ISelect.selectRange

Defined in

src/core/selection/selection.ts#1147


select

select(node, inward?): this

Select node

Parameters

Name Type Default value Description
node Node | HTMLElement | HTMLTableCellElement | HTMLTableElement undefined Node element
inward boolean false select all inside

Returns

this

Implementation of

ISelect.select

Defined in

src/core/selection/selection.ts#1172


wrapInTagGen

wrapInTagGen(fakes?): Generator<HTMLElement, undefined, unknown>

Wrap all selected fragments inside Tag or apply some callback

Parameters

Name Type
fakes? Node[]

Returns

Generator<HTMLElement, undefined, unknown>

Implementation of

ISelect.wrapInTagGen

Defined in

src/core/selection/selection.ts#1224


wrapInTag

wrapInTag(tagOrCallback): HTMLElement[]

Wrap all selected fragments inside Tag or apply some callback

Parameters

Name Type
tagOrCallback HTMLTagNames | (font: HTMLElement) => any

Returns

HTMLElement[]

Implementation of

ISelect.wrapInTag

Defined in

src/core/selection/selection.ts#1292


commitStyle

commitStyle(options): void

Apply some css rules for all selections. It method wraps selections in nodeName tag.

Parameters

Name Type
options IStyleOptions

Returns

void

Example

const editor = Jodit.make('#editor');
editor.value = 'test';
editor.execCommand('selectall');

editor.s.commitStyle({
  style: {color: 'red'}
}) // will wrap `text` in `span` and add style `color:red`
editor.s.commitStyle({
  style: {color: 'red'}
}) // will remove `color:red` from `span`

Implementation of

ISelect.commitStyle

Defined in

src/core/selection/selection.ts#1346


splitSelection

splitSelection(currentBox, edge?): Nullable<Element>

Split selection on two parts: left and right

Parameters

Name Type
currentBox HTMLElement
edge? Node

Returns

Nullable<Element>

Implementation of

ISelect.splitSelection

Defined in

src/core/selection/selection.ts#1357


expandSelection

expandSelection(): this

Returns

this

Implementation of

ISelect.expandSelection

Defined in

jodit/src/core/selection/selection.ts:1466