html 富文本编辑器相关--中文状态下输入@的问题-白红宇

html 富文本编辑器相关--中文状态下输入@的问题

阅读量：6150 次

发布时间：2019-06-21

本文共 9636 字，大约阅读时间需要 32 分钟。

如何支持输入@可以【@群内人】的功能？

常规思路是监听keydown 事件的shift+2

document.getElementById('input-content').addEventListener('keydown', function (e) {        if (CHATOBJ.groupType != 2) {
   //不是群消息            return;        }        //if (e.keyCode === 16) return;        console.log('没有弹出联系人？:',e);        if (e.shiftKey && e.keyCode == 50) {
   //是@            console.log('开始搜索:',e);            aiteObj.searching = aiteObj.state.SEARCHING;            aiteObj.current_aiteId = Math.uuid();            aiteObj.getSerchList();            insertAite();            aiteObj.cursorPosition = aiteObj.getCursorPosition();            e.preventDefault();        }    });

经试验发现这个事件（shift+2）只是在英文状态下会触发，在中文状态下则事件不会触发，只可以触发（shift）事件。

------------------------------------------------------------------------------------------------------------------------------------------

此处作为html下和中文状态深深相关关联的dom3事件不得不提到

`compositionstart`、`compositionupdate`、`compositionend`

https://segmentfault.com/a/1190000004326310

----------------------------------------------------------------------------------------------------------------------------------------

然而并没有什么卵用，以上方法只适合中文状态下输入中文， @却不是中文，

最后由于我们做的是客户端，有c+提供@按下事件，

个人认为目前纯html能力不足以解决这个问题，

附上c+未提供事件之前的代码

/* *  Created by shangkui *  Date:2017-04-10 *  群@ */var commonAiteObj = {    getSerchListStr: function (list) {        var tempItem = '';        var ret = '';        list.forEach(function (item) {            var imId = item.imId;            tempItem += '
       
        ' + item['nickName'] + '
       
'        });        return ret = '
      
       ' + tempItem + '
      
';    },    showSerchList: function (list, position) {        if (list.length === 0) {            console.log('没有查找到任何人员');            commonAiteObj.hideSerchList();            return;        }        var SerchListStr = this.getSerchListStr(list);        //console.log('群成员字符串：',SerchListStr);        //console.log(position);        aiteObj.$memberContainer.removeClass('hideList').html(SerchListStr);        var top = aiteObj.$memberContainer.height();        aiteObj.$memberContainer.css({            left: position.right ,            top: position.top - top        });    },    hideSerchList: function () {        if (aiteObj.searching == aiteObj.state.SEARCHING) {            console.log('输入@后触发其他地方');            aiteObj.searching = aiteObj.state.STOP;            aiteObj.$memberContainer.addClass('hideList');            var temp_aite = aiteObj.$inputContainer.find('#' + aiteObj.current_aiteId + '');            var temp_aiteValue = temp_aite.html();            console.log(temp_aiteValue);            //temp_aite.after(temp_aiteValue);            temp_aite.remove();            insertImg(temp_aiteValue);        }    },    serching: function () {        console.log('searching状态:', aiteObj.searching);        if ((aiteObj.searching === aiteObj.state.SEARCHING) && (!aiteObj.composing)) {            var $temp_aite = aiteObj.$inputContainer.find('#' + aiteObj.current_aiteId + '');            var temp_aiteValue = $temp_aite.html();            var searchKey = temp_aiteValue.substring(1, temp_aiteValue.length);            aiteObj.cursorPosition = aiteObj.getCursorPosition();            console.log('实时搜索的内容：', searchKey);            //console.log('zongrenshu：', aiteObj.groupMemCount);            mainObject.searchGroupMemberWhenAT(CHATOBJ.groupId, myInfo.imUserid,searchKey,0, aiteObj.groupMemCount, function (data) {                //console.log('搜索', data);                commonAiteObj.showSerchList(data, aiteObj.cursorPosition);            });        }    },    serchItemClick: function (target) {        var $this = $(target);        $this.parent().parent().addClass('hideList');        var name = $this.find('div').html();        var imId = $this.attr('im-id');        console.log('点击的条目：', name);        //console.log('点击的条目：', imId);        //var $aite_person = $(''+name+'');        var $temp_aite = aiteObj.$inputContainer.find('#' + aiteObj.current_aiteId + '');        $temp_aite[0].contentEditable = false;        $temp_aite.attr('im-id', imId);        $temp_aite.attr('class', 'input-msg-aite');        $temp_aite.html('@' + name + ' ');        aiteObj.searching = aiteObj.state.FINISH;        return false;    }};function AiteObj() {    this.state = {        STOP: 'STOP',        SEARCHING: 'SEARCHING',        FINISH: 'FINISH'    };    this.searching = this.state.STOP;    this.current_aiteId = '';//当前编辑状态中的艾特的id    this.$memberContainer = '';    this.$inputContainer = '';    this.cursorPosition = '';    this.composing = false;    this.groupMemCount= 0;    this.focusState = false;}AiteObj.prototype = {    getSerchList: function () {        //群成员数量        mainObject.getGroupMemberCount({
    'GroupId': CHATOBJ.groupId}, function (data) {            //console.log('群成员数量:',CHATOBJ.groupId);            console.log('群成员数量:', data);            aiteObj.groupMemCount = data.GroupMemCount;            if (aiteObj.groupMemCount < 0) {                console.error('请求群成员数量出错')            }            mainObject.getGroupMembers({                'GroupId': CHATOBJ.groupId,                'GroupMemberPage': 0,                'GroupMemberPagesize': aiteObj.groupMemCount            });        });    },    getSerchListCallback: function (list) {        if (!(this.searching == this.state.SEARCHING)) {            return;        }        commonAiteObj.showSerchList(list, aiteObj.cursorPosition);    },    getCursorPosition:function () {        var aiteSpan = aiteObj.$inputContainer.find('#'+aiteObj.current_aiteId+'')[0];        //console.log('aiteSpan,',aiteSpan);        var aiteSpanClientRect = aiteSpan.getBoundingClientRect();        console.log(aiteSpan);        console.log(aiteSpanClientRect);        return aiteSpanClientRect;    },    triggerSearch:function () {    }};var aiteObj = new AiteObj();$(function () {    aiteObj.$memberContainer = $('.acknowledMsgMemberList');    aiteObj.$inputContainer = $('#input-content');    /**     * 输入@触发     */    document.getElementById('input-content').addEventListener('keydown', function (e) {        if (CHATOBJ.groupType != 2) {
    //不是群消息            return;        }        //if (e.keyCode === 16) return;        console.log('没有弹出联系人？:',e);        if (e.shiftKey && e.keyCode == 50) {
    //是@            console.log('开始搜索:',e);            aiteObj.searching = aiteObj.state.SEARCHING;            aiteObj.current_aiteId = Math.uuid();            aiteObj.getSerchList();            insertAite();            aiteObj.cursorPosition = aiteObj.getCursorPosition();            e.preventDefault();        }    });/*    $('#input-content').on('keydown',function (e) {        if (CHATOBJ.groupType != 2) {//不是群消息            return;        }        if (e.keyCode === 16) return;        console.log('没有弹出联系人？:',e);        if (e.shiftKey && e.keyCode == 50) {//是@            console.log('开始搜索:',e);            aiteObj.searching = aiteObj.state.SEARCHING;            aiteObj.current_aiteId = Math.uuid();            aiteObj.getSerchList();            insertAite();            aiteObj.cursorPosition = aiteObj.getCursorPosition();            e.preventDefault();        }    });*/    /**     * 搜索条目点击事件     */    aiteObj.$memberContainer.on('click', '.msg-aite', function (e) {        var target = this;        return commonAiteObj.serchItemClick(target);    });    /**     * 输入@后输入其他继续搜索     */    $(document).on('input', '#input-content', function (e) {        commonAiteObj.serching();    });    /**     * 输入@后失去焦点     */    /*   $(document).on('blur', '#input-content', function (e) {     if(searching){     console.log('输入@后失去焦点：',e);     searching= false;     $memberContainer.addClass('hideList');     var temp_aite = $inputContainer.find('#'+current_aiteId+'');     var temp_aiteValue = temp_aite.html();     console.log(temp_aiteValue);     temp_aite.after(temp_aiteValue);     temp_aite.remove();     };     });*/    /**     * 输入@后触发其他区域     */    $(document).on('click', function () {        commonAiteObj.hideSerchList();    });    aiteObj.$inputContainer[0].addEventListener("compositionstart", function (event) {        console.log('compositionstart:', event.data);        aiteObj.composing = true;    });    aiteObj.$inputContainer[0].addEventListener("compositionend", function (event) {        console.log('compositionend:', event.data);        aiteObj.composing = false;    });    aiteObj.$inputContainer[0].addEventListener("blur", function (event) {        console.log('失去焦点:');        aiteObj.focusState = false;    });    aiteObj.$inputContainer[0].addEventListener("focus", function (event) {        console.log('获得焦点:');        aiteObj.focusState = true;    });    //此处获取c++回调 shift+2 回调 触发搜索    /**     * 输入enter触发     */    document.getElementById('input-content').addEventListener('keydown', function (e) {        if(e.keyCode === 13){            commonAiteObj.hideSerchList();        }    });    /**     * 获取光标的位置     */    /*   function getCursorPosition() {     var selection = getSelection();     var range = selection.getRangeAt(0);     var rect = range.getClientRects()[0];     return rect;     }*/    /*function getCursorPosition() {       var aiteSpan = aiteObj.$inputContainer.find('#'+aiteObj.current_aiteId+'')[0];       //console.log('aiteSpan,',aiteSpan);        var aiteSpanClientRect = aiteSpan.getBoundingClientRect();        console.log(aiteSpanClientRect);       return aiteSpanClientRect;    };*/    function insertAite() {        //var $temp = $('@');        var temphtml = '@';        //aiteObj.$inputContainer.append($temp);        insertImg(temphtml);    };})