Base Configuration
You can add the tools, extensions, blocks, localizations you need and configure them individually according to your preferences.
Let's look at an example of creating an editor instance with both required and additional useful configuration parameters.
javascript
import 'texditor/styles/theme.css';
import Texditor from 'texditor';
import data from "./data.json";
const editor = new Texditor({
// Unique identifier for the editor instance
handle: "texditor",
// String or object with prepared editor data in JSON format (e.g., data.json)
content: data,
// Array of block entities (default: only paragraph)
block: [],
// Array of block action entities (default: not used)
actions: [],
// Array of tool entities (default: all are used)
tools: [],
// Array of extension entities at the top of the editor (default: not used)
extensions: [],
// Maximum number of blocks (default: 0 - no limit)
maxBlocks: 0,
// Default block code
defaultBlock: 'p',
// Current language
locale: 'ru',
// Default language
defaultLocale: 'en',
// List of localization objects
locales: [],
// Fixes the extensions panel at the top of the browser window
extensionsFixed: boolean,
// Additional styles for the extensions panel in fixed mode
extensionsFixedStyle: false,
// Shows the text of extension buttons
extensionVisibleTitle: false,
// Auto-focus on the first editor element
autofocus: false,
// Delay before auto-focus
autofocusDelay: 0,
// Zone where virtual block selection should be activated
selectionZoneElement: document.body,
// Activates hotkeys for working with editor history
historyShortcuts: boolean,
// Event when the editor is fully mounted in the DOM
onReady: (evt) => {
document.getElementById("saveButton")?.click();
},
// Any editor change event
onChange: (evt) => {
console.log(evt);
}
});
/* Saving */
const output = editor.save();
// Or equivalent method
const content = editor.getContent();
// Using events
editor.events.on('focus', (evt) => {
//..
});
// Example of removing a block
const index = 7; // -1 calculation from the current block
editor.blockManager.removeBlock(index);json
[
{
"type": "h1",
"data": [
"Heading H1 with ",
{
"type": "a",
"attr": {
"href": "https://priveted.com",
"target": "_blank"
},
"data": ["link"]
}
]
},
{
"type": "h2",
"data": ["Heading 2"]
},
{
"type": "h3",
"data": ["Heading 3"]
},
{
"type": "p",
"data": [
"Text with ",
{
"type": "a",
"attr": {
"href": "https://priveted.com"
},
"data": ["link"]
}
]
},
{
"type": "code",
"data": ["Code text. <p>Paragraph will not work\n</p>"]
}
]To learn about additional parameters, go to the API.