📁 Toolbar

ContentBuilder.js provides a flexible toolbar system with different toolbars for different editing contexts. You can customize which buttons appear in each toolbar to match your application’s needs.

🔤 Main Toolbar

The main toolbar appears when a text element is selected.

It supports two rows of buttons:

• The first row is always visible.
• The second row appears when the user clicks the More (⋯) button.

Configuration Options:

• buttons – First row of buttons
• buttonsMore – Second row of buttons

const builder = new ContentBuilder({
    container: '.container',
    buttons: ['bold', 'italic', 'underline', 'formatting', 'color', 'align', 'textsettings', 'createLink', 'tags', '|', 'undo', 'redo', 'zoom', 'preview', 'aiassistant', 'snippets', 'more'],  
    buttonsMore: ['icon', 'svg', 'image', '|', 'list', 'font', 'formatPara', '|', 'html', 'preferences'], 
});

Built-in names you can add here include preview, searchreplace and symbols. preview and searchreplace are already in the default lists; symbols is not, so add it if you want it. Your own buttons work here too — give the name in this list and fill it in with builder.addButton() (see docs/others/TIPS.md).

🖼️ Element Toolbar

The element toolbar appears when a non-text element is selected — such as an image, video, or spacer.

Like the main toolbar, it supports two rows.

Configuration Options:

• elementButtons – First row of buttons
• elementButtonsMore – Second row of buttons

const builder = new ContentBuilder({
    container: '.container',
    elementButtons: ['left', 'center', 'right', 'full' , 'undo', 'redo', 'zoom', 'preview', 'aiassistant', 'snippets', 'more'],  
    elementButtonsMore: ['|', 'html', 'preferences'], 
});

Plugin buttons are also supported here.

🎨 Icon Toolbar

The icon toolbar appears when an icon element is selected.

You can configure both rows like this:

Configuration Options:

• iconButtons – First row of buttons
• iconButtonsMore – Second row of buttons

const builder = new ContentBuilder({
    container: '.container',
    iconButtons: ['icon', 'color','textsettings', 'createLink','|', 'undo', 'redo', 'zoom', 'preview', 'aiassistant', 'snippets', 'more'],  
    iconButtonsMore: ['html', 'preferences'], 
});