Создать не редактируемый блок с текстом в CKEditor 5

Question

Как мне создать не редактируемый блок с текстом в CKEditor 5.

Мне нужно что-то, что в конечном виде генерирует:

<div>Non editable message here</div>

Я пытался использовать UIElement изатем установите innerHTML, но это все еще делает элемент редактируемым.

Просто для справки: это плагин, который я в итоге использовал.

import Plugin from '@ckeditor/ckeditor5-core/src/plugin';
import DecoupledEditor from '@ckeditor/ckeditor5-editor-decoupled/src/decouplededitor';
import Essentials from '@ckeditor/ckeditor5-essentials/src/essentials';
import Paragraph from '@ckeditor/ckeditor5-paragraph/src/paragraph';
import Bold from '@ckeditor/ckeditor5-basic-styles/src/bold';
import Heading from '@ckeditor/ckeditor5-basic-styles/src/bold';
import Italic from '@ckeditor/ckeditor5-basic-styles/src/italic';
import ButtonView from '@ckeditor/ckeditor5-ui/src/button/buttonview';
import imageIcon from '@ckeditor/ckeditor5-core/theme/icons/image.svg';
import Command from '@ckeditor/ckeditor5-core/src/command';
import { downcastElementToElement,downcastAttributeToAttribute,downcastAttributeToElement } from '@ckeditor/ckeditor5-engine/src/conversion/downcast-converters';
import { upcastElementToElement, upcastAttributeToAttribute,modelToViewAttributeConverter} from '@ckeditor/ckeditor5-engine/src/conversion/upcast-converters';
import attachPlaceholder from "@ckeditor/ckeditor5-engine/src/view/placeholder";
import ViewPosition from '@ckeditor/ckeditor5-engine/src/view/position';
import toWidgetEditable from '@ckeditor/ckeditor5-widget/src/utils';
import ClickObserver from '@ckeditor/ckeditor5-engine/src/view/observer/clickobserver';
import UpcastDispatcher from '@ckeditor/ckeditor5-engine/src/conversion/upcastdispatcher'; 
import { toWidget } from '@ckeditor/ckeditor5-widget/src/utils';

export default class TestWidget2 extends Plugin {
    static get pluginName() {
        return 'TestWidget2';
    }

    init() {
        console.log('TestWidget2::init()');
        const editor=this.editor;
        const model=editor.model;

        model.schema.register( 'myWidget', {
            inheritAllFrom: '$block',
            isObject: true
        } );

        editor.conversion.for( 'dataDowncast' )
            .add( downcastElementToElement( {
                model: 'myWidget',
                view: ( modelItem, writer ) => {
                    const elm=writer.createContainerElement( 'div', { class: 'widget' } );
                    return toWidget( div, writer, { label: 'widget label' } );
                }
            } ) );

        editor.conversion.for( 'editingDowncast' )
            .add( downcastElementToElement( {
                model: 'myWidget',
                view: ( modelItem, writer ) => {
                    const div = writer.createContainerElement( 'div', { class: 'widget' } );

                    return toWidget( div, writer, { label: 'widget label' } );
                }
            } ) );

        editor.conversion.for( 'upcast' )
            .add( upcastElementToElement( {
                view: {
                    name: 'div',
                    class: 'widget'
                },
                model: 'myWidget'
            } ) );
    }
}

Answer 1

Для этого вы можете создать API виджета :

import Widget from '@ckeditor/ckeditor5-widget/src/widget';
import { toWidget } from '@ckeditor/ckeditor5-widget/src/utils';
import { downcastElementToElement } from '@ckeditor/ckeditor5-engine/src/conversion/downcast-converters';
import { upcastElementToElement } from '@ckeditor/ckeditor5-engine/src/conversion/upcast-converters';

ClassicEditor
    .create( document.querySelector( '#editor' ), {
        plugins: [ Essentials, Paragraph, Widget, /* ... other plugins ... */ ],
        toolbar: [ 'undo', 'redo' ]
    } )
    .then( editor => {
        window.editor = editor;

        const model = editor.model;

        model.schema.register( 'myWidget', {
            inheritAllFrom: '$block',
            isObject: true
        } );

        editor.conversion.for( 'dataDowncast' )
            .add( downcastElementToElement( {
                model: 'myWidget',
                view: ( modelItem, writer ) => {
                    return writer.createContainerElement( 'div', { class: 'widget' } );
                }
            } ) );

        editor.conversion.for( 'editingDowncast' )
            .add( downcastElementToElement( {
                model: 'myWidget',
                view: ( modelItem, writer ) => {
                    const div = writer.createContainerElement( 'div', { class: 'widget' } );

                    return toWidget( div, writer, { label: 'widget label' } );
                }
            } ) );

        editor.conversion.for( 'upcast' )
            .add( upcastElementToElement( {
                view: {
                    name: 'div',
                    class: 'widget'
                },
                model: 'myWidget'
            } ) );

        editor.setData(
            '<p>foobar</p>' +
            '<div class="widget">Non editable text goes here</div>' +
            '<p>foobar</p>'
        );
    } )
    .catch( err => {
        console.error( err.stack );
    } );

Ключевым моментом является использование функции toWidget() при понижении элемента доредактирование вида.Кроме того, этот элемент должен быть помечен как объект в схеме .

Также не забудьте загрузить плагин Widget, который включает поддержку виджетов.

Answer 2

Согласно документации isReadOnly : Boolean Установите это в истину. Официальная документация