Jodit Editor

https://github.com/xdan/jodit
Admin
Jodit Editor is an excellent WYSIWYG editor written in pure TypeScript without the use of additional...
Tokens:286,041
Snippets:2,952
Trust Score:9.1
License:MIT
Update:3 weeks ago
Show doc for...
Tokens:
Raw
### Clone, install, and start Jodit

Source: https://github.com/xdan/jodit/blob/main/CONTRIBUTING.md

Full setup: clone, install dependencies, and start the development server. The make start command launches the dev server in debug mode.

```bash
git clone git@github.com:xdan/jodit.git
cd jodit
nvm use
npm ci
make start
```

--------------------------------

### Clone and install Jodit dependencies

Source: https://github.com/xdan/jodit/blob/main/CONTRIBUTING.md

Clones the Jodit repository, switches to the project's Node version, and installs dependencies. Run this before starting development.

```bash
git clone git@github.com:xdan/jodit.git
cd jodit
nvm use
npm ci
```

--------------------------------

### Uploader and Connector Configuration Example

Source: https://github.com/xdan/jodit/blob/main/src/modules/file-browser/README.md

Example of setting up the uploader and individual file browser action URLs.

```javascript
var editor = Jodit.make('#jodit', {
	uploader: {
		url: 'connector/upload.php',
		baseurl: 'images/'
	},
	filebrowser: {
		create: {
			url: 'connector/create.php'
		},
		fileMove: {
			url: 'connector/move.php'
		},
		fileRemove: {
			url: 'connector/remove.php'
		},
		items: {
			url: 'connector/items.php'
		},
		folder: {
			url: 'connector/tree.php'
		}
	}
});
```

--------------------------------

### Initialize Jodit editor with full options

Source: https://github.com/xdan/jodit/blob/main/examples/index.html

Basic Jodit editor setup with a textarea placeholder and a JavaScript initialization using Jodit.make. The configuration includes toolbar buttons, color palettes, and responsive button sets. The editor value is set to '<p>start</p>' after creation.

```html
<textarea id="editor"></textarea>
```

```javascript
var editor = Jodit.make('#editor', {
                zIndex: 0,
                readonly: false,
                activeButtonsInReadOnly: ['source', 'fullsize', 'print', 'about', 'dots'],
                toolbarButtonSize: 'middle',
                theme: 'default',
                saveModeInCookie: false,
                spellcheck: true,
                editorCssClass: false,
                triggerChangeEvent: true,
                width: 'auto',
                height: 'auto',
                minHeight: 100,
                direction: '',
                language: 'auto',
                debugLanguage: false,
                i18n: 'en',
                tabIndex: -1,
                toolbar: true,
                enter: "P",
                defaultMode: Jodit.MODE_WYSIWYG,
                useSplitMode: false,
                colors: {
                    greyscale:  ['#000000', '#434343', '#666666', '#999999', '#B7B7B7', '#CCCCCC', '#D9D9D9', '#EFEFEF', '#F3F3F3', '#FFFFFF'],
                    palette:    ['#980000', '#FF0000', '#FF9900', '#FFFF00', '#00F0F0', '#00FFFF', '#4A86E8', '#0000FF', '#9900FF', '#FF00FF'],
                    full: [
                        '#E6B8AF', '#F4CCCC', '#FCE5CD', '#FFF2CC', '#D9EAD3', '#D0E0E3', '#C9DAF8', '#CFE2F3', '#D9D2E9', '#EAD1DC',
                        '#DD7E6B', '#EA9999', '#F9CB9C', '#FFE599', '#B6D7A8', '#A2C4C9', '#A4C2F4', '#9FC5E8', '#B4A7D6', '#D5A6BD',
                        '#CC4125', '#E06666', '#F6B26B', '#FFD966', '#93C47D', '#76A5AF', '#6D9EEB', '#6FA8DC', '#8E7CC3', '#C27BA0',
                        '#A61C00', '#CC0000', '#E69138', '#F1C232', '#6AA84F', '#45818E', '#3C78D8', '#3D85C6', '#674EA7', '#A64D79',
                        '#85200C', '#990000', '#B45F06', '#BF9000', '#38761D', '#134F5C', '#1155CC', '#0B5394', '#351C75', '#733554',
                        '#5B0F00', '#660000', '#783F04', '#7F6000', '#274E13', '#0C343D', '#1C4587', '#073763', '#20124D', '#4C1130'
                    ]
                },
                colorPickerDefaultTab: 'background',
                imageDefaultWidth: 300,
                removeButtons: [],
                disablePlugins: [],
                extraButtons: [],
                sizeLG: 900,
                sizeMD: 700,
                sizeSM: 400,
                sizeSM: 400,
                buttons: [
                    'source', '|',
                    'bold',
                    'strikethrough',
                    'underline',
                    'italic', '|',
                    'ul',
                    'ol', '|',
                    'outdent', 'indent',  '|',
                    'font',
                    'fontsize',
                    'brush',
                    'paragraph', '|',
                    'image',
                    'video',
                    'table',
                    'link', '|',
                    'align', 'undo', 'redo', '|',
                    'hr',
                    'eraser',
                    'copyformat', '|',
                    'symbol',
                    'fullsize',
                    'print',
                    'about'
                ],
                buttonsXS: [
                    'bold',
                    'image', '|',
                    'brush',
                    'paragraph', '|',
                    'align', '|',
                    'undo', 'redo', '|',
                    'eraser',
                    'dots'
                ],
                events: {},
                textIcons: false,
            });
            editor.setEditorValue('<p>start</p>')
```

