TinyMCE 5：可以忽略的自动完成，这样您就可以键入自己的条目

我想帮助用户编写把手/胡须模板，因此当他们键入

{

字符时，会自动完成已知模板值以帮助用户。但是用户可能不想选择建议的选项之一，他们可能只想继续键入新模板值，并以

}

结束。在下面代码中的示例中，选项

“订单号”

和

“交货日期”

是已知的自动完成选项，但我希望用户能够键入

{Invoice Number}

我用一种方法成功地完成了这项工作。当用户键入

{Invoice Number}

时，我将其添加到自动完成

获取

功能中允许的选项列表中。因此，如果单击建议的选项，用户可以在文档中获得他们想要的内容。单击可启动操作功能。我希望

onAction

在用户键入关闭把手字符时立即启动，即

}

这是我尝试过的代码。我用的是TinyMCE 5

    let template = (function () {
        'use strict';

        tinymce.PluginManager.add("template", function (editor, url) {
            const properties = [
                {value: "Order Number", text: "Order Number"},
                {value: "Delivery Date", text: "Delivery Date"}
            ];

            const insertNewProperty = function(value) {
                let property = {value: value, text: value};
                properties.push(property);
                return property;
            };

            editor.ui.registry.addAutocompleter('autocompleter-template', {
                ch: '{',
                minChars: 0,
                columns: 1,
                fetch: function (pattern) {
                    return new tinymce.util.Promise(function (resolve) {
                        let filteredProperties = pattern ? properties.filter(p => p.text.indexOf(pattern) > -1) : properties;
                        if (filteredProperties.length > 0) {
                            resolve(filteredProperties);
                        } else {
                            resolve([{value: pattern, text: pattern}]);
                        }
                    });
                },
                onAction: function (autocompleteApi, rng, value) {
                    let property = properties.find(p => p.value === value);
                    if (!property) {
                        property = insertNewProperty(value)
                    }
                    let content = `{${property.text}}`;

                    editor.selection.setRng(rng);
                    editor.insertContent(content);

                    autocompleteApi.hide();
                }
            });

            return {
                getMetadata: function () {
                    return {
                        name: "Learning",
                        url: "https://stackoverflow.com"
                    };
                }
            };
        });
    }());
})();```

---

您可以将matches函数与onAction一起添加到回调中，这有助于您做到这一点

matches: function (rng, text, pattern) {
        if(pattern.endsWith('}')){
            pattern = pattern.replace('}', '');

            /**
             * Check if pattern does not match an existing 
             * variable and do what you want
             */
            return true;
        }
    },

并确保函数始终返回true