Базовая конфигурация

Вы можете добавить необходимые вам инструменты, расширения, блоки, локализации и настроить их индивидуально в соответствии с вашими предпочтениями. Рассмотрим пример создания экземпляра редактора с указанием как обязательных, так и дополнительных полезных параметров его настройки.

app.jsdata.json

javascript

import 'texditor/styles/theme.css';
import Texditor from 'texditor';
import data from "./data.json";

const editor = new Texditor({
  // Уникальный идентификатор экземпляра редактора
  handle: "texditor",
  // Строка или объект с подготовленными данными редактора в формате JSON (например, data.json).
  content: data,
  // Массив сущностей блока (по умолчанию только параграф)
  block: [],
  // Массив сущностей действий блока (по умолчанию не используются)
  actions: [],
  // Массив сущностей инструментов (по умолчанию используются все)
  tools: [];
  // Массив сущностей расширений  в верхней части редактора (по умолчание не используются)
  extensions: [];
  // Максимальное количество блоков (по умолчанию 0 - без ограничений)
  maxBlocks: 0;
  // Код блока по умолчанию
  defaultBlock: 'p';
  // Текущий язык
  locale: 'ru';
  // Язык по умолчанию
  defaultLocale: 'en';
  // Список объектов с локализацией
  locales: [];
  // Фиксирует панель расширений в верхней части окна браузера
  extensionsFixed: boolean;
  // Дополнительные стили панели расширений в режиме фиксации
  extensionsFixedStyle: false;
  // Показывает текст кнопок расширения
  extensionVisibleTitle: false;
  // Автоматическая фокусировка на первый элемент редактора
  autofocus: false;
  // Задержка перед автоматической фокусировкой
  autofocusDelay: 0;
  // Зона в которой следует активировать виртуальное выделение блоков
  selectionZoneElement: document.body;
  // Активирует горячие клавиши для работы с историей редактора
  historyShortcuts: boolean;
  // Событие при полном монтировании редактора в DOM
  onReady: (evt) => {
    document.getElementById("saveButton")?.click();
  },
  // Любое событие изменения редактора
  onChange: (evt) => {
    console.log(evt);
  }
});

/* Сохранение */
const output = editor.save();
// Или равносильный метод
const content = editor.getContent();

// Использование событий
editor.events.on('focus', (evt) => {
  //..
});


// Пример удаления блока
const index = 7; // -1 расчет от текущего блока
editor.blockManger.removeBlock(index);

json

[
  {
    "type": "h1",
    "data": [
      "Заогловок H1 c",
      {
        "type": "a",
        "attr": {
          "href": "https://priveted.com",
          "target": "_blank"
        },
        "data": ["салкой"]
      }
    ]
  },
  {
    "type": "h2",
    "data": ["2 заголовок"]
  },
  {
    "type": "h3",
    "data": ["3 заголовок"]
  },
  {
    "type": "p",
    "data": [
      "Текст с ",
      {
        "type": "a",
        "attr": {
          "href": "https://priveted.com"
        },
        "data": ["сылкой"]
      }
    ]
  },
  {
    "type": "code",
    "data": ["Текст кода. <p>Параграф работать не будет\n </p>"]
  }
]

Чтобы ознакомиться с дополнительными параметрами, перейдите к API.

Базовая конфигурация ​

Базовая конфигурация