--------------------------------

### Install Docker environment for Jodit

Source: https://github.com/xdan/jodit/blob/main/docker/README.md

Installs the Docker environment for Jodit. Run from the 'docker' directory.

```bash
./install
```

--------------------------------

### Open Search Dialog Example

Source: https://github.com/xdan/jodit/blob/main/src/plugins/search/README.md

Example of opening the search dialog.

```typescript
editor.execCommand('openSearchDialog');
```

--------------------------------

### Redo example with API and availability check

Source: https://github.com/xdan/jodit/blob/main/src/plugins/redo-undo/README.md

Example of redoing via command and API, with availability check. Hotkeys: ['ctrl+y', 'ctrl+shift+z', 'cmd+y', 'cmd+shift+z'].

```typescript
// Redo via command
editor.execCommand('redo');

// Redo via API
editor.history.redo();

// Check availability first
if (editor.history.canRedo()) {
    editor.execCommand('redo');
}
```

--------------------------------

### Format Block Usage Examples

Source: https://github.com/xdan/jodit/blob/main/src/plugins/format-block/README.md

Examples demonstrating how to convert content to different block-level elements like headings, blockquotes, and paragraphs.

```typescript
// Convert to heading 2
editor.execCommand('formatblock', false, 'h2');

// Convert to blockquote
editor.execCommand('formatblock', false, 'blockquote');

// Convert back to paragraph
editor.execCommand('formatblock', false, 'p');
```

--------------------------------

### Usage Examples

Source: https://github.com/xdan/jodit/blob/main/src/plugins/inline-popup/README.md

Examples of how to use the Inline Popup Plugin with basic usage, custom popups for links, dynamic popup content, and disabling for specific elements.

```APIDOC
## Usage Examples

### Basic Usage

```typescript
const editor = Jodit.make('#editor', {
    toolbarInline: true,
    toolbarInlineForSelection: true
});
```

### Custom Popup for Links

```typescript
Jodit.make('#editor', {
    popup: {
        a: Jodit.atom(['link', 'unlink', 'delete'])
    }
});
```

### Dynamic Popup Content

```typescript
Jodit.make('#editor', {
    popup: {
        img: (editor, target, close) => {
            return ['delete', 'crop', { text: 'Custom', exec: () => {} }];
        }
    }
});
```

### Disable For Specific Elements

```typescript
Jodit.make('#editor', {
    toolbarInlineDisableFor: ['table', 'img']
});
```
```

--------------------------------

### With Links Example

Source: https://github.com/xdan/jodit/blob/main/src/plugins/key-arrow-outside/README.md

Example with a link element. Shows how the plugin allows the cursor to exit an anchor tag by pressing the right arrow key at the end of the link text.

```typescript
const editor = Jodit.make('#editor');

editor.value = '<p>Click <a href="#">here</a></p>';
// Place cursor at end of "here" (inside <a>)
// Press right arrow key
// Cursor moves outside <a> tag
// Continue typing outside the link
```

--------------------------------

### Start Jodit development server

Source: https://github.com/xdan/jodit/blob/main/CONTRIBUTING.md

Starts the development server in debug mode and opens the default page automatically. Requires the make utility.

```bash
make start
```

--------------------------------

### Preview command example

Source: https://github.com/xdan/jodit/blob/main/src/plugins/preview/README.md

Example usage of the preview command. The first call previews the current editor content; the second passes custom HTML to preview instead.

```typescript
// Preview current editor content
editor.execCommand('preview');

// Preview custom HTML
editor.execCommand('preview', false, '<div>Custom content</div>');
```

--------------------------------

### Install jodit-react via npm

Source: https://github.com/xdan/jodit/blob/main/docs/getting-started.md

Install the official React wrapper for Jodit using npm.

```shell
npm install jodit-react
```

--------------------------------

### Install jodit-react via yarn

Source: https://github.com/xdan/jodit/blob/main/docs/getting-started.md

Install the official React wrapper for Jodit using yarn.

