Skip to content

CKEditor Widget

Description

The CKEditor Widget integrates CKEditor 5 rich text editor into BigCommerce Page Builder, allowing direct HTML content editing on the page.

Page Builder Name: CKEditor | PapaThemes

Version: 0.1.3

Features

  • ✅ CKEditor 5 integration
  • ✅ Rich text editing
  • ✅ Real-time save
  • ✅ Format toolbar
  • ✅ Image support
  • ✅ Link management
  • ✅ Table support

How to Use

1. Add Widget

  1. Open Page Builder
  2. Drag CKEditor | PapaThemes widget to the page
  3. Widget displays with default content

2. Edit Content

  1. Enable Edit Mode in Page Builder
  2. Click on content area
  3. CKEditor toolbar appears
  4. Edit content
  5. Click Save to save

CKEditor Features

Text Formatting

  • Bold, Italic, Underline
  • Strikethrough
  • Subscript, Superscript

Paragraph Styles

  • Headings (H1-H6)
  • Paragraph
  • Block quote

Lists

  • Bullet list
  • Numbered list
  • To-do list
  • Insert link
  • Edit link
  • Remove link
  • Open in new tab option

Images

  • Insert image
  • Resize
  • Alt text
  • Caption

Tables

  • Insert table
  • Add/remove rows/columns
  • Merge cells
  • Table styling

Alignment

  • Left
  • Center
  • Right
  • Justify

Loading Behavior

Initial Load

// Show loading message
const $loadingMsg = $('<div>Loading CKEditor library...</div>');

// Load CKEditor library
import('./ckeditor.lib.js').then(({ default: initCKEditor }) => {
    initCKEditor(el, saveCallback).then(editor => {
        removeLoadingMessage();
    });
});

Save Callback

const saveCallback = (editor) => {
    // Get data attribute path
    const name = el.getAttribute('data-papathemes-ckeditor-content');

    // Update data object
    data[name] = editor.getData();

    // Send update to Page Builder
    window.BigCommerce.sendWidgetUpdate(data, widgetId);
};

Edit Mode Detection

Widget only activates CKEditor in Page Builder:

// Check if in BC Page Builder
if (!window.BigCommerce || !window.BigCommerce.sendWidgetUpdate) return;

Edit Mode Events

// SDK loaded
{
    action: 'sdk-loaded',
    initiator: 'PAGE_BUILDER',
    callback: init
}

// Toggle edit mode
{
    action: 'toggle-edit-mode',
    initiator: 'PAGE_BUILDER',
    callback: setEditMode
}

Content Structure

<div class="ckeditor-widget">
    <div class="ckeditor-content"
         data-papathemes-ckeditor-content="content">
        <!-- Editable content here -->
    </div>
</div>

Cleanup

Widget automatically cleans up when removed:

const mo = new MutationObserver(mutations => {
    mutations.forEach(mutation => {
        if (mutation.removedNodes.length) {
            mutation.removedNodes.forEach(el => {
                if ($el.data('ckEditorInstance')) {
                    destroyCKEditor(el);
                }
            });
        }
    });
});

mo.observe(regionElement, { childList: true, subtree: true });

Destroy CKEditor

const destroyCKEditor = (el) => {
    const editor = $el.data('ckEditorInstance');
    const content = editor?.getData();

    editor?.destroy().then(() => $el.html(content));
    $el.data('ckEditorInstance', null);
};

Save Button Fix

Widget includes fix for BC Page Builder click events:

$(document).on('click mousedown', function(e) {
    if (
        $(e.target).hasClass('ck-button-save') ||
        $(e.target).closest('.ck-button-save').length > 0
    ) {
        e.stopImmediatePropagation();
        return;
    }
});

Styling

Widget uses SCSS for CKEditor customization:

.ckeditor-widget {
    .ck-editor {
        // Custom CKEditor styles
    }

    .ckeditor-loading-message {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        background: rgba(255,255,255,0.9);
        padding: 10px 15px;
        border-radius: 4px;
        box-shadow: 0 0 10px rgba(0,0,0,0.2);
    }
}

Use Cases

Rich Text Content

- Product descriptions
- Blog posts
- Page content
- Custom HTML sections

Formatted Lists

- Feature lists
- Specifications
- FAQ answers
- Instructions

Tables

- Comparison tables
- Pricing tables
- Specifications
- Schedules

Performance

Lazy Loading

// CKEditor library loaded on demand
import('./ckeditor.lib.js').then(...);
  • Doesn't load in preview
  • Only loads in edit mode
  • Cached after first load

ESM Module

Widget uses ES Module: 

{
    "esm": true
}

Error Handling

Load Error

.catch(error => {
    console.error('Error loading CKEditor:', error);
    $loadingMsg.text('Failed to load CKEditor.')
               .css('color', 'red');
    setTimeout(removeLoadingMessage, 3000);
});

Init Error

.catch(error => {
    console.error('Error initializing CKEditor:', error);
    $loadingMsg.text('Failed to initialize CKEditor.')
               .css('color', 'red');
});

Notes

  1. Edit mode only: CKEditor only works in Page Builder
  2. Save button: Click Save to save changes
  3. HTML clean: CKEditor automatically cleans HTML
  4. Images: Upload via BigCommerce Image Manager
  5. Performance: Library load may take a few seconds
  6. Compatibility: CKEditor 5, not CKEditor 4