如何在 React TypeScript 前端实现自动完成插件？

Question

我正在尝试使用 React TypeScript 和 CKEditor4 构建自定义编辑器，并且我一直在此处遵循本指南https://ckeditor.com/docs/ckeditor4/latest/features/autocomplete.html但提供的示例这里https://ckeditor.com/docs/ckeditor4/latest/features/autocomplete.html是用html编写的。

我一直在尝试使用以下代码在 React 中复制它：

function matchCallback(text, offset) {
        var pattern = /\[{2}([A-z]|\])*$/,
            match = text.slice(0, offset)
                .match(pattern);

        if (!match) {
            return null;
        }

        return {
            start: match.index,
            end: offset
        };
    }

    function dataCallback(matchInfo, callback) {
        var data = PLACEHOLDERS.filter(function (item) {
            var itemName = '[[' + item.name + ']]';
            return itemName.indexOf(matchInfo.query.toLowerCase()) == 0;
        });

        callback(data);
    }
    return (
        <CKEditor
        debug={true}
        // editorUrl="https://your-website.example/ckeditor/ckeditor.js"
        initData="<p>Hello from CKEditor 4!</p>"
        name="my-ckeditor"

        onInstanceReady={({ editor }) => {
            var itemTemplate = '<li data-id="{id}">' +
                '<div><strong class="item-title">{title}</strong></div>' +
                '<div><i>{description}</i></div>' +
                '</li>',
                outputTemplate = '[[{title}]]<span>&nbsp;</span>';

            new editor.plugins.autocomplete(editor.editor, {
                textTestCallback: (range)=>{ if (!range.collapsed) {
                    return null;
                }
        
                return editor.plugins.textMatch.match(range, matchCallback);},
                dataCallback: (matchInfo, callback) => {
                    var data = PLACEHOLDERS.filter(function (item) {
                        var itemName = '[[' + item.name + ']]';
                        return itemName.indexOf(matchInfo.query.toLowerCase()) == 0;
                    });
            
                    callback(data);
                },
                itemTemplate: itemTemplate,
                outputTemplate: outputTemplate
            });

            
        }}
        onFocus={({ editor }) => {
            // Handles native `focus` event.
        }}

        readOnly={false}
        style={{ borderColor: 'blue' }}
        type="classic"
    />

但我收到此错误：

TypeError: editor.plugins.autocomplete is not a constructor 

那么我在这里做错了什么？如何正确实现 React TypeScript 的自动完成插件？

Answer 1

你已经解决了这些问题，我正在尝试做同样的事情