```shell
yarn add jodit-react
```

--------------------------------

### Open Replace Dialog Example

Source: https://github.com/xdan/jodit/blob/main/src/plugins/search/README.md

Example of opening the replace dialog.

```typescript
editor.execCommand('openReplaceDialog');
```

--------------------------------

### applyLineHeight command example

Source: https://github.com/xdan/jodit/blob/main/src/plugins/line-height/README.md

Example of applying line height 1.8 using the applyLineHeight command.

```typescript
// Apply line height 1.8
editor.execCommand('applyLineHeight', false, 1.8);
```

--------------------------------

### Install Jodit via yarn

Source: https://github.com/xdan/jodit/blob/main/docs/getting-started.md

Install Jodit using yarn package manager.

```shell
yarn add jodit
```

--------------------------------

### updateImageProperties.imageproperties event example

Source: https://github.com/xdan/jodit/blob/main/src/plugins/image-properties/README.md

Example of listening to `updateImageProperties.imageproperties` to log the updated image source.

```typescript
editor.e.on('updateImageProperties.imageproperties', (image) => {
    console.log('Image updated:', image.src);
});
```

--------------------------------

### fontsize command example

Source: https://github.com/xdan/jodit/blob/main/src/plugins/font/README.md

Example of applying a font size of 18px to the selected text. First selects text, then executes the command.

```typescript
editor.s.select(); // Select some text
editor.execCommand('fontsize', false, '18px');
```

--------------------------------

### Install PHP Connector with Composer

Source: https://github.com/xdan/jodit/blob/main/README.md

Installs the PHP Connector required for testing FileBrowser and Uploader modules.

```bash
composer create-project --no-dev jodit/connector
```

--------------------------------

### Undo example with API and availability check

Source: https://github.com/xdan/jodit/blob/main/src/plugins/redo-undo/README.md

Example of undoing via command and API, with availability check. Hotkeys: ['ctrl+z', 'cmd+z'].

```typescript
// Undo via command
editor.execCommand('undo');

// Undo via API
editor.history.undo();

// Check availability first
if (editor.history.canUndo()) {
    editor.execCommand('undo');
}
```

--------------------------------

### Schedule API example

Source: https://github.com/xdan/jodit/blob/main/src/core/async/README.md

Using schedulePostTask and scheduleYield for scheduling tasks.

```javascript
await jodit.async.schedulePostTask(() => {
  console.log('A');
});

await jodit.async.scheduleYield();

const result = await jodit.async.schedulePostTask(() => {
  return 'B';
}, {
  signal: new AbortController().signal,
  priority: 'user-blocking'
  delay: 100
});
```

--------------------------------

### Voice Command Mapping Examples

Source: https://github.com/xdan/jodit/blob/main/src/plugins/speech-recognize/README.md

Example command mapping object showing various voice commands, including synonyms and HTML insertion.

```javascript
{
    'bold': 'bold',                           // Toggle bold
    'heading 1': 'formatblock::h1',           // Apply H1
    'insert comma': 'inserthtml::,',          // Insert comma
    'new line|line break': 'enter',           // Multiple synonyms
    'insert logo': 'inserthtml::<img src="logo.png">'  // Insert HTML
}
```

--------------------------------

### Basic Voice Dictation

Source: https://github.com/xdan/jodit/blob/main/src/plugins/speech-recognize/README.md

Example of setting up basic voice dictation with the Jodit editor.

```APIDOC
## Basic Voice Dictation

### Description
Enables speech recognition for dictation. Users click the Speech Recognize button in the toolbar and start speaking; recognized text appears in the editor. Commands like "newline" and "comma" insert line breaks and commas.

### Usage Example
```typescript
import 'jodit/build/plugins/speech-recognize/speech-recognize.js';
import 'jodit/build/plugins/speech-recognize/speech-recognize.css';

const editor = Jodit.make('#editor');

// Click Speech Recognize button in toolbar
// Start speaking - text appears in editor
// Say "newline" to insert line break
// Say "comma" to insert comma
```
```

--------------------------------

### Selection Normalization Example

Source: https://github.com/xdan/jodit/blob/main/src/plugins/select/README.md

Shows how the selection expands to include parent blocks when normalizeSelectionBeforeCutAndCopy is enabled.

```html
<!-- Before -->
<ul><li>|selected text|</li></ul>

<!-- After normalization -->
|<ul><li>selected text</li></ul>|
```

--------------------------------

### Direct Provider Instantiation

Source: https://github.com/xdan/jodit/blob/main/src/core/storage/README.md

Demonstrates instantiating storage providers directly for full control over root keys without automatic key mangling.

