javascript - CKEDIOTR 提及 - 突出显示选定的名称

Question

我在我的项目中使用 CKEDITOR 和提及插件。

我的要求是保存 CKEDITOR 的内容时，我必须向提到的用户发送带有 CKEDITOR 内容的通知。除了这种特殊情况外，它按预期工作。

• 从下拉列表中选择用户。
• 选择后，所选用户名的部分将被删除。

从下拉列表中选择了一个用户，名称显示为“@Anadi Chakraborty”。是否可以像在 JIRA 中显示的那样显示用户？

对于上述情况，当按下退格键时，将删除整个提到的用户。我已经尝试使用 config.outputtemplate 但它不起作用。

代码：

html:

<div class="form-group" style="margin-bottom:0;">
    <textarea class="form-control" id="wotxtcomments" rows="1" style="margin-bottom:1rem;" placeholder="Add a comment…"></textarea>
    <button type="submit" class="btn btn-blue mobBttn" id="btnsavecommands" style="cursor:pointer; float:left; margin-right:10px;" value="save">&nbsp;Save</button>
    <button type="button" class="btn btn-blue mobBttn" id="commandCancel" style="cursor:pointer; float:left;">&nbsp;Cancel</button>
    <div style="clear:both;"></div>
</div>

JS：

 function LoadEditor() {
    for (name in CKEDITOR.instances) {
        CKEDITOR.instances[name].destroy(true);
    }
    CKEDITOR.config.mentions = [{
        feed: function (options, callback) {
            var xhr = new XMLHttpRequest();
            xhr.onreadystatechange = function () {
                if (xhr.readyState == 4) {
                    if (xhr.status == 200) {
                        callback(JSON.parse(this.responseText));
                    } else {
                        callback([]);
                    }
                }
            };
            xhr.open('GET', '/WorkOrderNew/GetMentionList?searchText=' + encodeURIComponent(options.query));
            xhr.send();
        },
        minChars: 0,
        itemTemplate: '<li data-id="{id}"><span class="userBadge">{type}</span>{name}</li>',
        outputTemplate: '<a style="color:red;" href={type}>{name}</a>'//'<span class="m-badge m-badge-grid-cell m-badge--green m-badge--wide">gsgsjgjs</span>'

    }];
    CKEDITOR.replace('wotxtcomments', {
        extraPlugins: 'mentions',
        toolbar: [
            { name: 'basicstyles', items: ['Bold', 'Italic', 'Underline', 'NumberedList', 'BulletedList'] }
        ],
        on:
        {
            instanceReady: function (ev) {
                this.focus();
            }
        }
    });
    }

任何帮助将不胜感激。提前致谢。

标签： javascriptasp.net-mvcckeditorckeditor4.xmention