如何在ASP.NET Core MVC的CKEditor 5经典版中添加Autocomplete插件？

1. 安装Autocomplete相关依赖 #

先确保项目里已安装CKEditor 5的Autocomplete插件包及依赖模块，执行以下命令：

npm install @ckeditor/ckeditor5-autocomplete @ckeditor/ckeditor5-ui

2. 修改编辑器初始化代码 #

你原有的初始化逻辑需要补充插件引入和Autocomplete的配置规则，以下是调整后的完整代码：

<div class="card-body areacls cardBox" contenteditable="true" id="@areaId" data-href="@item.Id" onclick="createEditor('@areaId')">
    @Html.Raw(item.Description)
</div>

<script>
var editors = new Map();

// 示例补全数据源，可替换为业务实际数据
const autocompleteItems = [
    { id: '1', label: '用户A' },
    { id: '2', label: '用户B' },
    { id: '3', label: '标签X' },
    { id: '4', label: '标签Y' }
];

function createEditor(elementId) {
    const elementToReplace = document.getElementById(elementId);
    
    return ClassicEditor
        .create(elementToReplace, {
            // 引入Autocomplete及所需基础插件
            plugins: [ 'Autocomplete', 'Paragraph', 'Bold', 'Italic' ],
            toolbar: [ 'bold', 'italic' ],
            // 配置Autocomplete规则
            autocomplete: {
                // 设置触发自动补全的起始字符
                triggerCharacters: [ '@', '#' ],
                // 根据输入内容过滤补全项
                getItems(queryText) {
                    const normalizedQuery = queryText.toLowerCase();
                    return autocompleteItems.filter(item => 
                        item.label.toLowerCase().includes(normalizedQuery)
                    );
                },
                // 选中补全项后的插入逻辑
                onItemSelected(editor, item) {
                    const model = editor.model;
                    model.change(writer => {
                        // 自定义插入内容格式，这里示例插入带@前缀的文本
                        model.insertContent(writer.createText(`@${item.label} `));
                    });
                }
            }
        })
        .then(editor => {
            editors.set(elementId, editor);
        })
        .catch(err => console.error(err.stack));
}
</script>

关键注意点 #

• 原onclick事件里的createEditor(@areaId)要改成createEditor('@areaId')，因为ID是字符串类型，需加引号传递。
• plugins数组必须包含Autocomplete和编辑器运行所需的基础插件（比如Paragraph是核心基础插件，不能省略）。
• triggerCharacters可根据需求调整，比如只保留@作为触发符。
• getItems方法支持对接后端接口，实现动态获取补全数据源，只需把静态数组替换为异步请求逻辑即可。
• onItemSelected可自定义插入内容的格式，比如插入带样式的文本、链接或其他编辑器支持的节点类型。

内容的提问来源于stack exchange，提问作者Ruman Ali