```js
const { LocalStorageProvider, MemoryStorageProvider, IndexedDBProvider } = Jodit.modules;

const local = new LocalStorageProvider('rootKey', 'sessionStorage');
local.set('a', 1);

const mem = new MemoryStorageProvider();

const idb = new IndexedDBProvider('myDb', 'keyValueStore');
await idb.set('a', 1);
// IndexedDBProvider also has extras not on the IStorage interface:
await idb.keys(); // ['a']
await idb.values(); // [1]
await idb.entries(); // [['a', 1]]
await idb.close();
```

--------------------------------

### Use i18n method in a plugin

Source: https://github.com/xdan/jodit/blob/main/src/langs/README.md

Shows how to call editor.i18n('Type something') to get the translated string for the current language. In this example, with language 'ru', it returns 'Введите что-либо тут...'.

```javascript
const editor = Jodit.make('#redactor', {
	language: 'ru'
});
console.log(editor.i18n('Type something')); //'Введите что-либо тут...'
```

--------------------------------

### Prefer Full File Paths - Correct Example

Source: https://github.com/xdan/jodit/blob/main/JODIT-DEVELOPMENT-GUIDE.md

Shows the recommended pattern of importing each helper from its full path under the jodit namespace.

```typescript
import { trim } from 'jodit/core/helpers/string/trim';
import { isString } from 'jodit/core/helpers/checkers/is-string';
import { htmlspecialchars } from 'jodit/core/helpers/html/htmlspecialchars';
```

--------------------------------

### Blob URL to Data URI Mapping Example

Source: https://github.com/xdan/jodit/blob/main/src/plugins/image-processor/README.md

Shows the structure of the mapping stored in editor.buffer, mapping a blob URL to its original data URI. This mapping is used for restoration when getting the editor value.

```typescript
{
    'blob:http://localhost:2000/uuid': 'data:image/png;base64,...'
}
```

--------------------------------

### Autofocus with cursorAfterAutofocus: 'start'

Source: https://github.com/xdan/jodit/blob/main/src/plugins/focus/README.md

Creates an editor with autofocus and cursorAfterAutofocus set to 'start'. The default focus behavior places the cursor at the start, so no special handling is needed.

```javascript
const editor = Jodit.make('#editor', {
  autofocus: true,
  cursorAfterAutofocus: 'start'
});

// Default focus behavior places cursor at start
// No special handling needed
```

--------------------------------

### Import Order - Correct Example

Source: https://github.com/xdan/jodit/blob/main/JODIT-DEVELOPMENT-GUIDE.md

Shows the recommended import order: styles, global types/modules, then local types/modules, with blank lines separating groups.

```typescript
import './styles.less';

import type { IJodit } from 'jodit/types';
import { isString } from 'jodit/core/helpers/checkers/is-string';

import type { LocalType } from './interface';
import './config';
```

--------------------------------

### Create and use a Popup

Source: https://github.com/xdan/jodit/blob/main/src/core/ui/popup/README.md

Creates a Popup instance, sets its content to 'Hello world', opens it at coordinates (left: 100, top: 200), and then closes it. The open method takes a function returning the position object.

```javascript
const { Popup } = Jodit.modules;

const popup = new Popup(jodit);
popup.setContent('Hello world').open(() => ({
	left: 100,
	top: 200
}));

popup.close();
```

--------------------------------

### Run all tests with make test or npm test

Source: https://github.com/xdan/jodit/blob/main/CONTRIBUTING.md

Run the full test suite. The first command uses make, the second uses npm.

```sh
make test
```

```bash
npm test
```

--------------------------------

### Full DTD Configuration Example

Source: https://github.com/xdan/jodit/blob/main/src/plugins/dtd/README.md

Shows the complete configuration object for the DTD plugin, including all blockLimits options. Use this to customize the plugin's behavior.

```javascript
const editor = Jodit.make('#editor', {
  dtd: {
    removeExtraBr: true,
    checkBlockNesting: true,
    blockLimits: {
      article: 1,
      aside: 1,
      audio: 1,
      body: 1,
      caption: 1,
      details: 1,
      dir: 1,
      div: 1,
      dl: 1,
      fieldset: 1,
      figcaption: 1,
      figure: 1,
      footer: 1,
      form: 1,
      header: 1,
      hgroup: 1,
      main: 1,
      menu: 1,
      nav: 1,
      ol: 1,
      section: 1,
      table: 1,
      td: 1,
      th: 1,
      tr: 1,
      ul: 1,
      video: 1
    }
  }
});
```

--------------------------------

### Complex Command Example

Source: https://github.com/xdan/jodit/blob/main/src/plugins/speech-recognize/README.md

Example of a comprehensive set of custom voice commands for speech recognition.

