Skip to content

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.

dev@priveted.com | priveted.com