CKEditor 5自定义提及输出：替换为纯文本并移除@标记方案咨询

当然可以实现这个需求，核心是在CKEditor提及插件的选中回调里，跳过默认的元素插入逻辑，直接处理@标记的删除和纯文本的插入。

核心实现步骤 #

• 监听提及插件的select事件，获取选中项的link值
• 定位并删除编辑器中触发用的@字符
• 插入纯文本格式的link内容，同时阻止插件默认的元素插入行为

完整代码示例 #

ClassicEditor
    .create(document.querySelector('#editor'), {
        mention: {
            feeds: [
                {
                    marker: '@',
                    feed: [
                        { id: 1, name: 'Barney Stinson', link: 'barney.stinson@example.com' },
                        { id: 2, name: 'Lily Aldrin', link: 'lily.aldrin@example.com' }
                    ],
                    // 自定义提及列表项的显示样式（可选，保持默认风格）
                    itemRenderer: item => {
                        const span = document.createElement('span');
                        span.textContent = item.name;
                        return span;
                    },
                    // 核心处理逻辑：选中提及项后的操作
                    onSelect: (evt, data) => {
                        const editor = evt.source;
                        const model = editor.model;

                        model.change(writer => {
                            // 定位并删除触发用的@标记
                            const selectionRange = model.document.selection.getFirstRange();
                            const startPosition = selectionRange.start;
                            if (startPosition.offset > 0) {
                                const atCharPosition = writer.createPositionBefore(startPosition.parent.getChild(startPosition.offset - 1));
                                writer.remove(writer.createRange(atCharPosition, startPosition));
                            }

                            // 插入纯文本形式的link值
                            writer.insertText(data.item.link, startPosition);
                        });

                        // 阻止插件默认的提及元素插入行为
                        evt.stop();
                    }
                }
            ]
        }
    })
    .catch(error => {
        console.error(error);
    });

关键细节说明 #

• 必须在模型层操作内容（editor.model），这是CKEditor 5的核心规范，确保内容的一致性和可编辑性
• evt.stop()是关键：它会阻止插件默认创建<mention>元素的逻辑，完全用自定义的纯文本插入替代
• 定位@标记的逻辑适配了常规的输入场景，确保能准确删除触发用的@字符

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