```APIDOC
## Complex Command Example

### Description
Demonstrates a complex configuration of voice commands for various editor actions.

### Configuration
- `speechRecognize.lang` (string) - The language code (e.g., 'en-US').
- `speechRecognize.commands` (object) - A map of spoken phrases to Jodit commands.

### Usage Example
```typescript
const editor = Jodit.make('#editor', {
    speechRecognize: {
        lang: 'en-US',
        commands: {
            // Simple text insertion
            'dash|hyphen': 'inserthtml::-',
            'space': 'inserthtml:: ',

            // Formatting commands
            'start bold|bold on': 'bold',
            'stop bold|bold off': 'bold',
            'heading one': 'formatblock::h1',
            'heading two': 'formatblock::h2',
            'normal text|paragraph': 'formatblock::p',

            // Deletion commands
            'delete|backspace': 'delete',
            'delete word': 'backspaceWordButton',
            'delete line': 'backspaceSentenceButton',

            // Navigation/selection
            'select all': 'selectall',
            'new line|line break': 'enter',

            // Custom snippets
            'email': 'inserthtml::user@example.com',
            'phone': 'inserthtml::+1-555-0100',
            'address': 'inserthtml::123 Main St, City, State 12345'
        }
    }
});
```
```

--------------------------------

### insertUnorderedList usage examples

Source: https://github.com/xdan/jodit/blob/main/src/plugins/ordered-list/README.md

Example usage of insertUnorderedList with default, circle, and square bullet styles.

```typescript
// Default bullets
editor.execCommand('insertUnorderedList');

// Circle bullets
editor.execCommand('insertUnorderedList', false, 'circle');

// Square bullets
editor.execCommand('insertUnorderedList', false, 'square');
```

--------------------------------

### With FileBrowser - Jodit.make

Source: https://github.com/xdan/jodit/blob/main/src/plugins/file/README.md

Initializes the editor with FileBrowser configuration. The user can browse and select files from the server, and links are inserted for each selected file.

```javascript
const editor = Jodit.make('#editor', {
  filebrowser: {
    ajax: {
      url: '/api/filebrowser'
    }
  }
});

// User clicks "file" button
// User clicks "Browse" to open FileBrowser
// User selects file(s) from server
// Links inserted for each selected file
```

--------------------------------

### toggleFullSize usage examples

Source: https://github.com/xdan/jodit/blob/main/src/plugins/fullsize/README.md

Example usage of toggleFullSize: toggles, enables, and disables fullscreen mode.

```typescript
// Toggle
editor.toggleFullSize();

// Enable fullscreen
editor.toggleFullSize(true);

// Disable fullscreen
editor.toggleFullSize(false);
```

--------------------------------

### Jodit.make

Source: https://github.com/xdan/jodit/blob/main/src/plugins/video/README.md

Initializes a Jodit editor instance with configuration options, including video plugin settings.

```APIDOC
## Jodit.make

### Description
Initializes a Jodit editor instance with configuration options.

### Method
Jodit.make

### Endpoint
Jodit.make(selector, options?)

### Parameters
#### Parameters
- **selector** (string) - Required - CSS selector for the target element.
- **options** (object) - Optional - Configuration object for the editor.

### Request Example
```typescript
const editor = Jodit.make('#editor', {
    video: {
        parseUrlToVideoEmbed: (url, { width, height }) => {
            // Custom conversion logic
            return `<iframe src="${url}" width="${width}" height="${height}"></iframe>`;
        }
    }
});
```

### Response
#### Success Response
- **editor** (Jodit) - The initialized editor instance.

#### Response Example
```typescript
const editor = Jodit.make('#editor');
```
```

--------------------------------

### Autofocus with Cursor at Start

Source: https://github.com/xdan/jodit/blob/main/src/plugins/focus/README.md

Configures autofocus to place the cursor at the beginning of the content by setting 'cursorAfterAutofocus' to 'start'.

```javascript
const editor = Jodit.make('#editor', {
  autofocus: true,
  cursorAfterAutofocus: 'start'
});

// Editor focuses with cursor at beginning
```

--------------------------------

### HTML page with Jodit PRO via CDN

Source: https://github.com/xdan/jodit/blob/main/docs/getting-started.md

Same as the standard HTML example but uses the PRO version of Jodit. Requires a license key passed to Jodit.make(). Loads from the jodit-pro CDN.

```html
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta
			name="viewport"
			name="viewport"
			content="width=device-width, height=device-height, initial-scale=1.0,
            maximum-scale=1.0"
		/>
		<link
			href="https://cdn.jsdelivr.net/npm/jodit-pro@latest/es2021/jodit.fat.min.css"
			rel="stylesheet"
			type="text/css"
		/>
	</head>
	<body>
		<div id="jodit-editor"></div>
		<script
			type="text/javascript"
			src="https://cdn.jsdelivr.net/npm/jodit-pro@latest/es2021/jodit.fat.min.js"
		></script>
		<script>
			Jodit.make('#jodit-editor', {
				license: '%your license key%'
			});
		</script>
	</body>
</html>
```

