Selection

A module for working with the cursor, text selections, processing selections, inserting html in place of the cursor.
Most obvious use case

How to insert HTML into Jodit

There is a family of methods for this.ISelect.insertHTML, ISelect.insertNode, ISelect.insertImage.

const jodit = Jodit.make('#editor');
jodit.selection.insertHTML('<span>some html</span>');
jodit.selection.insertNode(document.createElement('div')); // don't do that =) see [[core/create]]
jodit.selection.insertImage('https://somesite.com/image.png');

How to set focus in Jodit editor

const jodit = Jodit.make('#editor');
jodit.selection.focus();

Apply a style to selected text

const jodit = Jodit.make('#editor');
jodit.s.commitStyle({ element: 'h1' }); // Wrap selected text in <h1> tag
jodit.s.commitStyle({ attributes: { className: 'some-class' } }); // Add class to selected text
jodit.s.commitStyle({ attributes: { style: { color: 'red' } } }); // Apply style to selected text
jodit.synchronizeValues();

s - is a shortcut for selection

Classes

Interfaces

states

Const states: Object

Type declaration

Name Type
START "START"
ELEMENT "ELEMENT"
UNWRAP "UNWRAP"
UNWRAP_CHILDREN "UNWRAP_CHILDREN"
CHANGE "CHANGE"
REPLACE_DEFAULT "REPLACE_DEFAULT"
LIST "LIST"
TOGGLE_LIST "TOGGLE_LIST"
WRAP "WRAP"
EXTRACT "EXTRACT"
END "END"
Defined in

src/core/selection/style/transactions.ts#33


transactions

Const transactions: IStyleTransactions

Defined in

jodit/src/core/selection/style/transactions.ts:61

findCorrectCurrentNode

findCorrectCurrentNode(node, range, rightMode, isCollapsed, checkChild, child): Object

Parameters

Name Type
node Node
range Range
rightMode boolean
isCollapsed boolean
checkChild boolean
child (nd: Node) => null | Node

Returns

Object

Name Type
node Node
rightMode boolean

Defined in

jodit/src/core/selection/helpers/index.ts:41