javascript - 自定义 CTA 按钮插件 CK5Editor

Question

我开始创建我自己的 CK5 编辑器插件，但现在卡在了用于创建自定义号召性用语按钮的插件上。

我想要什么

我在编辑器工具栏中创建了一个按钮来创建一个新按钮。我想要发生的是创建一个按钮元素，并且用户能够编辑它的文本内容。

<button> [this must be editable text] </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',
    })