前些天公司决定针对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，微信的输入框很像，只不过暂时还不能输入图片，等开发到那一步了再写吧。
网友评论