RichTextField

Abstract

An abstract base class for integrating third-party rich text editors (such as TinyMCE, CKEditor, or Quill) as Bryntum form fields. This field renders a <div> as the input target which the editor library attaches to. Subclass this class and implement the onPaint method to initialize your chosen editor. The field's value is managed via the inherited value config and can be used as a cell editor in a Grid.

export default class TinyMceField extends RichTextField {
    static $name = 'TinyMceField';
    static type  = 'tinymcefield';

    onPaint() {
        globalThis.tinymce.init({
            target : this.input,
            inline : true,
            setup  : editor => editor.on('NodeChange',
                () => this.richText = editor.getContent())
        }).then(() => this.input.focus());
    }

    owns(target) {
        return super.owns(target) || target?.closest('.tox-tinymce');
    }
}

TinyMceField.initClass();

Useful configs and properties

See also

• TextAreaField - Plain multiline text field
• Field - Base field class