Configuration

Basic editor configuration.

Configure Your Editor

Add the necessary styles for the editor to work.

// Theme style variables
import '@texditor/editor/styles/theme.css';
// Main build styles
import '@texditor/editor/styles/editor.css';

You can also create your own custom theme by defining your own set of style variables, using node_modules/@texditor/editor/dist/styles/theme.css as a base.

.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;
    /* ... */
}

/* You can also consider adapting a dark theme. */
@media (prefers-color-scheme: dark) {
    .tex {
        --tex-fill: rgba(45, 45, 45, 0.7);
        --tex-background: #333;
        /* ... */
    }
}

In your application, create an instance of the Texditor class.

JavaScript

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

const editor = new Texditor({
  handle: 'myeditor' // Element identifier
});

HTML

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

This code example is the simplest way to get started. It does not include any extensions, tools, or blocks other than the basic text.

For fine-tuning the editor, proceed to the advanced configuration options in the next step.