Quick Start

Basic editor configuration for a quick start.

Set Up Your Editor

Add the necessary styles for operation.

import 'texditor/styles/theme.css';

You can also create your own custom theme by defining your own set of style variables, based on node_modules/texditor/dist/styles/theme.css or 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;
    /* ... */
}

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

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

JavaScript

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

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

// Save editor data
const content = editor.save();
const output = document.getElementById('editor-output');
output?.value = content;

HTML

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

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

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