自定义CTA按钮插件CK5Editor

Question

我开始创建自己的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

}

实际问题

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

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

提前感谢

Answer 1

[我相信，toWidgetEditable(button, viewWriter)不会更改元素的“可编辑性”，它只是创建窗口小部件。因此，当您使用以下方法创建容器元素时：

const button = viewWriter.createContainerElement('button', {
    class: 'cta-button',
})

[以后无法对其进行“编辑”。

相反，使用以下命令创建可编辑的元素：

const button = viewWriter.createEditableElement('button', {
        class: 'cta-button',
    })