🎨 Other Configuration Options

⌨️ Keyboard Access

Everything in a row, a column, an element or a piece of text can be done without a mouse. With the cursor in the content, Esc (or Alt+F10) moves to the tools for whatever you are in, and each Esc after that steps out one level: the text tools, the tools of the picture or table you are in, the element, the column and the row, and back to your text. Shift+Esc steps back in.

Each strip is a toolbar in its own right: the arrows move along it, Home and End jump to its ends, and Enter or Space uses a button. A panel that opens from a button takes the focus and hands it back when Esc closes it.

See docs/keyboard-access.md for every key, with worked examples.

Below 970px the tools are hidden, since laying out a page on a narrow screen is awkward. To keep them at every width, set simpleEditingBreakpoint to an empty string:

const builder = new ContentBuilder({
    container: '.container',
    simpleEditingBreakpoint: ''
});

🌈 Color Picker

By default, ContentBuilder includes a color picker with a set of predefined colors. You can customize this list using the colors option:

const builder = new ContentBuilder({
    container: '.container',
    colors: [
        "#ff8f00", "#ef6c00", "#d84315", "#c62828", "#58362f", "#37474f", "#353535",
        "#f9a825", "#9e9d24", "#558b2f", "#ad1457", "#6a1b9a", "#4527a0", "#616161",
        "#00b8c9", "#009666", "#2e7d32", "#0277bd", "#1565c0", "#283593", "#9e9e9e"
    ]
});

This defines the color palette available in the editor’s color picker dropdown.

🏷️ Custom Tags (for CMS Integration)

Custom tags allow you to insert dynamic placeholders into content, which can be replaced with custom values at runtime

You can define custom tags like this:

const builder = new ContentBuilder({
    container: '.container',
    customTags: [
        ["Site Name", "{%SITENAME%}"],
        ["Logo", "{%LOGO%}"],
        ["My Plugin", "{%MY_PLUGIN%}"]
    ]
});

These tags appear in the tags menu (on the editing toolbar) and let users add placeholders directly into their content.

📋 Paste Result Behavior

When users paste content from external sources (like Word or another website), you can control how it is handled using the paste option:

const builder = new ContentBuilder({
    container: '.container',
    paste: 'auto' // or 'html', 'html-without-styles', 'text'
});

Values:

• 'auto' – Pasted content adopts the destination block (for example, pasting a heading into a paragraph keeps it a paragraph) while preserving text formatting such as bold, italic, links, and colors (default)
• 'html' – Full HTML content including styles
• 'html-without-styles' – HTML content without inline style attributes
• 'text' – Only plain text is pasted

Users can also change this behavior at any time from the editor's Preferences dialog.

🧹 Unwanted Markup from Browser Extensions

Some browser extensions add their own elements and attributes to any text area they find, including the editor. That markup is not part of the content, so it is removed when the content is saved: the injected elements and attributes go, and the text they wrapped stays.

This happens automatically. No configuration is needed.

If your users have an extension that isn't covered, add its markup to the cleanup list:

const builder = new ContentBuilder({
    container: '.container',
    extensionArtifacts: {
        elements: ['my-extension-overlay'],     // removed entirely
        wrappers: ['span[data-myext-id]'],      // removed, the text inside is kept
        attributePrefixes: ['data-myext-'],     // attributes removed by prefix
        stylePrefixes: ['--myext-']             // style properties removed by prefix
    }
});

Every list is added to the built-in ones.

Extensions keep working while your users edit. If you would rather they didn't run inside the editing areas at all, you can turn them off there:

const builder = new ContentBuilder({
    container: '.container',
    disableEditorExtensions: true
});

Saved content is cleaned either way.

🗑 Clear Saved Preferences

By default, user preferences (such as theme selection) are saved in the browser's local storage and reused the next time the editor is opened.

To prevent loading previously saved preferences, use:

const builder = new ContentBuilder({
    container: '.container',
    clearPreferences: true
});

This ensures the editor starts fresh each time, ignoring any stored settings.

⚙️ Set Custom Headers for Server Requests

When ContentBuilder.js interacts with a server — such as when using AI features via the sendCommandUrl or other backend integrations — it uses the fetch() API to send requests.

You can customize the HTTP headers sent with these requests using the headers option:

const builder = new ContentBuilder({
    container: '.container',
    headers: {
        'Authorization': 'Bearer YOUR_TOKEN_HERE',
        'X-Custom-Header': 'CustomValue'
    }
});

🔒 Note: The 'Content-Type': 'application/json' header is automatically added by default. You do not need to include it.

These custom headers will be included in all internal fetch() requests made by the editor.