摘要：本來寫這個(gè)項(xiàng)目時(shí)就沒打算來自己實(shí)現(xiàn)富文本編輯器，本著能用開源就用開源的原則，在項(xiàng)目里測(cè)試了一些開源的編輯器，發(fā)現(xiàn)或多或少都有些問題，后來一琢磨，反正這個(gè)項(xiàng)目的富文本編輯器需求不復(fù)雜，就自己實(shí)現(xiàn)一個(gè)好了。

斷斷續(xù)續(xù)寫了個(gè)把月，終于在昨天完成了第一版…

一款幫助網(wǎng)絡(luò)寫手更方便地進(jìn)行小說創(chuàng)作的PC軟件，目前支持 OSX/Windows

名字靈感來自于杜甫的一首詩(shī)，前兩句是：

《寄李十二白二十韻》
昔年有狂客，號(hào)爾謫仙人。
筆落驚風(fēng)雨，詩(shī)成泣鬼神。

對(duì)于名字，要感謝下@藍(lán)色

預(yù)覽的話，可以去官網(wǎng)看

作為我的第一款商業(yè)性（雖然才賣出去一個(gè)，還是朋友捧場(chǎng)…）產(chǎn)品，我投入了很多精力。而且，重要的還在后面，那就是運(yùn)營(yíng)。

怎么讓得讓更多的人知道并且去使用它？直覺告訴我，這將是比寫代碼還要難的事情...

主要用到了Electron-Vue這個(gè)框架，讓我不用花時(shí)間去琢磨配置Webpack和Electron，上來就直接開發(fā)。感謝開源社區(qū)！

歪個(gè)樓：我對(duì)Wepback的看法就是，籠統(tǒng)的了解下運(yùn)行原理就行了，現(xiàn)成并且配置好的Webpack模板直接用，遇到特殊需求，查文檔，查Google知道怎么改即可。

開發(fā)要求你比較熟悉Vue和Node，這里不會(huì)講基礎(chǔ)的東西，講基礎(chǔ)知識(shí)的除了官方文檔，網(wǎng)上有更多相關(guān)文章可供選擇。

首先，我遇到了：dev模式?jīng)]問題，打包后空白頁(yè)的問題？

如果你剛剛生成項(xiàng)目，什么都沒有動(dòng)的話，那就可能是Webpack在打包時(shí)，把Vue當(dāng)成了外部文件沒有打包進(jìn)去。

代碼在：webpack.renderer.config.js

注釋掉...Object.keys(dependencies || {}).filter(d => !whiteListedModules.includes(d))即可

然后，又遇到了多窗口的需求：

開始沒思路，因?yàn)槎啻翱诤鸵话闱岸碎_發(fā)時(shí)遇到的多路由，多Tab還不是一回事兒。后來經(jīng)人指點(diǎn)，才明白其實(shí)多窗口挺簡(jiǎn)單的...

我們先觀察生成的代碼模板中，主窗口是怎么生成的：

let mainWindow;  //主窗口變量
const winURL =    
  process.env.NODE_ENV === "development" ?
  `http://localhost:9080` :
  `file://${__dirname}/index.html`  // 設(shè)置URL或者文件,畢竟Electron App其實(shí)運(yùn)行在Chromium中
  
mainWindow = new BrowserWindow(options)  // new 一個(gè)窗體對(duì)象，同時(shí)傳一些參數(shù)
mainWindow.loadURL(winURL)    // 加載URL，加載之后，窗口就會(huì)被顯示出來。

那么，我們依葫蘆畫瓢，第二個(gè)窗口就可以這么寫

let secondWindow; 
 const modalPath = process.env.NODE_ENV === "development" ?
    "http://localhost:9080/#/showOutline" :
    `file://${__dirname}/index.html#showOutline`  // 的確比較簡(jiǎn)單...
  
secondWindow = new BrowserWindow(options)  
secondWindow.loadURL(modalPath)    

PS: 這里提醒下vue-router不要設(shè)置成history模式。原因在文檔里看到過，忘了，想知道就去查文檔 :p

多窗口下的Vuex異常：

開發(fā)多窗口時(shí)并沒有意識(shí)到vuex存在問題，后面發(fā)現(xiàn)數(shù)據(jù)怎么都對(duì)不上，然后排查問題時(shí)發(fā)現(xiàn)，兩個(gè)窗口的state(狀態(tài))并不同步，即：

