@ckeditor/ckeditor5-widget

Creating a Simple Widget

This code demonstrates how to create a simple widget in CKEditor 5. It registers a new model element 'simpleWidget' and sets up the necessary conversions for upcasting, data downcasting, and editing downcasting.

import Widget from '@ckeditor/ckeditor5-widget/src/widget';
import Plugin from '@ckeditor/ckeditor5-core/src/plugin';

class SimpleWidget extends Plugin {
  init() {
    const editor = this.editor;
    editor.model.schema.register('simpleWidget', {
      isObject: true,
      allowWhere: '$block'
    });
    editor.conversion.for('upcast').elementToElement({
      model: 'simpleWidget',
      view: 'div'
    });
    editor.conversion.for('dataDowncast').elementToElement({
      model: 'simpleWidget',
      view: 'div'
    });
    editor.conversion.for('editingDowncast').elementToElement({
      model: 'simpleWidget',
      view: (modelElement, viewWriter) => {
        const div = viewWriter.createContainerElement('div');
        return toWidget(div, viewWriter);
      }
    });
  }
}

export default SimpleWidget;

Custom Widget with Editable Content

This code demonstrates how to create a custom widget with editable content. It registers a new model element 'customWidget' and sets up the necessary conversions. The widget contains an inner editable element, allowing users to edit its content directly.

import Widget from '@ckeditor/ckeditor5-widget/src/widget';
import Plugin from '@ckeditor/ckeditor5-core/src/plugin';
import { toWidget, toWidgetEditable } from '@ckeditor/ckeditor5-widget/src/utils';

class CustomWidget extends Plugin {
  init() {
    const editor = this.editor;
    editor.model.schema.register('customWidget', {
      isObject: true,
      allowWhere: '$block',
      allowContentOf: '$root'
    });
    editor.conversion.for('upcast').elementToElement({
      model: 'customWidget',
      view: 'div'
    });
    editor.conversion.for('dataDowncast').elementToElement({
      model: 'customWidget',
      view: 'div'
    });
    editor.conversion.for('editingDowncast').elementToElement({
      model: 'customWidget',
      view: (modelElement, viewWriter) => {
        const div = viewWriter.createContainerElement('div');
        const innerEditable = viewWriter.createEditableElement('div');
        viewWriter.insert(viewWriter.createPositionAt(div, 0), innerEditable);
        return toWidget(div, viewWriter, { label: 'custom widget' });
      }
    });
  }
}

export default CustomWidget;