CKeditor5

Question

我正在（重新）为 CK editor 5 编写一个插件。在版本 4 中，我添加了 HTML 这样的：

My label

我需要 PHP 中的数据 ID 值来完成我的工作。但我不知道如何在 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
}) );

我真的不知道如何管理它。此代码尝试添加： My label 但现在它仍然添加： My label

如您所见，它实际上添加了： My label 因为 dataDowncast 代码，但是如何从 insertContent 代码部分获取我的状态？

Answer 1

一些快速建议：

这是不正确的：allowWhere: [ '$block', '$text']。您不能让单个元素既像块又像文本。您需要选择一个 – 内联或块。
看你用我猜"inline"是个更好的选择。在 CKEditor 5 v12.0.0（几天前发布）中，我们引入了对内联小部件的支持。查看 implementing inline widget guide，其中涵盖了一些您需要了解的内容，尤其是架构。
在向上转换中你有 view.class。这是不正确的——只有 view.classes。另外，如果你想匹配多个类你需要使用一个数组。参见 https://ckeditor.com/docs/ckeditor5/latest/api/module_engine_conversion_upcasthelpers-UpcastHelpers.html#function-elementToElement and https://ckeditor.com/docs/ckeditor5/latest/api/module_engine_view_matcher-MatcherPattern.html
在 CKEditor v12.0.0 中，downcastElementToElement() 和 upcastElementToElement() 方法被移动到文档中的不同位置。在 the migration guide.

最后，关于如何upcast data-id 并存储在模型中的解决方法是upcast converter需要在model元素上设置。从 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() 来做同样的事情。

CKeditor5 - 插件 - 小部件 - 状态

CKeditor5 - plugin - widget - state

plugins

widget

ckeditor

state