Конфигурация

Базовая конфигурация редактора.

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

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

// Переменные стилей темы
import '@texditor/editor/styles/theme.css';
// Основные стили сборки
import '@texditor/editor/styles/editor.css';

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

.tex {
    --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) {
    .tex {
        --tex-fill: rgba(45, 45, 45, 0.7);
        --tex-background: #333;
        /* ... */
    }
}

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

JavaScrypt

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

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

HTML

<div class="myeditor"></div>

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

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