### Install Docker Environment
Source: https://github.com/xdan/jodit/blob/main/docker/README.md
Run this script to install the necessary Docker environment for Jodit development.
```bash
./install
```
--------------------------------
### Full Uploader Configuration Example
Source: https://github.com/xdan/jodit/blob/main/src/modules/uploader/README.md
A comprehensive example demonstrating various uploader options including URL, headers, data preparation, success/error handling, and response processing.
```javascript
var editor = Jodit.make('#editor', {
uploader: {
url: 'connector/index.php?action=upload',
format: 'json',
headers: {
'X-CSRF-Token': document
.querySelector('meta[name="csrf-token"]')
.getAttribute('content')
},
prepareData: function (data) {
data.append('id', 24); //
},
buildData: function (data) {
return { some: 'data' };
},
data: {
csrf: document
.querySelector('meta[name="csrf-token"]')
.getAttribute('content')
},
isSuccess: function (resp) {
return !resp.error;
},
getMessage: function (resp) {
return resp.msg;
},
process: function (resp) {
return {
files: resp.files || [],
path: resp.path,
baseurl: resp.baseurl,
error: resp.error,
msg: resp.msg
};
},
defaultHandlerSuccess: function (data, resp) {
var i,
field = 'files';
if (data[field] && data[field].length) {
for (i = 0; i < data[field].length; i += 1) {
this.s.insertImage(data.baseurl + data[field][i]);
}
}
},
error: function (e) {
this.message.message(e.getMessage(), 'error', 4000);
}
}
});
```
--------------------------------
### Start Development Server
Source: https://github.com/xdan/jodit/blob/main/CONTRIBUTING.md
Start the Jodit development server for local development and debugging. The default page will open automatically.
```bash
make start
```
--------------------------------
### Alternative Jodit Initialization with Fullsize
Source: https://github.com/xdan/jodit/blob/main/examples/fullsize.html
A concise example of initializing Jodit editor with fullsize enabled, targeting a different element ID. This is useful for quick setup or testing.
```javascript
const editor = Jodit.make('#area_editor', { fullsize: true });
```
--------------------------------
### Install jodit-react wrapper
Source: https://github.com/xdan/jodit/blob/main/docs/getting-started.md
Install the official React wrapper for Jodit using npm or yarn.
```shell
npm install jodit-react
```
```shell
yarn add jodit-react
```
--------------------------------
### Complete Media Plugin Configuration
Source: https://github.com/xdan/jodit/blob/main/src/plugins/media/README.md
An example demonstrating a comprehensive configuration of the Media Plugin with multiple options set.
```typescript
const editor = Jodit.make('#editor', {
mediaInFakeBlock: true,
mediaFakeTag: 'jodit-media',
mediaBlocks: ['video', 'audio', 'iframe']
});
```
--------------------------------
### Clone Repository and Install Dependencies
Source: https://github.com/xdan/jodit/blob/main/CONTRIBUTING.md
Clone the Jodit repository, navigate to the directory, select the Node.js version, and install project dependencies.
```bash
git clone git@github.com:xdan/jodit.git
cd jodit
nvm use
npm ci
```
--------------------------------
### Custom Backspace Plugin Hotkeys Example
Source: https://github.com/xdan/jodit/blob/main/src/plugins/backspace/README.md
Example demonstrating how to override default hotkeys for backspace, delete, word deletion, and sentence deletion.
```javascript
const editor = Jodit.make('#editor', {
delete: {
hotkeys: {
backspace: ['backspace'],
delete: ['delete'],
backspaceWord: ['alt+backspace'],
deleteWord: ['alt+delete']
}
}
});
```
--------------------------------
### Complete Image Properties Plugin Configuration Example
Source: https://github.com/xdan/jodit/blob/main/src/plugins/image-properties/README.md
A comprehensive example demonstrating all available configuration options for the Jodit Image Properties plugin, including dialog dimensions, field visibility, predefined classes, and event handling settings.
```typescript
const editor = Jodit.make('#editor', {
image: {
dialogWidth: 700,
openOnDblClick: true,
editSrc: true,
useImageEditor: true,
editTitle: true,
editAlt: true,
editLink: true,
editSize: true,
editBorderRadius: true,
editMargins: true,
editClass: true,
availableClasses: [
['img-fluid', 'Fluid (100% width)'],
['img-50', '50% width'],
['img-rounded', 'Rounded Corners'],
['img-circle', 'Circle'],
['img-shadow', 'Drop Shadow']
],
editStyle: true,
editId: true,
editAlign: true,
showPreview: true,
selectImageAfterClose: true
}
});
```
--------------------------------
### Run Test PHP Server
Source: https://github.com/xdan/jodit/blob/main/README.md
Start a local PHP server to handle file uploads and browser requests for Jodit.
```bash
php -S localhost:8181 -t ./
```
--------------------------------
### HTML Setup for Custom Icons
Source: https://github.com/xdan/jodit/blob/main/examples/custom-icons.html
Include the Font Awesome library and a textarea element for the Jodit editor initialization.
```html
```
--------------------------------
### Basic Media Wrapping Example
Source: https://github.com/xdan/jodit/blob/main/src/plugins/media/README.md
Demonstrates the default behavior of wrapping a video element in a non-editable container.
```typescript
const editor = Jodit.make('#editor', {
mediaInFakeBlock: true
});
// Insert video element
editor.value = '';
// Automatically wrapped in container
```
--------------------------------
### Full Configuration Example
Source: https://github.com/xdan/jodit/blob/main/src/plugins/stat/README.md
Demonstrates a comprehensive configuration enabling all available stat counter features, including HTML character counting and space inclusion.
```typescript
const editor = Jodit.make('#editor', {
showCharsCounter: true,
countHTMLChars: true,
countTextSpaces: true,
showWordsCounter: true
});
// Shows both counters with HTML char counting
// "Chars: 24 Words: 2" for
Hello world!
```
--------------------------------
### GET Request with Query Parameters
Source: https://github.com/xdan/jodit/blob/main/src/core/request/README.md
When the method is 'GET' and data is an object, parameters are automatically appended to the URL. The example shows how query parameters are formed.
```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();
```
--------------------------------
### Install Jodit PHP Connector
Source: https://github.com/xdan/jodit/blob/main/README.md
Use Composer to install the Jodit PHP connector for FileBrowser and Uploader functionality.
```bash
composer create-project --no-dev jodit/connector
```
--------------------------------
### Start Webpack Hot Reload Server
Source: https://github.com/xdan/jodit/blob/main/docker/README.md
This command starts the webpack development server. Access Jodit at http://localhost:2000/. Press Ctrl+C to stop.
```bash
./start
```
--------------------------------
### HTML Setup for Color Picker
Source: https://github.com/xdan/jodit/blob/main/examples/color-picker.html
Include the a-color-picker library and a textarea element for the Jodit editor.
```html
```
--------------------------------
### Basic Deletion Example
Source: https://github.com/xdan/jodit/blob/main/src/plugins/delete/README.md
Demonstrates basic deletion by selecting all content and then executing the delete command. The editor's value will be updated accordingly.
```javascript
const editor = Jodit.make('#editor');
editor.value = '
Hello
World
';
// Select all text
editor.execCommand('selectall');
// Delete selection
editor.execCommand('delete');
console.log(editor.value); // Empty or default paragraph
```
--------------------------------
### Custom Media Types Example
Source: https://github.com/xdan/jodit/blob/main/src/plugins/media/README.md
Shows how to configure the plugin to wrap additional media element types like iframes and embeds.
```typescript
const editor = Jodit.make('#editor', {
mediaBlocks: ['video', 'audio', 'iframe', 'object', 'embed']
});
// All specified elements will be wrapped
editor.value = '
';
```
--------------------------------
### Initialize Jodit Editor
Source: https://github.com/xdan/jodit/blob/main/src/plugins/preview/README.md
Basic initialization of the Jodit editor. After setup, click the Preview button in the toolbar to see the content.
```typescript
const editor = Jodit.make('#editor');
// Click Preview button in toolbar
```
--------------------------------
### Initialize Jodit with Configuration
Source: https://github.com/xdan/jodit/blob/main/src/README.md
Customize the Jodit editor during initialization by providing a configuration object. This example sets the editor height.
```javascript
Jodit.make('#editor', {
height: 300
});
```
--------------------------------
### Quick Start Ajax Request
Source: https://github.com/xdan/jodit/blob/main/src/core/request/README.md
Instantiate the Ajax class with a URL and send a request. The response can then be processed as text. Remember to call destruct() to clean up resources.
```javascript
const ajax = new Jodit.modules.Ajax({
url: 'https://example.com/api/data'
});
const resp = await ajax.send();
const text = await resp.text();
console.log(text);
ajax.destruct();
```
--------------------------------
### Install Jodit with yarn
Source: https://github.com/xdan/jodit/blob/main/docs/getting-started.md
Use yarn to add Jodit to your project dependencies.
```shell
yarn add jodit
```
--------------------------------
### Run Development Server with Specific Build Mode
Source: https://github.com/xdan/jodit/blob/main/CONTRIBUTING.md
Start the Jodit development server, specifying the build mode, such as 'es2018'. Other options can be found in the Makefile.
```bash
make start es=es2018
```
--------------------------------
### Selection Persistence Example
Source: https://github.com/xdan/jodit/blob/main/src/plugins/focus/README.md
Illustrates how the plugin saves and restores text selection when the editor loses and regains focus.
```javascript
// User selects text: "Hello |World|"
// User clicks outside editor (blur event)
// Selection saved
// User clicks back into editor (focus event)
// Selection restored: "Hello |World|"
```
--------------------------------
### Async Throttle Example
Source: https://github.com/xdan/jodit/blob/main/src/core/async/README.md
Demonstrates the throttle functionality of the Async module. The provided function will execute at most once within the specified interval (100ms), limiting its execution frequency.
```javascript
const b = jodit.async.throttle(() => {
console.log('B');
}, 100);
a();
// Wait for 50mc
a();
// Wait for 50mc
a(); // Output: B
a();
// Wait for 50mc
a();
// Wait for 50mc
a(); // Output: B
```
--------------------------------
### Combined Iframe Configuration
Source: https://github.com/xdan/jodit/blob/main/src/plugins/iframe/README.md
Example demonstrating a comprehensive configuration of the iframe plugin, combining multiple options for styling, base URL, external CSS, and auto-height.
```typescript
const editor = Jodit.make('#editor', {
iframe: true,
iframeTitle: 'Content Editor',
iframeBaseUrl: '/content/',
iframeStyle: `
body {
font-family: Arial, sans-serif;
padding: 20px;
}
h1 { color: #2c3e50; }
a { color: #3498db; }
`,
iframeCSSLinks: [
'/css/editor.css'
],
height: 'auto'
});
```
--------------------------------
### Set Custom Dimensions for Videos
Source: https://github.com/xdan/jodit/blob/main/src/plugins/video/README.md
Configure the default width and height for all inserted videos. This example sets videos to 800x450 pixels.
```typescript
const editor = Jodit.make('#editor', {
video: {
defaultWidth: 800,
defaultHeight: 450
}
});
// All inserted videos use 800x450 dimensions
```
--------------------------------
### Listen to Drag and Drop Events
Source: https://github.com/xdan/jodit/blob/main/src/plugins/drag-and-drop/README.md
Provides examples of listening to the 'afterInsertImage' and 'paste' events, which are triggered by drag-and-drop operations.
```javascript
const editor = Jodit.make('#editor');
editor.e.on('afterInsertImage', (image) => {
console.log('Image inserted via drag-drop:', image.src);
});
editor.e.on('paste', (event) => {
console.log('External content dropped:', event);
});
```
--------------------------------
### Basic Inline Popup and Selection Toolbar Setup
Source: https://github.com/xdan/jodit/blob/main/src/plugins/inline-popup/README.md
Enable the inline popup toolbar for elements and the toolbar for text selections.
```typescript
const editor = Jodit.make('#editor', {
toolbarInline: true,
toolbarInlineForSelection: true
});
```
--------------------------------
### Selection Normalization Before Copy/Cut Example
Source: https://github.com/xdan/jodit/blob/main/src/plugins/select/README.md
Illustrates how selection is expanded to include parent blocks when normalizeSelectionBeforeCutAndCopy is enabled, ensuring consistent copy/paste behavior.
```html
|selected text|
|
selected text
|
```
--------------------------------
### Initiate Drag from Handle
Source: https://github.com/xdan/jodit/blob/main/src/plugins/drag-and-drop-element/README.md
An example of using a drag handle's 'mousedown' event to programmatically start a drag operation for a specific block element.
```javascript
// A drag handle that moves a block when grabbed
handle.addEventListener('mousedown', e => {
editor.e.fire('startDragElement', block, e);
});
```
--------------------------------
### Configure AI Improvement Prompt
Source: https://github.com/xdan/jodit/blob/main/src/plugins/ai-assistant/README.md
Set custom prompts for AI operations. This example shows how to configure the prompt for improving writing quality.
```javascript
const editor = Jodit.make('#editor', {
aiAssistant: {
aiImproveWritingPrompt: 'Improve this text'
}
});
```
--------------------------------
### Insert Vimeo URL Example
Source: https://github.com/xdan/jodit/blob/main/src/plugins/video/README.md
Shows how to insert a Vimeo video by providing its URL. The plugin automatically generates the corresponding iframe embed code.
```typescript
const editor = Jodit.make('#editor');
// Click Video button
// Enter: https://vimeo.com/VIDEO_ID
// Iframe embed code automatically generated
```
--------------------------------
### Add Plugin with Event Listener
Source: https://github.com/xdan/jodit/blob/main/src/core/plugin/README.md
This example adds a plugin that listens for the 'keydown' event using the EventEmitter. It sends analytics data when a key is pressed.
```js
Jodit.plugins.add('keyLogger', jodit => {
jodit.events.on('keydown', e => {
sendAnalytics('keydown', e.key);
});
});
```
--------------------------------
### XPath Path Example
Source: https://github.com/xdan/jodit/blob/main/src/plugins/xpath/README.md
Illustrates the format of the XPath breadcrumb path displayed in the status bar, including the 'Select All' button and element hierarchy.
```plaintext
[Select All] div > p > strong
```
--------------------------------
### Arrow Key Navigation in Table Cells
Source: https://github.com/xdan/jodit/blob/main/src/plugins/table-keyboard-navigation/README.md
Navigate up, down, left, or right between table cells using the arrow keys. This example shows navigation starting from 'Cell 2'.
```typescript
// Cursor in Cell 2:
// Press Left → moves to Cell 1
// Press Right → moves back to Cell 2
// Press Down → moves to Cell 4
// Press Up → moves back to Cell 2
```
--------------------------------
### Initialize Jodit Editor with Options
Source: https://github.com/xdan/jodit/blob/main/public/stand.html
Demonstrates how to create a Jodit editor instance with various configuration options. Use this for customizing the editor's appearance, behavior, and functionality.
```javascript
const editor = Jodit.make('#editorNative', {
// readonly: true,
// showXPathInStatusbar: false,
placeholder: "Start typing...",
toolbar: true,
askBeforePasteHTML: false,
cleanHTML: {
pastedHTML: true,
},
style: {
fontSize: "16px",
lineHeight: "1.5",
padding: "10px",
// minheight: "65vh",
maxheight: "65vh",
},
//iframe: true,
iframeCSS: `
body { margin: 0; padding: 0; font-size: 16px; line-height: 1.5; }
table { border-collapse: collapse !important; width: 100% !important; border: 2px solid #000 !important; }
th, td { border: 2px solid #000 !important; padding: 8px !important; text-align: left !important; }
th { background-color: #f2f2f2 !important; }
`,
contentStyle: `
table { border-collapse: collapse; width: 100%; border: 2px solid black !important; }
th, td { border: 2px solid black !important; padding: 8px !important; text-align: left; }
`,
maxheight: "65vh",
height: 300,
// direction: 'rtl',
// tabIndex: 0,
// shadowRoot: root,
// safeMode: true,
// disablePlugins: ['clean-html'],
//iframe: true,
// buttons: ['paragraph', 'align'],
// theme: 'dark',
// textIcons: true,
controls: {
paragraph: {
// component: 'select',
},
align: {
// component: 'select',
},
font: {
// component: 'select',
},
fontsize: {
// component: 'select',
}
},
// fullsize: true,
cache: true,
language: 'ru',
filebrowser: {
ajax: {
url: 'https://xdsoft.net/jodit/finder2/'
}
},
uploader: {
url: 'https://xdsoft.net/jodit/finder2/?action=fileUpload'
},
link: {
modeClassName: 'select',
selectOptionsClassName: [
{ value: '', text: '' },
{ value: 'val1 yes_one zerro', text: 'text1' },
{ value: 'val2', text: 'text2' },
{ value: 'val3 yes_one', text: 'text3' }
]
},
aiAssistant: {
async aiAssistantCallback(prompt, htmlFragment) {
return `
${'sdsd'.repeat(100)}
`.repeat(100);
// Make API call to OpenAI
return fetch(
'https://api.openai.com/v1/chat/completions',
{
method: 'POST',
mode: 'cors',
headers: {
'Content-Type': 'application/json',
Authorization: 'Bearer ' + Jodit.constants.TOKENS.TOKEN_GPT
},
body: JSON.stringify({
model: 'gpt-3.5-turbo',
messages: [
{ role: 'system', content: prompt },
{ role: 'user', content: htmlFragment }
]
})
}
)
.then(response => response.json())
.then(data => {
if (data.error) {
throw new Error(data.error.message);
}
return (
Jodit.modules.Helpers.get( 'choices.0.message.content', data ) ?? ''
);
});
}
},
// language: 'ja',
i18n: {
ja: {
'Please fill out this field': 'URLを入力してください',
},
},
});
```
--------------------------------
### Create Color Picker Widget with Tabs
Source: https://github.com/xdan/jodit/blob/main/src/modules/widget/color-picker/README.md
This example demonstrates how to create a TabsWidget where each tab contains a ColorPickerWidget. The color selection callback is triggered when a color is chosen.
```javascript
const editor = Jodit.make('#editor');
const tabs = Jodit.modules.TabsWidget(editor, {
Text: Jodit.modules.ColorPickerWidget(
editor,
color => {
alert(color);
},
'#fff'
),
Background: Jodit.modules.ColorPickerWidget(
editor,
color => {
alert(color);
},
'#eee'
)
});
```
--------------------------------
### Full Configuration with Size Options
Source: https://github.com/xdan/jodit/blob/main/src/plugins/size/README.md
Set up the editor with a comprehensive set of size-related options, including responsive width and persistent height storage.
```typescript
const editor = Jodit.make('#editor', {
saveHeightInStorage: true,
height: 500,
width: '100%',
minWidth: 600,
minHeight: 300,
maxWidth: 1400,
maxHeight: 900
});
```
--------------------------------
### Install Speech Recognize Plugin with ES6 Module
Source: https://github.com/xdan/jodit/blob/main/src/plugins/speech-recognize/README.md
Connect the Speech Recognize plugin and its CSS using ES6 module imports. Initialize the Jodit editor after importing.
```javascript
import 'jodit/build/plugins/speech-recognize/speech-recognize.js';
import 'jodit/build/plugins/speech-recognize/speech-recognize.css';
const editor = Jodit.make('#editor');
```
--------------------------------
### Configure JSON Upload with Custom Build Data
Source: https://github.com/xdan/jodit/blob/main/src/modules/uploader/README.md
Example showing how to configure the uploader for JSON content type and customize the data sent using `buildData` and `queryBuild`.
```javascript
Jodit.make('#editor', {
uploader: {
url: 'https://sitename.com/jodit/connector/index.php?action=fileUpload',
queryBuild: function (data) {
return JSON.stringify(data);
},
contentType: function () {
return 'application/json';
},
buildData: function (data) {
return { hello: 'Hello world' };
}
}
});
```
--------------------------------
### GET Request with JSON Response
Source: https://github.com/xdan/jodit/blob/main/src/core/request/README.md
Perform a GET request and parse the JSON response. Ensure to call `destruct()` on the Ajax instance when done.
```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();
}
```
--------------------------------
### Initialize Jodit Instance
Source: https://github.com/xdan/jodit/blob/main/src/core/plugin/README.md
This demonstrates the creation of a Jodit editor instance. All registered plugins are initialized at this moment.
```js
const editor = Jodit.make('#editorId'); // alert('editorId')
```
--------------------------------
### Protocol Detection Example
Source: https://github.com/xdan/jodit/blob/main/src/plugins/image/README.md
Automatically adds a '//' prefix to URLs that lack a protocol but match a domain pattern. This ensures images load with the same protocol as the page.
```typescript
// Input: 'example.com/image.jpg'
// Output: '//example.com/image.jpg'
```
--------------------------------
### Toggle Speech Recognition On/Off
Source: https://github.com/xdan/jodit/blob/main/src/plugins/speech-recognize/README.md
Execute the 'toggleSpeechRecognize' command to start or stop the speech recognition feature. Calling the command once starts it, and calling it again stops it.
```typescript
// Start recognition
editor.execCommand('toggleSpeechRecognize');
// Stop recognition (call again)
editor.execCommand('toggleSpeechRecognize');
```
--------------------------------
### HTML Structure Transformation Example
Source: https://github.com/xdan/jodit/blob/main/src/plugins/wrap-nodes/README.md
Illustrates how the plugin transforms unwrapped text and inline elements into a single block element. This ensures consistent HTML structure.
```html
Text node
inline
More text
Text node inline More text
```
--------------------------------
### Schedule Post Task Example
Source: https://github.com/xdan/jodit/blob/main/src/core/async/README.md
Demonstrates scheduling tasks using the Async module's schedulePostTask method. It supports options like signal, priority, and delay, similar to the browser's Scheduler API.
```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
});
```
--------------------------------
### Listen to afterTab Event
Source: https://github.com/xdan/jodit/blob/main/src/plugins/tab/README.md
Provides an example of how to listen for the 'afterTab' event, which fires after the Tab or Shift+Tab key has been processed. This allows for custom actions based on indentation or outdentation.
```typescript
const editor = Jodit.make('#editor');
editor.e.on('afterTab', (isShift) => {
if (isShift) {
console.log('Outdented (Shift+Tab)');
} else {
console.log('Indented (Tab)');
}
});
```
--------------------------------
### Basic Tab Indentation Example
Source: https://github.com/xdan/jodit/blob/main/src/plugins/tab/README.md
Demonstrates how pressing the Tab key indents a list item, creating a nested sublist. This example shows the transformation from a simple list to a nested one.
```typescript
const editor = Jodit.make('#editor');
// Create list:
//
//
Item 1
//
|Item 2
(cursor here)
//
// Press Tab
// Result:
//
//
Item 1
//
//
Item 2
//
//
//
```
--------------------------------
### Shift+Tab Press: Remove Nested List Example
Source: https://github.com/xdan/jodit/blob/main/src/plugins/tab/README.md
Demonstrates how pressing Shift+Tab outdents a list item from a nested list. This example shows a middle item being moved out, with the remaining items forming a new cloned list.
```html
Item 1
Item 2
Item 3
Item 1
Item 2
Item 3
```
--------------------------------
### Execute Preview Command
Source: https://github.com/xdan/jodit/blob/main/src/plugins/preview/README.md
Demonstrates how to execute the 'preview' command to display the current editor content or custom HTML in a preview dialog.
```typescript
editor.execCommand('preview');
```
```typescript
editor.execCommand('preview', false, '
Custom content
');
```
--------------------------------
### Build Minified Files
Source: https://github.com/xdan/jodit/blob/main/CONTRIBUTING.md
Run this command to create minified build files for the project. This is a standard build process.
```bash
make build
```
--------------------------------
### Install Jodit with npm
Source: https://github.com/xdan/jodit/blob/main/docs/getting-started.md
Use npm to add Jodit to your project dependencies.
```shell
npm install jodit
```
--------------------------------
### toggleSpeechRecognize Command
Source: https://github.com/xdan/jodit/blob/main/src/plugins/speech-recognize/README.md
Toggles the speech recognition functionality on or off. Call once to start, and again to stop.
```APIDOC
## Command: toggleSpeechRecognize
### Description
Toggles speech recognition on/off.
### Example
```typescript
// Start recognition
editor.execCommand('toggleSpeechRecognize');
// Stop recognition (call again)
editor.execCommand('toggleSpeechRecognize');
```
```
--------------------------------
### Autofocus with Cursor at Start
Source: https://github.com/xdan/jodit/blob/main/src/plugins/focus/README.md
Sets up autofocus for an editor where the cursor should be placed at the beginning.
```javascript
const editor = Jodit.make('#editor', {
autofocus: true,
cursorAfterAutofocus: 'start'
});
// Default focus behavior places cursor at start
// No special handling needed
```
--------------------------------
### FileSelectorWidget Integration
Source: https://github.com/xdan/jodit/blob/main/src/plugins/file/README.md
Demonstrates how to instantiate the FileSelectorWidget for handling file selection, uploads, and URL input.
```javascript
FileSelectorWidget(
editor,
{
filebrowser: (data) => { /* handle FileBrowser selection */ },
upload: true, // Enable upload tab
url: (url, text) => { /* handle URL input */ }
},
sourceAnchor, // Existing anchor or null
close, // Close callback
false // isImageMode = false (file mode)
);
```
--------------------------------
### afterInsertImage Event
Source: https://github.com/xdan/jodit/blob/main/src/plugins/resizer/README.md
This event is listened to by the plugin to handle the initial setup of image size.
```APIDOC
## afterInsertImage Event
### Description
Plugin listens to this event to handle initial image size setup.
### Usage
```typescript
editor.e.on('afterInsertImage', (image) => {
console.log('Image inserted:', image);
});
```
```
--------------------------------
### Custom Indent Margin Example
Source: https://github.com/xdan/jodit/blob/main/src/plugins/indent/README.md
Initialize the Jodit editor with a specific indent margin value.
```typescript
const editor = Jodit.make('#editor', {
indentMargin: 20
});
```
--------------------------------
### Customizing commandToHotkeys in Jodit
Source: https://github.com/xdan/jodit/blob/main/src/plugins/hotkeys/README.md
Example of how to customize the `commandToHotkeys` option when initializing a Jodit editor instance.
```typescript
const editor = Jodit.make('#editor', {
commandToHotkeys: {
bold: 'ctrl+b',
italic: ['ctrl+i', 'cmd+i'],
underline: 'ctrl+u'
}
});
```
--------------------------------
### Build Without Plugins
Source: https://github.com/xdan/jodit/blob/main/CONTRIBUTING.md
This command builds the project with specific configurations, excluding certain plugins and enabling ES2021 and UglifyJS. Use this when you need a leaner build.
```bash
make build es=es2021 uglify=true excludePlugins="about,source,bold,image,xpath,stat,class-span,color,clean-html,file,focus,enter,backspace,media,preview,pint,redo-undo,resize-cells,search,spellcheck,table"
```
--------------------------------
### Deleting All Content Example
Source: https://github.com/xdan/jodit/blob/main/src/plugins/delete/README.md
Illustrates the scenario where deleting content results in the entire editor being cleared.
```html
|All content|
```
--------------------------------
### Cursor at Start with Autofocus
Source: https://github.com/xdan/jodit/blob/main/src/plugins/focus/README.md
Configure autofocus to place the cursor at the beginning of the editor's content upon loading.
```javascript
const editor = Jodit.make('#editor', {
autofocus: true,
cursorAfterAutofocus: 'start'
});
// Editor focuses with cursor at beginning
```
--------------------------------
### Compare Bundle Size Against Baseline
Source: https://github.com/xdan/jodit/blob/main/CONTRIBUTING.md
Run this command to compare the current bundle statistics against a committed baseline (`statoscope/reference.json`). The new stats will be saved to `reference.next.json`.
```bash
make statoscope-validate
```
--------------------------------
### Get an Icon
Source: https://github.com/xdan/jodit/blob/main/src/styles/icons/README.md
Retrieves an SVG string for a predefined icon. Use this to inspect or directly insert icons into your layout.
```javascript
console.log(Jodit.modules.Icon.get('cancel')); //