Editor

The Stacks editor adds "what you see is what you get" and Markdown capabilities to textareas. It is available as a separate Editor repository, but requires Stacks' CSS for styling.

Because of its size, the Stacks editor is bundled independently of Stacks. You can install it a few ways:

Installation

NPM

The Stacks Editor is available as an NPM package. To make it available in your node modules, npm install @stackoverflow/stacks-editor

Import via Modules or CommonJS

import { StacksEditor } from "@stackoverflow/stacks-editor";
// Don't forget to include the styles as well
import "@stackoverflow/stacks-editor/styles.css";

new StacksEditor(
    document.querySelector("#editor-container"),
    "*Hello* World!",
    {}
);

Import via script tag

<!-- Include the bundled styles -->
<link rel="stylesheet" src="path/to/node_modules/@stackoverflow/stacks-editor/dist/styles.css"/>

<div id="editor-container"></div>

<!-- highlight.js is not included in the bundle, but is required -->
<script src="path/to/highlight.pack.js"></script>
<script src="path/to/node_modules/@stackoverflow/stacks-editor/dist/app.bundle.js"></script>
<script>
    new window.stacksEditor.StacksEditor(
        document.querySelector("#editor-container"),
        "*Hello* World!",
        {}
    );
</script>

Configuration

There are several options you can pass to the Stacks Editor.

Examples

Empty

<div id="editor-example-1"></div>
<script>
    new window.stacksEditor.StacksEditor(
        document.querySelector("#editor-example-1"),
        "",
        {}
    );
</script>

Textarea content with tables enabled

<textarea id="editor-content-2" class="d-none">…</textarea>
<div id="editor-example-2"></div>
<script>
    new window.stacksEditor.StacksEditor(
        document.querySelector("#editor-example-2"),
        document.querySelector("#editor-content-2").value,
        { parserFeatures: { tables: true } }
    );
</script>