Selection
- Implements- constructor
- jodit
- sel
- range
- isInsideArea
- hasMarkers
- markers
- html
- createRange
- remove
- clear
- removeNode
- insertCursorAtPoint
- removeMarkers
- marker
- restore
- fakes
- restoreFakes
- save
- focus
- isCollapsed
- isFocused
- current
- insertNode
- insertHTML
- insertImage
- eachSelection
- cursorInTheEdge
- cursorOnTheLeft
- cursorOnTheRight
- setCursorAfter
- setCursorBefore
- setCursorIn
- selectRange
- select
- wrapInTagGen
- wrapInTag
- commitStyle
- splitSelection
- expandSelection
 
selection.Selection
Implements
constructor
new Selection(jodit): Selection
Parameters
| Name | Type | 
|---|---|
| jodit | IJodit | 
Returns
Defined in
src/core/selection/selection.ts#50
jodit
Readonly jodit: IJodit
Defined in
src/core/selection/selection.ts#50
sel
get sel(): null | Selection
Return current selection object
Returns
null | Selection
Implementation of
Defined in
src/core/selection/selection.ts#96
range
get range(): Range
Return first selected range or create new
Returns
Implementation of
Defined in
src/core/selection/selection.ts#110
isInsideArea
get isInsideArea(): boolean
Checks if the selected text is currently inside the editor
Returns
boolean
Implementation of
Defined in
src/core/selection/selection.ts#119
hasMarkers
get hasMarkers(): boolean
Check if editor has selection markers
Returns
boolean
Implementation of
Defined in
src/core/selection/selection.ts#221
markers
get markers(): HTMLElement[]
Check if editor has selection markers
Returns
Implementation of
Defined in
src/core/selection/selection.ts#228
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
Defined in
src/core/selection/selection.ts#1214
createRange
createRange(select?): Range
Return current selection object
Parameters
| Name | Type | Default value | Description | 
|---|---|---|---|
| select | boolean | false | Immediately add in selection | 
Returns
Implementation of
Defined in
src/core/selection/selection.ts#131
remove
remove(): void
Remove all selected content
Returns
void
Implementation of
Defined in
src/core/selection/selection.ts#144
clear
clear(): void
Clear all selection
Returns
void
Implementation of
Defined in
src/core/selection/selection.ts#159
removeNode
removeNode(node): void
Remove node element from editor
Parameters
| Name | Type | 
|---|---|
| node | Node | 
Returns
void
Implementation of
Defined in
src/core/selection/selection.ts#168
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
Defined in
src/core/selection/selection.ts#186
removeMarkers
removeMarkers(): void
Remove all markers
Returns
void
Implementation of
Defined in
src/core/selection/selection.ts#235
marker
marker(atStart?, range?): HTMLSpanElement
Create marker element
Parameters
| Name | Type | Default value | 
|---|---|---|
| atStart | boolean | false | 
| range? | Range | undefined | 
Returns
Implementation of
Defined in
src/core/selection/selection.ts#242
restore
restore(): void
Restores user selections using marker invisible elements in the DOM.
Returns
void
Implementation of
Defined in
src/core/selection/selection.ts#287
fakes
fakes(): [] | [Node] | [Node, Node]
Returns
Implementation of
Defined in
src/core/selection/selection.ts#330
restoreFakes
restoreFakes(fakes): void
Parameters
| Name | Type | 
|---|---|
| fakes | [] | [ Node] | [Node,Node] | 
Returns
void
Implementation of
Defined in
src/core/selection/selection.ts#361
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
Implementation of
Defined in
src/core/selection/selection.ts#393
focus
focus(options?): boolean
Set focus in editor
Parameters
| Name | Type | 
|---|---|
| options | FocusOptions | 
Returns
boolean
Implementation of
Defined in
src/core/selection/selection.ts#473
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
Defined in
src/core/selection/selection.ts#519
isFocused
isFocused(): boolean
Checks whether the editor currently in focus
Returns
boolean
Implementation of
Defined in
src/core/selection/selection.ts#534
current
current(checkChild?): Nullable<Node>
Returns the current element under the cursor inside editor
Parameters
| Name | Type | Default value | 
|---|---|---|
| checkChild | boolean | true | 
Returns
Implementation of
Defined in
src/core/selection/selection.ts#545
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
Defined in
src/core/selection/selection.ts#597
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
Defined in
src/core/selection/selection.ts#698
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
Defined in
src/core/selection/selection.ts#753
eachSelection
eachSelection(callback): void
Call callback for all selection node
Parameters
| Name | Type | 
|---|---|
| callback | ( current:Node) =>void | 
Returns
void
Implementation of
Defined in
src/core/selection/selection.ts#821
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
Defined in
src/core/selection/selection.ts#945
cursorOnTheLeft
cursorOnTheLeft(parentBlock, fake?): Nullable<boolean>
Wrapper for cursorInTheEdge
Parameters
| Name | Type | 
|---|---|
| parentBlock | HTMLElement | 
| fake? | null|Node | 
Returns
Nullable<boolean>
Implementation of
Defined in
src/core/selection/selection.ts#1014
cursorOnTheRight
cursorOnTheRight(parentBlock, fake?): Nullable<boolean>
Wrapper for cursorInTheEdge
Parameters
| Name | Type | 
|---|---|
| parentBlock | HTMLElement | 
| fake? | null|Node | 
Returns
Nullable<boolean>
Implementation of
Defined in
src/core/selection/selection.ts#1024
setCursorAfter
setCursorAfter(node): Nullable<Text>
Set cursor after the node
Parameters
| Name | Type | 
|---|---|
| node | Node | 
Returns
fake invisible textnode. After insert it can be removed
Implementation of
Defined in
src/core/selection/selection.ts#1036
setCursorBefore
setCursorBefore(node): Nullable<Text>
Set cursor before the node
Parameters
| Name | Type | 
|---|---|
| node | Node | 
Returns
fake invisible textnode. After insert it can be removed
Implementation of
Defined in
src/core/selection/selection.ts#1045
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
Implementation of
Defined in
src/core/selection/selection.ts#1098
selectRange
selectRange(range, focus?): this
Set range selection
Parameters
| Name | Type | Default value | 
|---|---|---|
| range | Range | undefined | 
| focus | boolean | true | 
Returns
this
Implementation of
Defined in
src/core/selection/selection.ts#1156
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
Defined in
src/core/selection/selection.ts#1181
wrapInTagGen
wrapInTagGen(fakes?): Generator<HTMLElement, undefined, any>
Wrap all selected fragments inside Tag or apply some callback
Parameters
| Name | Type | 
|---|---|
| fakes? | Node[] | 
Returns
Generator<HTMLElement, undefined, any>
Implementation of
Defined in
src/core/selection/selection.ts#1233
wrapInTag
wrapInTag(tagOrCallback): HTMLElement[]
Wrap all selected fragments inside Tag or apply some callback
Parameters
| Name | Type | 
|---|---|
| tagOrCallback | "object"|"map"|"ul"|"ol"|"a"|"abbr"|"address"|"area"|"article"|"aside"|"audio"|"b"|"base"|"bdi"|"bdo"|"blockquote"|"body"|"br"|"button"|"canvas"|"caption"|"cite"|"code"|"col"|"colgroup"|"data"|"datalist"|"dd"|"del"|"details"|"dfn"|"dialog"|"div"|"dl"|"dt"|"em"|"embed"|"fieldset"|"figcaption"|"figure"|"footer"|"form"|"h1"|"h2"|"h3"|"h4"|"h5"|"h6"|"head"|"header"|"hgroup"|"hr"|"html"|"i"|"iframe"|"img"|"input"|"ins"|"kbd"|"label"|"legend"|"li"|"link"|"main"|"mark"|"menu"|"meta"|"meter"|"nav"|"noscript"|"optgroup"|"option"|"output"|"p"|"picture"|"pre"|"progress"|"q"|"rp"|"rt"|"ruby"|"s"|"samp"|"script"|"search"|"section"|"select"|"slot"|"small"|"source"|"span"|"strong"|"style"|"sub"|"summary"|"sup"|"table"|"tbody"|"td"|"template"|"textarea"|"tfoot"|"th"|"thead"|"time"|"title"|"tr"|"track"|"u"|"var"|"video"|"wbr"|"jodit"|"svg"|"path"|"font"|"jodit-media"| (font:HTMLElement) =>any | 
Returns
Implementation of
Defined in
src/core/selection/selection.ts#1301
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
Defined in
src/core/selection/selection.ts#1355
splitSelection
splitSelection(currentBox, edge?): Nullable<Element>
Split selection on two parts: left and right
Parameters
| Name | Type | 
|---|---|
| currentBox | HTMLElement | 
| edge? | Node | 
Returns
Implementation of
Defined in
src/core/selection/selection.ts#1366
expandSelection
expandSelection(): this
Returns
this
Implementation of
Defined in
jodit/src/core/selection/selection.ts:1475