⚙️ Methods

📥 Load HTML Content Programmatically

To completely replace the current content in the editor with new HTML, use the loadHtml() method:

builder.loadHtml(html);

This is ideal for loading saved content from a database or pre-defined template.

Example:

const myContent = `
    <div class="row">
        <div class="column">
            <h1>Welcome</h1>
            <p>This is your saved content.</p>
        </div>
    </div>
`;

builder.loadHtml(myContent);

📎 Paste HTML Content at Cursor Position

To insert HTML content at the current cursor position, use:

builder.pasteHtmlAtCaret(html);

Example:

const signature = `<p><strong>Best regards,<br>John Doe</strong></p>`;
builder.pasteHtmlAtCaret(signature);

This inserts the given HTML exactly where the cursor is located.

🧩 Insert Custom HTML Snippet Programmatically

You can also insert block snippets using the addSnippet() method:

builder.addSnippet(`
    <div class="row">
        <div class="column">
            <h3>Hello World!</h3>
        </div>
    </div>
`);

⚙️ Programmatically Open Preference Dialog

You can open the Preferences dialog from code using:

builder.viewConfig();

⚙️ Programmatically Open Snippets Dialog

You can open the Snippets dialog from code using:

builder.viewSnippets();

⚙️ Programmatically Open HTML Code Editor

You can open the HTML code editor from code using:

builder.viewHtml();

🖼️ Programmatically Open the Image Editor

The Edit button on an image opens the image editor (crop, straighten, rotate, white balance, tone, film looks, grain). You can open the same editor on any image from your own UI, for example a background image in your own panel:

builder.openImageEditor(url, (newUrl, filename) => {
    // apply newUrl wherever the image is used
    element.style.backgroundImage = `url("${newUrl}")`;
});

The edited image is rendered at full resolution and saved through your upload handler under a new name, so the original file is never overwritten. If no upload handler is configured, newUrl is a data URL.

A third argument is optional: the button that opened the editor, so keyboard focus returns to it when the dialog closes.

builder.openImageEditor(url, callback, button);

⚙️ Disable Column HTML Code Editor

By default, ContentBuilder.js shows an HTML editor button in the column tool popup. This allows users to view and edit the raw HTML of a column.

If you want to hide this button , you can disable it using the columnHtmlEditor option:

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

⚙️ Disable Row HTML Code Editor

By default, ContentBuilder.js shows an HTML editor button in the row tool popup. This allows users to view and edit the raw HTML of a row.

If you want to hide this button , you can disable it using the rowHtmlEditor option:

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

⚙️ Change Element Selection Behavior

By default, when a user presses CMD+A (Mac) or CTRL+A (Windows) inside an editable area, ContentBuilder selects only the current element (such as a paragraph or heading) — not the entire text in a column.

You can control this behavior using the elementSelection option:

const builder = new ContentBuilder({
    container: '.container',
    elementSelection: true // Default behavior
});

• When elementSelection: true – Selects only the current element inside the column.
• When elementSelection: false – Selects the entire column content.

↩️ Programmatically Trigger Undo or Redo

You can also trigger undo or redo actions from your code using the following methods:

builder.undo();  // Reverts the last action

builder.redo();  // Re-applies the last undone action

These are useful when integrating with custom UI elements.

🪟 Build Your Own Dialog

builder.modal() builds a dialog around your content. You supply what goes inside; the shell, title bar, close button, accessibility attributes, padding and dragging are handled for you:

const wordCount = builder.modal({
    title: builder.out('Word Count'),
    width: 320,
    className: 'wordcount',   // optional hook for your own CSS
    html: `
        <div>
            <div style="line-height:1">
                <span class="wc-words" style="font-size:56px;font-weight:700;">0</span>
                <span style="font-size:15px;margin-left:6px;">${builder.out('words')}</span>
            </div>
        </div>`
});

It returns a handle:

wordCount.open();     // show it
wordCount.close();    // hide it
wordCount.body        // the content wrapper - query your own markup from here
wordCount.el          // the dialog element

Pair it with a toolbar button and there is nothing else to wire:

options.buttons = ['bold','italic','underline','wordcount','|','undo','redo','more'];

const html = `<button class="wordcount-button" title="${builder.out('Word Count')}"><!-- icon --></button>`;

builder.addButton('wordcount', html, '.wordcount-button', () => {
    wordCount.body.querySelector('.wc-words').textContent = countWords();
    wordCount.open();
});

Options

See also docs/others/TIPS.md (recipe 7) for the full worked example.

🖥️ Page Preview

A fullscreen preview of the page with a width ruler, for checking the layout at any size without leaving the editor.

builder.openPagePreview();

The frame loads your previewURL, and the content reaches that page through the existing onPreviewOpen hook:

const builder = new ContentBuilder({
    previewURL: 'preview.html',
    onPreviewOpen: () => {
        // default: saves builder.html() to localStorage
    },
});

Nothing happens if previewURL is not set. In ContentBuilder the toolbar button is on by default — 'preview' is part of buttonsMore, elementButtonsMore and iconButtonsMore — and it only appears once previewURL is set, since that is the page it opens.

Not to be confused with openPreview(), which opens Live Preview, the small floating window. They are separate tools and both remain available.

🛑 Destroying the Editor Instance

To completely remove a ContentBuilder instance, use:

builder.destroy();