首页 > 解决方案 > 如何将 CKEEditor 5 Bold Plugin 应用于我自己的内联元素

问题描述

我遵循了https://ckeditor.com/docs/ckeditor5/latest/framework/guides/tutorials/implementing-an-inline-widget.html上的实现内联小部件教程。

我想扩展它以启用占位符的粗体。

我添加this.editor.model.schema.extend( 'placeholder', { allowAttributes: 'bold' } );PlaceholderEditing.init(),所以它现在看起来像这样:

    init() {
        this._defineSchema();
        this._defineConverters();

        this.editor.commands.add('placeholder', new PlaceholderCommand(this.editor));

        this.editor.editing.mapper.on(
            'viewToModelPosition',
            viewToModelPositionOutsideModelElement(this.editor.model, viewElement => viewElement.hasClass('placeholder'))
        );
        this.editor.config.define( 'placeholderConfig', {
            types: [ 'date', 'first name', 'surname' ]
        } );
        this.editor.model.schema.extend( 'placeholder', { allowAttributes: 'bold' } ); //ADDED
    }

然后我将占位符包裹在 中<strong></strong>,如下所示:

<strong><span class="placeholder" >{mike}</span></strong>

检查员向我展示了placeholder在模型中添加的属性,如下所示:

在此处输入图像描述

但是,编辑器中呈现的 html 并没有<strong></strong>向下转换

在此处输入图像描述

我怎样才能使这项工作?

标签: ckeditorckeditor5

解决方案


目前似乎没有办法干净地做到这一点。它已经存在问题:https ://github.com/ckeditor/ckeditor5/issues/1633


推荐阅读