自定义CTA按钮插件CK5Editor

我开始创建自己的CK5编辑器插件，现在停留在该插件上以创建自定义号召性用语按钮。

我想要的是

我已经在编辑器工具栏中创建了一个按钮来创建一个新按钮。我想发生的是创建了一个按钮元素，并且用户可以编辑其文本内容。

<button> [this must be editable text] </button>

我被困在那里

因此，到目前为止，我单击工具栏中的动作就创建了一个按钮元素。但是，一旦我开始键入，该按钮就会消失，并创建一个段落。看起来光标似乎在button元素内。我已经阅读了一段时间的API文档，但没有得到更多信息。

到目前为止我的代码

首先，我注册callToAction模式

const schema = this.editor.model.schema

schema.register('callToAction', {
    isObject: true,
    allowWhere: '$block',
    inline: true
})

然后我定义转换器

conversion.for('upcast').elementToElement({
    model: 'callToAction',
    view: {
        name: 'button',
        classes: 'cta-button'
    }
})

conversion.for('dataDowncast').elementToElement({
    model: 'callToAction',
    view: {
        name: 'button',
        classes: 'cta-button'
    }
})

conversion.for('editingDowncast').elementToElement({
    model: 'callToAction',
    view: (modelElement, viewWriter) => {
        /* The Button element is editable on selection */
        const button = viewWriter.createContainerElement('button', {
            class: 'cta-button',
        })

        /* Makes the element editable */
        return toWidgetEditable(button, viewWriter)

    }
})

我还创建了一个命令来执行按钮元素的创建

function createCallToAction(writer) {

    const callToAction = writer.createElement('callToAction')

    return callToAction

}

实际问题

如何使用标准的占位符文本（例如，输入文本）创建按钮，并让用户在按钮内编辑此文本？我已经在互联网上搜索了答案，查看了其他插件，但没有得到我需要的解决方案。

希望有人可以帮助我，或者至少向正确的方向发送我。

提前致谢