Selection

selection.Selection

Implements

constructor

new Selection(jodit): Selection

Parameters

Name Type
jodit IJodit

Returns

Selection

Defined in

src/core/selection/selection.ts#55

jodit

Readonly jodit: IJodit

Defined in

src/core/selection/selection.ts#55

sel

get sel(): null | Selection

Return current selection object

Returns

null | Selection

Implementation of

ISelect.sel

Defined in

src/core/selection/selection.ts#101


range

get range(): Range

Return first selected range or create new

Returns

Range

Implementation of

ISelect.range

Defined in

src/core/selection/selection.ts#115


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#124


hasMarkers

get hasMarkers(): boolean

Check if editor has selection markers

Returns

boolean

Implementation of

ISelect.hasMarkers

Defined in

src/core/selection/selection.ts#226


markers

get markers(): HTMLElement[]

Check if editor has selection markers

Returns

HTMLElement[]

Implementation of

ISelect.markers

Defined in

src/core/selection/selection.ts#233


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#1241

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#136


remove

remove(): void

Remove all selected content

Returns

void

Implementation of

ISelect.remove

Defined in

src/core/selection/selection.ts#149


clear

clear(): void

Clear all selection

Returns

void

Implementation of

ISelect.clear

Defined in

src/core/selection/selection.ts#164


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#173


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#191


removeMarkers

removeMarkers(): void

Remove all markers

Returns

void

Implementation of

ISelect.removeMarkers

Defined in

src/core/selection/selection.ts#240


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#247


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#292


fakes

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

Returns

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

Implementation of

ISelect.fakes

Defined in

src/core/selection/selection.ts#335


restoreFakes

restoreFakes(fakes): void

Parameters

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

Returns

void

Implementation of

ISelect.restoreFakes

Defined in

src/core/selection/selection.ts#366


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#398


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#478


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#524


isFocused

isFocused(): boolean

Checks whether the editor currently in focus

Returns

boolean

Implementation of

ISelect.isFocused

Defined in

src/core/selection/selection.ts#539


current

current(checkChild?): null | Node

Returns the current element under the cursor inside editor

Parameters

Name Type Default value
checkChild boolean true

Returns

null | Node

Implementation of

ISelect.current

Defined in

src/core/selection/selection.ts#550


insertNode

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

Insert element in editor

Parameters

Name Type Default value Description
node Node undefined -
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#631


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 -

Returns

void

Example

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

Implementation of

ISelect.insertHTML

Defined in

src/core/selection/selection.ts#715


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 -

Returns

void

Implementation of

ISelect.insertImage

Defined in

src/core/selection/selection.ts#769


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#843


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#963


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#1043


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#1053


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#1065


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#1074


setCursorIn

setCursorIn(node, inStart?): Node

Set cursor in the node

Parameters

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

Returns

Node

Implementation of

ISelect.setCursorIn

Defined in

src/core/selection/selection.ts#1126


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#1184


select

select(node, inward?): this

Select node

Parameters

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

Returns

this

Implementation of

ISelect.select

Defined in

src/core/selection/selection.ts#1208


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#1260


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#1328


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#1382


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#1393


expandSelection

expandSelection(): this

Returns

this

Implementation of

ISelect.expandSelection

Defined in

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