@ckeditor/ckeditor5-widget

What is @ckeditor/ckeditor5-widget?

@ckeditor/ckeditor5-widget is a package that provides the base functionality for creating and managing widgets in CKEditor 5. Widgets are special types of content that can be edited and manipulated as a single unit, such as images, tables, or custom blocks.

What are @ckeditor/ckeditor5-widget's main functionalities?

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;

Other packages similar to @ckeditor/ckeditor5-widget

quill

Quill is a modern WYSIWYG editor built for compatibility and extensibility. It provides a rich API for creating custom content and widgets, similar to CKEditor 5's widget system. However, Quill's approach to customization and its API differ significantly from CKEditor 5.

draft-js

Draft.js is a JavaScript rich text editor framework, built for React. It allows developers to create complex editors with custom content blocks and widgets. While it offers similar functionality to CKEditor 5 widgets, it is tightly integrated with React and has a different architecture.

prosemirror

ProseMirror is a toolkit for building rich text editors with a focus on extensibility and customizability. It provides a robust API for creating custom content and widgets, similar to CKEditor 5. ProseMirror's approach is more low-level, offering greater control but requiring more effort to implement complex features.

README

CKEditor 5 widget API

This package implements the widget API for CKEditor 5.

Documentation

See the @ckeditor/ckeditor5-widget package page in CKEditor 5 documentation.

License

Licensed under the GPL, LGPL and MPL licenses, at your choice. For full details about the license, please check the LICENSE.md file.