🛠 Customize Editing Controls

ContentBuilder.js gives you full control over the editing interface. This is especially useful when building a focused content editor.

Here’s an example that demonstrates how to tailor the editing experience:

const builder = new ContentBuilder({
    container: '.container',

    columnTool: false, // Hide column tool
    // Configure buttons in the column menu (when columnTool is true)
    // columnMoreButtons: ['moveleft', 'moveright', 'moveup', 'movedown', 'increase', 'decrease', 'duplicate'],
      
    // Configure buttons in the element menu
    elementMoreButtons: ['moveup', 'movedown', 'duplicate'],

    // Configure buttons in the row menu
    rowMoreButtons: ['moveup', 'movedown', 'duplicate'],

    // Configure buttons in the "+" quick add popover
    quickAddButtons: [
        'paragraph', 'headline', 'image', 'list',
        'heading1', 'heading2', 'heading3', 'heading4',
        'quote', 'preformatted', 'map', 'youtube',
        'video', 'audio', 'icon', 'svg', 'table',
        'social', 'code', 'spacer', 'line'
    ],

    // Hide the Quick Add "More" button that opens the snippets dialog
    noSnippets: true,
    
    // Optional: Customize main toolbar buttons
    buttons: ['bold', 'italic', 'underline', 'formatting', 'color', 'align', 'textsettings', 'createLink', 'tags', '|', 'undo', 'redo', 'aiassistant', 'more'],
    buttonsMore: ['icon', 'svg', 'image', '|', 'list', 'font', 'formatPara', '|', 'html'],
    elementButtons: ['left', 'center', 'right', 'full', 'undo', 'redo', 'aiassistant', 'more'],
    elementButtonsMore: ['|', 'html'],
    iconButtons: ['icon', 'color','textsettings', 'createLink','|', 'undo', 'redo', 'aiassistant', 'more'],
    iconButtonsMore: ['html']
});

Key Parameters Explained