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