--------------------------------

### insertOrderedList usage examples

Source: https://github.com/xdan/jodit/blob/main/src/plugins/ordered-list/README.md

Example usage of insertOrderedList with default numbering, lowercase letters, and Roman numerals.

```typescript
// Default numbering (1, 2, 3...)
editor.execCommand('insertOrderedList');

// Lowercase letters (a, b, c...)
editor.execCommand('insertOrderedList', false, 'lower-alpha');

// Roman numerals (I, II, III...)
editor.execCommand('insertOrderedList', false, 'upper-roman');
```

--------------------------------

### Install via ES6 Module

Source: https://github.com/xdan/jodit/blob/main/src/plugins/speech-recognize/README.md

Import the plugin's JavaScript and CSS files, then initialize Jodit. This plugin is not included in the main build and must be connected separately.

```javascript
import 'jodit/build/plugins/speech-recognize/speech-recognize.js';
import 'jodit/build/plugins/speech-recognize/speech-recognize.css';

const editor = Jodit.make('#editor');
```

--------------------------------

### Start Jodit with es2018 build

Source: https://github.com/xdan/jodit/blob/main/CONTRIBUTING.md

Starts the development server with the es2018 build mode. Other options are available in the Makefile.

```sh
make start es=es2018
```

--------------------------------

### Post-process wrapping example

Source: https://github.com/xdan/jodit/blob/main/src/plugins/wrap-nodes/README.md

Shows the before and after state of post-process wrapping. Loose text nodes and inline elements are wrapped into a paragraph when the enter config is set to 'p'.

```html
<!-- Before -->
Text node
<span>inline</span>
More text

<!-- After (with enter='p') -->
<p>Text node <span>inline</span> More text</p>
```

--------------------------------

### Include custom language file and initialize editor

Source: https://github.com/xdan/jodit/blob/main/src/langs/README.md

HTML example showing how to include Jodit and the custom language file, then initialize the editor with the custom language 'sml'.

```html
<script src="./node_modules/jodit/es2021/jodit.min.js"></script>
<script src="./somepath/sml.js"></script>
<script>
	Jodit.make('#editor', {
		language: 'sml'
	});
</script>
```

--------------------------------

### beautifyHTML event example

Source: https://github.com/xdan/jodit/blob/main/src/plugins/paste-from-word/README.md

Example of listening to the beautifyHTML event to remove empty paragraphs from Word HTML before insertion.

```typescript
editor.e.on('beautifyHTML', (html) => {
    // Remove all empty paragraphs
    return html.replace(/<p>\s*<\/p>/g, '');
});
```

--------------------------------

### openOnDblClick event example

Source: https://github.com/xdan/jodit/blob/main/src/plugins/image-properties/README.md

Example of listening to `openOnDblClick` to prevent the dialog from opening for locked images by returning `false`.

```typescript
editor.e.on('openOnDblClick', (image) => {
    if (image.hasAttribute('data-locked')) {
        alert('This image is locked');
        return false; // Prevent opening
    }
});
```

--------------------------------

### Custom Configuration for Add New Line

Source: https://github.com/xdan/jodit/blob/main/src/plugins/add-new-line/README.md

Example of configuring multiple addNewLine options together.

```javascript
const editor = Jodit.make('#editor', {
    addNewLine: true,
    addNewLineTagsTriggers: ['table', 'img'],
    addNewLineDeltaShow: 15,
    addNewLineOnDBLClick: true
});
```

--------------------------------

### openImageProperties event example

Source: https://github.com/xdan/jodit/blob/main/src/plugins/image-properties/README.md

Example of firing the `openImageProperties` event programmatically to open the image properties dialog for an image in the editor.

```typescript
const img = editor.editor.querySelector('img');
editor.e.fire('openImageProperties', img);
```

--------------------------------

### Set theme and use editor.dlg()

Source: https://github.com/xdan/jodit/blob/main/src/modules/dialog/README.md

Shows two ways to create a themed dialog: directly with the theme option, or via the editor instance which inherits the editor's theme and language. The editor.alert and editor.confirm methods are also demonstrated.

```js
const dialog = new Jodit.modules.Dialog({
	theme: 'dark'
});

// or

const editor = Jodit.make('#editor', {
	theme: 'dark'
});
const dialog = editor.dlg();
dialog.setContent('Hello world!');
dialog.open();

editor.alert('Hello world!');
editor.confirm('Hello world?', yes => {
	console.log('Ok?', yes);
});
```

--------------------------------

### fullsize

Source: https://github.com/xdan/jodit/blob/main/src/plugins/fullsize/README.md

Configuration option to open the editor in fullscreen mode immediately on initialization.

