Select

Hierarchy

Select

Implements

ISelect

Methods

applyStyle

applyStyle(style: CanUndef<IStyle>, options?: {
    attributes?: IDictionary<string | number, string>;
    className?: string;
    defaultTag?: keyof HTMLElementTagNameMap;
    element?: keyof HTMLElementTagNameMap;
}): void
Apply some css rules for all selections. It method wraps selections in nodeName tag.

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

editor.s.applyStyle({color: 'red'}) // will wrap `text` in `span` and add style `color:red`
editor.s.applyStyle({color: 'red'}) // will remove `color:red` from `span`
```
Deprecated
Parameters
- style: CanUndef<IStyle>
- options: {
      attributes?: IDictionary<string | number, string>;
      className?: string;
      defaultTag?: keyof HTMLElementTagNameMap;
      element?: keyof HTMLElementTagNameMap;
  } = {}
  - Optional attributes?: IDictionary<string | number, string>
  - Optional className?: string
    
    Deprecated
    Instead use attributes.class
  - Optional defaultTag?: keyof HTMLElementTagNameMap
    
    tag for wrapping and apply styles
  - Optional element?: keyof HTMLElementTagNameMap
    
    equal CSSRule (e.g. strong === font-weight: 700)
Returns void

clear

clear(): void
Clear all selection

Returns void

commitStyle

commitStyle(options: IStyleOptions): void

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

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`

Parameters

options: IStyleOptions

Returns void

createRange

createRange(select?: boolean): Range
Return current selection object
Parameters
- select: boolean = false
  
  Immediately add in selection
Returns Range

current

current(checkChild?: boolean): null | Node
Returns the current element under the cursor inside editor
Parameters
- checkChild: boolean = true
Returns null | Node

cursorInTheEdge

cursorInTheEdge(start: boolean, parentBlock: HTMLElement, fake?: null | Node): Nullable<boolean>
Checks if the cursor is at the end(start) block

Returns
true - the cursor is at the end(start) block, null - cursor somewhere outside
Parameters
- start: boolean
  
  true - check whether the cursor is at the start block
- parentBlock: HTMLElement
  
  Find in this
- fake: null | Node = null
  
  Node for cursor position
Returns Nullable<boolean>

cursorOnTheLeft

cursorOnTheLeft(parentBlock: HTMLElement, fake?: null | Node): Nullable<boolean>
Wrapper for cursorInTheEdge
Parameters
- parentBlock: HTMLElement
- Optional fake: null | Node
Returns Nullable<boolean>

cursorOnTheRight

cursorOnTheRight(parentBlock: HTMLElement, fake?: null | Node): Nullable<boolean>
Wrapper for cursorInTheEdge
Parameters
- parentBlock: HTMLElement
- Optional fake: null | Node
Returns Nullable<boolean>

eachSelection

eachSelection(callback: ((current: Node) => void)): void
Call callback for all selection node
Parameters
- callback: ((current: Node) => void)
  - - (current: Node): void
    - Parameters
      
      current: Node
      
      Returns void
Returns void

expandSelection

expandSelection(): Select
Returns Select

focus

focus(options?: FocusOptions): boolean
Set focus in editor
Parameters
- options: FocusOptions = ...
Returns boolean

insertCursorAtPoint

insertCursorAtPoint(x: number, y: number): boolean
Insert the cursor to any point x, y

Returns
false - Something went wrong
Parameters
- x: number
  
  Coordinate by horizontal
- y: number
  
  Coordinate by vertical
Returns boolean

insertHTML

insertHTML(html: string | number | Node, insertCursorAfter?: boolean): void
Inserts in the current cursor position some HTML snippet

Example
```
parent.s.insertHTML('<img src="image.png"/>');
```
Parameters
- html: string | number | Node
  
  HTML The text to be inserted into the document
- insertCursorAfter: boolean = true
Returns void

insertImage

insertImage(url: string | HTMLImageElement, styles?: Nullable<IDictionary<string, string>>, defaultWidth?: Nullable<string | number>): void
Insert image in editor
Parameters
- url: string | HTMLImageElement
  
  URL for image, or HTMLImageElement
- styles: Nullable<IDictionary<string, string>> = null
  
  If specified, it will be applied $(image).css(styles)
- defaultWidth: Nullable<string | number> = null
Returns void

insertNode

insertNode(node: Node, insertCursorAfter?: boolean, fireChange?: boolean): void
Insert element in editor
Parameters
- node: Node
- 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

isCollapsed

isCollapsed(): boolean
Checks whether the current selection is something or just set the cursor is

Returns
true Selection does't have content

Returns boolean

isFocused

isFocused(): boolean
Checks whether the editor currently in focus

Returns boolean

marker

marker(atStart?: boolean, range?: Range): HTMLSpanElement
Create marker element
Parameters
- atStart: boolean = false
- Optional range: Range
Returns HTMLSpanElement

remove

remove(): void
Remove all selected content

Returns void

removeMarkers

removeMarkers(): void
Remove all markers

Returns void

removeNode

removeNode(node: Node): void
Remove node element from editor
Parameters
- node: Node
Returns void

