🎨 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, the row and the section, 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.

The toolbar along the top and the panel buttons down the side are part of the page's normal tab order, so Tab reaches them and Enter opens one.

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 contentbox = new ContentBox({
    wrapper: '.is-wrapper',
    simpleEditingBreakpoint: ''
});

🌈 Color Picker

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

const builder = new ContentBox({
    /* options */
    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 ContentBox({
    /* options */
    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 ContentBox({
    /* options */
    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

🧹 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 ContentBox({
    /* options */
    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 ContentBox({
    /* options */
    disableEditorExtensions: true
});

Saved content is cleaned either way.

📋 Control the Editing on Mobile

You can control when the editing interface switches to a mobile-friendly layout using the simpleEditingBreakpoint option.

const builder = new ContentBox({
    /* options */
    simpleEditingBreakpoint: 0 // Show editing controls on mobile (default: '970px')
});

• simpleEditingBreakpoint : Sets the maximum width (in pixels) at which the mobile editing layout is used.
• By default, mobile layout is activated at 970px or below.
• Setting it to 0 disables the mobile layout entirely, always showing the full editing interface.

⚙️ 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 ContentBox({
    /* options */
    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.