前些天公司決定針對(duì)Android版IM軟件開(kāi)發(fā)PC版的苦掘，需求是需要跨平臺(tái)襟衰，支持Linux驮瞧，Win腊敲，macOS這樣的話那只能選擇Node.js這個(gè)還算比較新的技術(shù)了击喂。Electron+Node.js來(lái)構(gòu)建桌面版的App，天生跨平臺(tái)碰辅，就這么愉快的決定了懂昂。
后面我會(huì)逐漸更新一些關(guān)于桌面版IM開(kāi)發(fā)中所遇到的問(wèn)題以及是如何解決的，希望能夠幫助一些有類似需求的小伙伴吧没宾。
消息的輸入框應(yīng)該算的上是富文本編輯器吧凌彬，不要求圖文混排（后期可能會(huì)支持）最起碼也得支持表情的輸入，所以就需要輸入框支持圖片顯示循衰，這一點(diǎn)textarea是做不到的铲敛，一些常用的富文本編輯器，例如KindEditor会钝，UEditor感覺(jué)還是比較龐大伐蒋，而且有些過(guò)時(shí)，當(dāng)然功能也是非常強(qiáng)大的迁酸，在網(wǎng)上一搜先鱼，發(fā)現(xiàn)了contenteditable這個(gè)屬性，下面是摘自百度百科的一段介紹：
HTML中的contentEditable的屬性可以打開(kāi)某些元素的可編輯狀態(tài)．也許你沒(méi)用過(guò)contentEditable屬性．甚至從未聽(tīng)說(shuō)過(guò)．contentEditable的作用相當(dāng)神奇．可以讓div或整個(gè)網(wǎng)頁(yè)胁出，以及span等等元素設(shè)置為可寫(xiě)型型。我們最常用的輸入文本內(nèi)容便是input與textarea，使用contentEditable屬性后全蝶，可以在div,table,p,span,body,等等很多元素中輸入內(nèi)容．
contenteditable屬性可以使它所在的標(biāo)簽變成可編輯狀態(tài)闹蒜，這一點(diǎn)是非常強(qiáng)大的，而且是html5才有的屬性抑淫，但是這才是坑的開(kāi)始绷落。
contenteditable本身是很難用的，如果你這樣寫(xiě)：
<div id="editor" contenteditable="true"></div>
那div就變得可編輯始苇，但是特別的難用砌烁，比如說(shuō)獲取焦點(diǎn)，光標(biāo)定位催式，復(fù)制函喉，剪貼，拖拽荣月，光搞定這些問(wèn)題估計(jì)好幾天就過(guò)去了管呵，所以為了避免這個(gè)坑，還是選擇現(xiàn)成的編輯器吧哺窄，在GitHub上搜索關(guān)鍵字contenteditable星星最多的就是yabwe/medium-editor.
可以看到MediumEditor支持的瀏覽器還是挺多的捐下，Electron采用的是Chromium的內(nèi)核账锹，所以應(yīng)該也是沒(méi)問(wèn)題的。
好吧坷襟，上面說(shuō)了那么多奸柬，其實(shí)也是扯淡，MediumEditor使用起來(lái)并不難婴程，引用一個(gè)js和一個(gè)css文件就可以了廓奕，怎么使用官方文檔寫(xiě)的很清楚，但是用在IM的聊天上還是需要改造一下的档叔，下面直接上代碼吧懂从，還是代碼有說(shuō)服力.
// 將id為chat-input-area的div標(biāo)簽初始化為一個(gè)MediumEditor編輯器，
// 并隱藏toolbar和placeholder
let editor = new MediumEditor('#chat-input-area', {
toolbar: false,
placeholder: false
});
// MediumEditor默認(rèn)采用回車換行的方式蹲蒲，
// 但是我們的輸入框默認(rèn)采用回車發(fā)送，Ctrl[Shift, control, alt, command] + Enter來(lái)?yè)Q行侵贵，
// 所以需要對(duì)鍵盤按鍵進(jìn)行監(jiān)聽(tīng)并更改默認(rèn)的處理事件
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) {
// 發(fā)送處理
console.log('message: ' + element.innerText);
// 自己實(shí)現(xiàn)的sendMessage方法
sendMessage(element.innerText);
// 獲取到輸入的內(nèi)容并發(fā)送了之后將輸入的內(nèi)容刪除
while (element.hasChildNodes()) }
element.removeChild(element.firstChild);
}
// 阻斷原處理流程
event.preventDefault();
}
}.bind(editor));
經(jīng)過(guò)處理后届搁，MediumEditor用上去跟QQ，微信的輸入框很像窍育，只不過(guò)暫時(shí)還不能輸入圖片卡睦，等開(kāi)發(fā)到那一步了再寫(xiě)吧。