當(dāng)你在打開窗口B時(shí)，此時(shí)兩個(gè)窗口的Vuex數(shù)據(jù)時(shí)一致的，但一旦你的B窗口的數(shù)據(jù)狀態(tài)發(fā)生變化，其并不能反映到窗口A里。為什么不行，其實(shí)也很好理解。

歪個(gè)樓：說下我對(duì)Vuex實(shí)現(xiàn)原理的理解。以前剛開始學(xué)習(xí)Vue還沒有學(xué)Vuex時(shí)，當(dāng)時(shí)我解決多組件（非父子）之間的通訊方式除了利用父組件做中間人（event bus）外，還試過維護(hù)一個(gè)全局JSON（比如共用一個(gè)store.js），然后其他組件都能訪問及操作。后來學(xué)了Vuex，發(fā)現(xiàn)它的工作方式和我想的差不多。（當(dāng)然，我并沒有去看源碼，它真正的實(shí)現(xiàn)方式是什么。但直覺告訴我應(yīng)該是這樣沒錯(cuò)了?。?/pre>
讓我反問一句：為什么兩個(gè)窗口之間的數(shù)據(jù)能一直同步？
解決方法： 我結(jié)合了Electron文檔中提到的兩種方式：ipc通訊和在主進(jìn)程維護(hù)全局變量
PS:  經(jīng)人點(diǎn)撥，ipc通訊的實(shí)現(xiàn)利用了瀏覽器的postMessage接口（話說這個(gè)API，之前還真沒聽過說...）
在Vue中自己實(shí)現(xiàn)富文本編輯器：輸入框的雙向綁定和自動(dòng)聚焦（auto focus）
還有個(gè)不算是Electron，只能說是Vue方面的問題。
本來寫這個(gè)項(xiàng)目時(shí)就沒打算來自己實(shí)現(xiàn)富文本編輯器，本著能用開源就用開源的原則，在項(xiàng)目里測(cè)試了一些開源的編輯器，發(fā)現(xiàn)或多或少都有些問題，后來一琢磨，反正這個(gè)項(xiàng)目的富文本編輯器需求不復(fù)雜，就自己實(shí)現(xiàn)一個(gè)好了。

編輯器的輸入框，我使用的HTML屬性contenteditable來實(shí)現(xiàn)。
編輯器組件的雙向綁定和自動(dòng)聚焦的細(xì)節(jié)參考這篇文章
此外，還有些坑不知道什么原因造成的：

用戶數(shù)據(jù)的本地存儲(chǔ)我用了lowdb：
本質(zhì)就是通過node的fs模塊來操作本地JSON文件，只不過它比我們自己實(shí)現(xiàn)的要優(yōu)雅，可靠多了
然后有個(gè)需求是，當(dāng)觸發(fā)某種條件時(shí)，保存對(duì)應(yīng)的變量：
// 當(dāng)用戶點(diǎn)擊Button A
db.set("a",111).write();
// 當(dāng)用戶點(diǎn)擊Button B
db.set("b",222).write();
此時(shí)，如果用戶點(diǎn)擊了Button A，不僅a 數(shù)據(jù)會(huì)更新，b數(shù)據(jù)也會(huì)更新，反之同樣。
這不是lowdb的問題，因?yàn)槲叶鄮y(cè)試過，點(diǎn)擊Button A并不會(huì)導(dǎo)致其他set函數(shù)調(diào)用！
所以這應(yīng)該算是一個(gè)奇怪的問題吧。
利用ipcRenderer監(jiān)聽通信時(shí)，如果在listener內(nèi)使用了異步：
 ipcRenderer.on("delete", () => {
     // 異步這里特指setTimeout
     setTimeout(() => {
     // 不知為何,_this.remove會(huì)調(diào)用多次（但發(fā)現(xiàn)ipcMian.send只被調(diào)用了一次！）
     _this.remove(this.nodeWasRightClicked, this.dataWasRightClicked);
     }, 0);
 });
另外： 打包軟件時(shí)也遇到了很多問題，但最終都通過Google解決掉了，所以這里不復(fù)述了（所謂面向Google編程）
其他問題后續(xù)會(huì)繼續(xù)補(bǔ)充，歡迎持續(xù)關(guān)注！