如何使用MediumEditor作为WebIM的消息输入框

---

前些天公司决定针对Android版IM软件开发PC版的，需求是需要跨平台，支持Linux，Win，macOS这样的话那只能选择Node.js这个还算比较新的技术了。Electron+Node.js来构建桌面版的App，天生跨平台，就这么愉快的决定了。
后面我会逐渐更新一些关于桌面版IM开发中所遇到的问题以及是如何解决的，希望能够帮助一些有类似需求的小伙伴吧。
消息的输入框应该算的上是富文本编辑器吧，不要求图文混排（后期可能会支持）最起码也得支持表情的输入，所以就需要输入框支持图片显示，这一点textarea是做不到的，一些常用的富文本编辑器，例如KindEditor，UEditor感觉还是比较庞大，而且有些过时，当然功能也是非常强大的，在网上一搜，发现了contenteditable这个属性，下面是摘自百度百科的一段介绍：

HTML中的contentEditable的属性可以打开某些元素的可编辑状态．也许你没用过contentEditable属性．甚至从未听说过．contentEditable的作用相当神奇．可以让div或整个网页，以及span等等元素设置为可写。我们最常用的输入文本内容便是input与textarea，使用contentEditable属性后，可以在div,table,p,span,body,等等很多元素中输入内容．

contenteditable属性可以使它所在的标签变成可编辑状态，这一点是非常强大的，而且是html5才有的属性，但是这才是坑的开始。
contenteditable本身是很难用的，如果你这样写：

    <div id="editor" contenteditable="true"></div>

那div就变得可编辑，但是特别的难用，比如说获取焦点，光标定位，复制，剪贴，拖拽，光搞定这些问题估计好几天就过去了，所以为了避免这个坑，还是选择现成的编辑器吧，在GitHub上搜索关键字contenteditable星星最多的就是yabwe/medium-editor.

medium-editor-support.png

可以看到MediumEditor支持的浏览器还是挺多的，Electron采用的是Chromium的内核，所以应该也是没问题的。
好吧，上面说了那么多，其实也是扯淡，MediumEditor使用起来并不难，引用一个js和一个css文件就可以了，怎么使用官方文档写的很清楚，但是用在IM的聊天上还是需要改造一下的，下面直接上代码吧，还是代码有说服力.

    // 将id为chat-input-area的div标签初始化为一个MediumEditor编辑器，
    // 并隐藏toolbar和placeholder
    let editor = new MediumEditor('#chat-input-area', {
        toolbar: false,
        placeholder: false
    });
    
    // MediumEditor默认采用回车换行的方式，
    // 但是我们的输入框默认采用回车发送，Ctrl[Shift, control, alt, command] + Enter来换行，
    // 所以需要对键盘按键进行监听并更改默认的处理事件
    editor.subscribe("editableKeydownEnter", function (event, element) {
        if ((event.metaKey || event.ctrlKey || event.altKey || event.shiftKey)
            && event.keyCode === 13) {
            // 换行处理

            // 阻断原处理流程
            event.preventDefault();
            MediumEditor.selection.getSelectionStart(editor.options.ownerDocument);
            MediumEditor.util.insertHTMLCommand(editor.options.ownerDocument, "");
        } else if (event.keyCode === 13) {
            // 发送处理
            
            console.log('message: ' + element.innerText);
            // 自己实现的sendMessage方法
            sendMessage(element.innerText);
            // 获取到输入的内容并发送了之后将输入的内容删除
            while (element.hasChildNodes()) }
                element.removeChild(element.firstChild);
            }

            // 阻断原处理流程
            event.preventDefault();
        }
    }.bind(editor));

经过处理后，MediumEditor用上去跟QQ，微信的输入框很像，只不过暂时还不能输入图片，等开发到那一步了再写吧。