Быстрый старт

Базовая конфигурация редактора для быстрого старта

Настройте ваш редактор

Добавьте необходимые для работы стили

import 'texditor/styles/theme.css';

Вы также можете создать свою собственную пользовательскую тему, определив свой собственный набор переменных стиля, взяв за основу node_modules/texditor/dist/styles/theme.css или https://github.com/texditor/editor/blob/main/src/styles/theme.css

:root {
    --tex-fill: rgba(100, 100, 100, 0.7);
    --tex-background: #fff;
    --tex-color: #222;
    --tex-input-background: #f5f5f5;
    --tex-input-border: rgba(179, 179, 179, 0.2);
    --tex-input-color: #333;
    --tex-color-secondary: #42d392;
    /* ... */
}
 
/* Также можно рассмотреть возможность адаптации тёмной темы. */
@media (prefers-color-scheme: dark) {
    :root {
        --tex-fill: rgba(45, 45, 45, 0.7);
        --tex-background: #333;
        /* ... */
    }
}

В вашем приложении создайте экземпляр класса Texditor.

JavaScrypt

import 'texditor/styles/theme.css'; 
import Texditor from 'texditor';

const editor = new Texditor({
  handle: 'my-editor' // Идентификатор элемента
});

// Сохраняем данные редактора
const content = editor.save();
const output = document.getElementById('editor-output');
output?.value = content;

HTML

<div class="my-editor"></div>
<textarea class="editor-output"></textarea>

Этот вариант кода, конечно, самый простой для начала работы. Он не включает в себя никаких расширений, инструментов или блоков, кроме основного текстового.

Для тонкой настройки редактора перейдите к расширенным параметрам конфигурации на следующем шаге.