自定义 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) 不会更改元素的 'editability'，它只是创建小部件。因此，当您使用以下内容创建容器元素时：

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

这以后无法 'become' 编辑。

相反，创建一个可编辑元素：

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

自定义 CTA 按钮插件 CK5Editor

Custom CTA button plugin CK5Editor

javascript

plugins

ckeditor

ckeditor5