```APIDOC
## fullsize

### Description
Opens the editor in fullscreen mode immediately on initialization.

### Type
boolean

### Default
false

### Example
```typescript
const editor = Jodit.make('#editor', {
    fullsize: true
});
```
```

--------------------------------

### Configure image.showPreview

Source: https://github.com/xdan/jodit/blob/main/src/plugins/image-properties/README.md

Shows live preview of the image in the dialog. The default is true.

```typescript
const editor = Jodit.make('#editor', {
    image: {
        showPreview: true
    }
});
```

--------------------------------

### Configure and open the Jodit image editor

Source: https://github.com/xdan/jodit/blob/main/src/modules/image-editor/README.md

Creates a Jodit instance with image editor options (closeAfterSave, crop, resize, width) and opens the editor on an image URL. The callback receives the action name, data, and success/failed functions; it inserts the resized image into the editor and calls success, or fails if the action is not 'resize'.

```javascript
const jodit = Jodit.make('#editor', {
	imageeditor: {
		closeAfterSave: true,
		crop: false,
		resize: true,
		width: 500
	}
});

jodit.imageeditor.open(
	'https://xdsoft.net/jodit/images/test.png',
	(name, data, success, failed) => {
		const img = jodit.node.c('img');
		img.setAttribute('src', 'https://xdsoft.net/jodit/images/test.png');
		if (box.action !== 'resize') {
			return failed(
				'Sorry it is work only in resize mode. For croping use FileBrowser'
			);
		}
		img.style.width = data.w;
		img.style.height = data.h;
		jodit.s.insertNode(img);
		success();
	}
);
```

--------------------------------

### Custom AJAX Configuration Example

Source: https://github.com/xdan/jodit/blob/main/src/modules/file-browser/README.md

Example of configuring Jodit with custom AJAX endpoints and headers, including CSRF token handling.

```javascript
Jodit.make('#editor2', {
	filebrowser: {
		isSuccess: function (resp) {
			return resp.length !== 0;
		},
		getMessage: function (resp) {
			return resp;
		},
		ajax: {
			url: 'ajax.php',
			method: 'GET',
			headers: {
				'X-CSRF-Token': document
					.querySelector('meta[name="csrf-token"]')
					.getAttribute('content')
			},
			data: {
				someparameter: 1
			},
			prepareData: function (data) {
				data.someparameter++;
				return data;
			},
			process: function (resp) {
				return resp.split('|'); // return items list
			}
		}
	}
});
```

--------------------------------

### Shortest Valid Path - Correct Example

Source: https://github.com/xdan/jodit/blob/main/JODIT-DEVELOPMENT-GUIDE.md

Shows the recommended pattern of using the shortest valid path for each import.

```typescript
import { trim } from 'jodit/core/helpers/string/trim';
import { isString, isUrl } from 'jodit/core/helpers/checkers';
```

--------------------------------

### Custom Server Response Format Example

Source: https://github.com/xdan/jodit/blob/main/src/modules/file-browser/README.md

An example of a simplified JSON response format that requires custom processing in the Jodit configuration.

```json
[
	{
		"name": "pexels-sachin-c-nair-954929.jpg",
		"type": "image"
	},
	{
		"name": "pexels-james-wheeler-417074.jpg",
		"type": "image"
	}
]
```

--------------------------------

### Initialize with basic settings

Source: https://github.com/xdan/jodit/blob/main/src/plugins/inline-popup/README.md

Enables inline popups and selection-based toolbars during editor initialization.

```typescript
const editor = Jodit.make('#editor', {
    toolbarInline: true,
    toolbarInlineForSelection: true
});
```

--------------------------------

### Run PHP Test Server

Source: https://github.com/xdan/jodit/blob/main/README.md

Starts a PHP development server on localhost:8181 to serve the connector files.

```bash
php -S localhost:8181 -t ./
```

--------------------------------

### Insert horizontal rule example

Source: https://github.com/xdan/jodit/blob/main/src/plugins/hr/README.md

Example usage: focuses the editor, inserts a horizontal rule at the cursor, and the cursor is automatically positioned after the HR.

```typescript
// Place cursor where you want the HR
editor.s.focus();

// Insert horizontal rule
editor.execCommand('insertHorizontalRule');

// Cursor is automatically positioned after the HR
```

--------------------------------

### fontname command example

Source: https://github.com/xdan/jodit/blob/main/src/plugins/font/README.md

Example of applying the font family 'Georgia, serif' to the selected text. First selects text, then executes the command.

```typescript
editor.s.select(); // Select some text
editor.execCommand('fontname', false, 'Georgia, serif');
```

--------------------------------

### Navigate to the jodit folder

Source: https://github.com/xdan/jodit/blob/main/CONTRIBUTING.md

Navigate to the package's folder in your development environment.

```bash
$ cd path/to/jodit
```

