CKeditor5 - плагин - виджет - состояние

Question

Я (пере) пишу плагин для редактора CK 5. В версии 4 я добавил HTML так:

<span data-id="my-special-value" class="my-widget">My label</span>

Мне нужно значение data-id в PHP, чтобы делать мои вещи. Но я не могу понять, как это сделать в CKeditor 5.

CKeditor 5 работает по-другому. Это очень красиво, но я до сих пор не могу понять, как добавить такой виджет с дополнительным состоянием (атрибут data-id).

Я пытался:

const viewFragment = editor.data.processor.toView(html);
const modelFragment = editor.data.toModel(viewFragment);
editor.model.insertContent( modelFragment );

Мой очень простой код преобразования:

model.schema.register(pluginSlug, {
    isBlock: false,
    isObject: true,
    allowContentOf: '$block',
    allowWhere: [ '$block', '$text'],
});

// Retrieving the data from the editor.
editor.conversion.for('dataDowncast').add( downcastElementToElement( {
    model: pluginSlug,
    view: (modelItem, writer) => {
        const element = writer.createContainerElement( 'span', { class: 'widget form-element-wysiwyg', test: "test" });

        return element;
    }
}) );

// Rendering the editor content to the user for editing.
editor.conversion.for('editingDowncast').add( downcastElementToElement( {
    model: pluginSlug,
    view: (modelItem, writer) => {
        const element = writer.createContainerElement('span', { class: 'widget form-element-wysiwyg', test: "test" });
        const widget = toWidget( element, writer, { label: 'Target Label' });

        return widget;
    }
}) );

// Loading the data to the editor.
editor.conversion.for('upcast').add( upcastElementToElement( {
    view: {
        name: 'span',
        class: 'widget form-element-wysiwyg'
    },
    model: pluginSlug
}) );

Я действительно не могу понять, как с этим справиться. Этот код пытается добавить: <span data-id="my-special-value" class="my-widget">My label</span> но теперь это все еще добавляет: <span class="my-widget">My label</span>

Как вы увидите, он фактически добавляет: <span class="my-widget" test="test">My label</span> из-за кода dataDowncast, но как получить мое состояние из части кода insertContent?

Answer 1

Несколько быстрых советов:

1. Это неверно: allowWhere: [ '$block', '$text']. Вы не можете иметь единственный элемент, ведущий себя как блок и как текст. Вам нужно выбрать один - встроенный или блочный.
2. Видя, что вы используете <span> Я думаю, "inline" - лучший выбор. В CKEditor 5 v12.0.0 (выпущенном пару дней назад) мы представили поддержку встроенных виджетов. Ознакомьтесь с реализацией встроенного руководства для виджетов , которое охватывает пару вещей, которые вам нужно знать, особенно схему.
3. В конвертируемом конвертере у вас есть view.class. Это неверно - есть только view.classes. Кроме того, если вы хотите сопоставить несколько классов, вам нужно использовать массив. См https://ckeditor.com/docs/ckeditor5/latest/api/module_engine_conversion_upcasthelpers-UpcastHelpers.html#function-elementToElement и https://ckeditor.com/docs/ckeditor5/latest/api/module_engine_view_matcher-MatcherPattern.html
4. В CKEditor v12.0.0 методы downcastElementToElement() и upcastElementToElement() были перемещены в другое место в документе. Подробнее читайте в руководстве по миграции .

Наконец, решение о том, как преобразовать data-id и сохранить в модели, заключается в том, что преобразователь с повышением частоты должен установить его для элемента модели. Проверьте этот пример из UpcastHelpers#elementToElement():

editor.conversion.for( 'upcast' ).elementToElement( {
    view: {
        name: 'p',
        classes: 'heading'
    },
    model: ( viewElement, modelWriter ) => {
        return modelWriter.createElement( 'heading', { level: viewElement.getAttribute( 'data-level' ) } );
    }
} );

Как видите, часть model может быть обратным вызовом, возвращающим элемент модели. Он имеет доступ к элементу представления, поэтому вы можете читать нужные атрибуты.

Вы также можете сделать то же самое, используя UpcastHelpers#elementToElement(), а затем UpcastHelpers#attributeToAttribute() отдельно.