restore

restore(): void
Restores user selections using marker invisible elements in the DOM.

Returns void

save

save(silent?: boolean): MarkerInfo[]
Saves selections using marker invisible elements in the DOM.
Parameters
- silent: boolean = false
  
  Do not change current range
Returns MarkerInfo[]

select(node: Node | HTMLElement | HTMLTableCellElement | HTMLTableElement, inward?: boolean): Select
Select node
Parameters
- node: Node | HTMLElement | HTMLTableCellElement | HTMLTableElement
- inward: boolean = false
  
  select all inside
Returns Select

selectRange

selectRange(range: Range, focus?: boolean): Select
Set range selection
Parameters
- range: Range
- focus: boolean = true
Returns Select

setCursorAfter

setCursorAfter(node: Node): Nullable<Text>
Set cursor after the node

Returns
fake invisible textnode. After insert it can be removed
Parameters
- node: Node
Returns Nullable<Text>

setCursorBefore

setCursorBefore(node: Node): Nullable<Text>
Set cursor before the node

Returns
fake invisible textnode. After insert it can be removed
Parameters
- node: Node
Returns Nullable<Text>

setCursorIn

setCursorIn(node: Node, inStart?: boolean): Node
Set cursor in the node
Parameters
- node: Node
- inStart: boolean = false
  
  set cursor in start of element
Returns Node

splitSelection

splitSelection(currentBox: HTMLElement, edge?: Node): Nullable<Element>
Split selection on two parts: left and right
Parameters
- currentBox: HTMLElement
- Optional edge: Node
Returns Nullable<Element>

wrapInTag

wrapInTag(tagOrCallback: keyof HTMLElementTagNameMap | ((font: HTMLElement) => any)): HTMLElement[]
Wrap all selected fragments inside Tag or apply some callback
Parameters
- tagOrCallback: keyof HTMLElementTagNameMap | ((font: HTMLElement) => any)
Returns HTMLElement[]

wrapInTagGen

wrapInTagGen(): Generator<HTMLElement, any, unknown>
Wrap all selected fragments inside Tag or apply some callback

Returns Generator<HTMLElement, any, unknown>

Constructors

constructor

new Select(jodit: IJodit): Select
Parameters
- jodit: IJodit
Returns Select

Accessors

hasMarkers

get hasMarkers(): boolean
Check if editor has selection markers

Returns boolean

html

get html(): string

Return current selected HTML

Example

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

Returns string

isInsideArea

get isInsideArea(): boolean
Checks if the selected text is currently inside the editor

Returns boolean

markers

get markers(): HTMLElement[]
Check if editor has selection markers

Returns HTMLElement[]

range

get range(): Range
Return first selected range or create new

Returns Range

sel

get sel(): null | Selection
Return current selection object

Returns null | Selection

Properties

`Readonly` jodit

jodit: IJodit

Jodit PRO

If you like Jodit - try Jodit PRO

Hierarchy

Implements

Index

Methods

Constructors

Accessors

Properties

Methods

applyStyle

Example

Deprecated

Parameters

style: CanUndef<IStyle>

options: { attributes?: IDictionary<string | number, string>; className?: string; defaultTag?: keyof HTMLElementTagNameMap; element?: keyof HTMLElementTagNameMap; } = {}

Optional attributes?: IDictionary<string | number, string>

Optional className?: string

Deprecated

Optional defaultTag?: keyof HTMLElementTagNameMap

Optional element?: keyof HTMLElementTagNameMap

Returns void

clear

Returns void

commitStyle

Example

Parameters

options: IStyleOptions

Returns void

createRange

Parameters

select: boolean = false

Returns Range

current

Parameters

checkChild: boolean = true

Returns null | Node

cursorInTheEdge

Returns

Parameters

start: boolean

parentBlock: HTMLElement

fake: null | Node = null

Returns Nullable<boolean>

cursorOnTheLeft

Parameters

parentBlock: HTMLElement

Optional fake: null | Node

Returns Nullable<boolean>

cursorOnTheRight

Parameters

parentBlock: HTMLElement

Optional fake: null | Node

Returns Nullable<boolean>

eachSelection

Parameters

callback: ((current: Node) => void)

Parameters

current: Node

Returns void

Returns void

expandSelection

Returns Select

focus

Parameters

options: FocusOptions = ...

Returns boolean

insertCursorAtPoint

Returns

Parameters

x: number

y: number

Returns boolean

insertHTML

Example

Parameters

html: string | number | Node

insertCursorAfter: boolean = true

Returns void

insertImage

Parameters

url: string | HTMLImageElement

options: {
attributes?: IDictionary<string | number, string>;
className?: string;
defaultTag?: keyof HTMLElementTagNameMap;
element?: keyof HTMLElementTagNameMap;
} = {}

`Optional` attributes?: IDictionary<string | number, string>

`Optional` className?: string

`Optional` defaultTag?: keyof HTMLElementTagNameMap

`Optional` element?: keyof HTMLElementTagNameMap

`Optional` fake: null | Node

`Optional` fake: null | Node

`Optional` range: Range

`Optional` edge: Node