--------------------------------

### Synchronous Storage with Jodit.modules.Storage

Source: https://github.com/xdan/jodit/blob/main/src/core/storage/README.md

Demonstrates creating a synchronous storage instance and performing basic operations like set, get, exists, delete, and clear.

```js
const { Storage } = Jodit.modules;

// makeStorage(persistentOrStrategy = false, suffix?)
const storage = Storage.makeStorage('localStorage', 'myApp');

storage.set('theme', 'dark'); // chainable — returns `this`
storage.get('theme'); // 'dark'
storage.get('missing'); // undefined
storage.exists('theme'); // true
storage.delete('theme');
storage.clear();
```

--------------------------------

### GET request with query parameters

Source: https://github.com/xdan/jodit/blob/main/src/core/request/README.md

When method is 'GET' and data is an object, parameters are appended to the URL automatically. The comment shows the resulting URL with query string.

```javascript
const ajax = new Jodit.modules.Ajax({
	url: 'https://example.com/api/search',
	data: { q: 'jodit', page: '1', limit: '10' }
});

// Requests: https://example.com/api/search?q=jodit&page=1&limit=10
const resp = await ajax.send();
const results = await resp.json();
ajax.destruct();
```

--------------------------------

### Include Jodit from downloaded archive

Source: https://github.com/xdan/jodit/blob/main/docs/getting-started.md

Include Jodit CSS and JS from a downloaded archive.

```html
<link rel="stylesheet" href="./archive/jodit.min.css" />
<script src="./archive/jodit.min.js"></script>
```

--------------------------------

### Install via CDN

Source: https://github.com/xdan/jodit/blob/main/src/plugins/speech-recognize/README.md

Include the Jodit core and the Speech Recognize plugin from a CDN. The plugin files are loaded after the core script and stylesheet.

```html
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jodit/4.7.6/es2021/jodit.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jodit/4.7.6/es2021/jodit.min.js"></script>

<!-- Speech Recognize Plugin -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jodit/4.7.6/es2021/plugins/speech-recognize/speech-recognize.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jodit/4.7.6/es2021/plugins/speech-recognize/speech-recognize.min.js"></script>
```

--------------------------------

### GET request with JSON response

Source: https://github.com/xdan/jodit/blob/main/src/core/request/README.md

Creates an Ajax instance with a URL and sends a GET request, parsing the response as JSON. Uses try/finally to ensure destruct() is called.

```javascript
const ajax = new Jodit.modules.Ajax({
	url: 'https://example.com/api/users'
});

try {
	const resp = await ajax.send();
	const users = await resp.json();
	console.log(users);
} finally {
	ajax.destruct();
}
```

--------------------------------

### editor.s.insertImage() Usage Examples

Source: https://github.com/xdan/jodit/blob/main/src/plugins/image/README.md

Shows three ways to insert an image: with a URL and width, with CSS styles, and with a created image element. The element example uses editor.createInside.element('img').

```typescript
// Insert with URL
editor.s.insertImage('https://example.com/photo.jpg', null, 300);

// Insert with styles
editor.s.insertImage('https://example.com/photo.jpg', {
    'border': '2px solid red',
    'border-radius': '5px'
}, 400);

// Insert image element
const img = editor.createInside.element('img');
img.src = 'https://example.com/photo.jpg';
editor.s.insertImage(img);
```

--------------------------------

### Configure IFileBrowser.ajax.process

Source: https://github.com/xdan/jodit/blob/main/src/modules/file-browser/README.md

Global configuration to process server responses using the IFileBrowser.ajax.process setting.

```js
Jodit.make('#editor', {
	filebrowser: {
		ajax: {
			url: 'https://sitename.com/connector/index.php', // this parameter is required
			process: resp => {
				return {
					success: true,
					time: '2021-12-23 16:30:01',
					data: {
						sources: [
							{
								baseurl:
									'https://xdsoft.net/jodit/finder/files/',
								path: '/folder/somepath/',
								files: resp,
								name: 'default'
							}
						],
						code: 220
					}
				};
			}
		}
	}
});
```

--------------------------------

### generateDocumentStructure.iframe event handler and example

Source: https://github.com/xdan/jodit/blob/main/src/plugins/iframe/README.md

The handler signature for the 'generateDocumentStructure.iframe' event, which receives the iframe document and the editor instance. The example shows how to customize the document structure by adding a viewport meta tag.

```typescript
(doc: Document | undefined, editor: IJodit) => void
```

```typescript
editor.e.on('generateDocumentStructure.iframe', (doc, editor) => {
    // Customize document structure
    const meta = doc.createElement('meta');
    meta.name = 'viewport';
    meta.content = 'width=device-width, initial-scale=1';
    doc.head.appendChild(meta);
});
```
Tokens:
Raw