自己动手用electron+vue开发博客园文章编辑器客户端【二】
回顾
在上一篇文章中，
咱们聊了我开发的这个程序是什么样子、为什么要开发这个程序
electron的工程结构，他是怎么启动和退出的
以及我们怎么用electron的技术，登录博客园，拿到会话信息；
这篇文章，我们主要讲怎么拿博客园的数据，以及怎么提交数据给博客园；
上几张新图：
宿主画面与webview通信的问题
在nwjs里，宿主页面与做过特殊标记的iframe页面（nwdisable nwfaketop和nwUserAgent）通信，并没有什么特别的地方
就像你在一个普通的页面里访问你自己的iframe子页面一样
var frame = document.getElementById('[yourFrameId]').contentWindow;
可以通过上面的代码，轻而易举的得到iframe页面的window对象；
注意：被标记了nwfaketop的子页面里的代码是访问不到父页面的window对象的；
然而在electron里，宿主页面要想跟webview页面通信的话，事情就复杂的多了
你要给webview页面配置preload属性，
让webview把你一个你自己写的JS文件注入到目标页面里去，如下：
<webview preload="[your js file path]" src="http://[yourTargetUrl]"></webview>
你可以在这个JS文件里访问目标页面上任何东西，就像你自己写了一个JS文件放在目标网站里一样；
不仅如此，你还可以在这个JS文件里访问electron提供的底层API；
然而怎么把访问到的东西呈现在自己的画面上呢
比如，我们在这个JS文件里拿到了博客分类的数据：
var temp = $("#post_categories a[href^='/posts?categoryid=']");
注：博客园是我们的目标网站，目标网站加载了jquery，我们这个注入的js也可以使用jquery的能力
再通过如下代码反馈给我们自己的画面
const {ipcRenderer} = require('electron')
ipcRenderer.sendToHost('messageFromWeb', temp);
ipcRenderer就是electron里的东西了，
看这个API就知道，这是在通过消息的方式通信，
我们需要在自己的画面里监听这个消息
var webViewInstance = document.getElementById('[yourWebViewId]');
webViewInstance.addEventListener("ipc-message", event=>{
console.log(event.args[0]);
}
这里event.args[0]就是注入JS里传过来的temp对象，也就是博客分类的数据了
接下来，就想怎么呈现就怎么呈现。
如果想把自己画面里的数据传递给注入的JS代码
需要在自己画面发送消息，代码如下：
var webViewInstance = document.getElementById('[yourWebViewId]');
webViewInstance.send("messageFromHost","hookSaveArticle",{data:'your article data'});
在注入的JS代码里，可以通过下面的代码来获取宿主页面发送过来的消息：
const {ipcRenderer} = require('electron')
ipcRenderer.on('messageFromHost', (event, action, obj)=>{
console.log(action); //print hookSaveArticle
console.log(obj); //print {data:'your article data'}
})
以上，
我们现在可以自由的在目标页面和宿主页面互相通信，传递数据了；
但是！
File类型和Blob类型的数据不能这样传递，这是官网文档里并没有说明的，是我自己踩坑踩出来的
那么这样的数据该怎么发送呢？
我是先在发送方转成base64，再在接收方转回来达到目的的
虽然有点脱了裤子放屁，但是聊胜于无呀！
发送方的代码如下：
window.editorUpload = function(file) {
var reader = newFileReader();
reader.readAsDataURL(file);
reader.onload = function() {
webViewInstance.send("messageFromHost","hookUploadPic", {base64:reader.result,
name:file.name});
};
}
接收方的代码如下：
functiondataURLtoFile(dataurl, filename) {
var arr = dataurl.split(','),
mime = arr[0].match(/:(.*?);/)[1],
bstr = atob(arr[1]),
n = bstr.length,
u8arr = newUint8Array(n);
while(n--) { u8arr[n] = bstr.charCodeAt(n); }
return newFile([u8arr], filename, {type: mime});
}
ipcRenderer.on('messageFromHost', (event, action, param)=>{
var file = dataURLtoFile(param.base64, param.name);
})
与编辑器相关的问题
我们用的是NEditor编辑器，前身是百度的UEditor编辑器，不过百度的UEditor已经不再维护了
然而，就算NEditor编辑器，我也修改了里面很多东西
上传文件，我们上一个章节说过了，不得不修改，
因为我们要把用户贴过来的图片发送给钩子JS，而不是直接upload到自己的服务器上；
我大概在neditor.all.js的26616行，加了一行自己的代码，大家可以去看我的源码
以后打算让这个编辑器方便的兼容base64，这样就不用事先把图片传博客园服务器上去了，不知道这个思路靠谱不靠谱；
另外，因为编辑器相关的前端文件都是静态资源，我就把他们放到static目录下去了
这样只要在主页直接把这些静态资源加载过来就可以了
<script src="static/editor/neditor/neditor.config.js"></script> <script src="static/editor/neditor/neditor.all.js"></script> <script src="static/editor/neditor/neditor.service.js"></script> <script src="static/editor/neditor/i18n/zh-cn/zh-cn.js"></script>
其他的一些样式文件，ueditor自己会自动加载，路径也不会有什么问题
多标签页的问题
在我上一个版本的程序里，一次只能编辑一篇文章
有人反映说，这样不是很方便，于是这个版本做了多标签页的功能；
首先，我用一个数组存储每个标签页的基础数据
tabs: [{text:"文章列表",
url:"https://i.cnblogs.com/posts",
isHomePage:true,
pageType:'list',
data:null
}],
vue的模板代码里呈现这个数组的数据：
<div @click="selectTab(index)" v-for="(tab,index) in tabs">
程序刚启动的时候，就这么一个标签页，当用户点了文章列表的某条文章的时候，执行下面的方法
articleClick(url, text) {
var obj = {url,text,"pageType":"editor",data:null};
this.tabs.push(tab);
this.webViewInstance.loadURL(url);
}
这样就多了一个标签页；
因为我们这个程序，只有两种类型的画面，不是文章列表，就是编辑文章（添加文章和编辑文章是同样的画面）
所以，虽然是多个标签页，也不过是在这两种画面间切换
vue的模板代码如下
<div class="main"> <list v-show="tabs[tabsSelectedIndex].pageType == 'list'"></list> <editor v-show="tabs[tabsSelectedIndex].pageType == 'editor'"></editor> </div>
根据当前tab页的类型，切换画面；
每次新tab页的加入，我们就迫使webViewInstanceload一下tab对应的url，以拿到目标页的数据；
每次tab页的切换，我们就从tab数组元素里拿data数据，其实就相当于我们缓存的数据（并没有存成本地文件或本地数据库呢）；
由于UEditor不是一个VUE组件，所以我们在切换页面，新加页面的时候，要通过UEditor的API获取数据，重置数据，代码如下：
UE.instants.ueditorInstant0.getContent(); UE.instants.ueditorInstant0.setContent(content);
总结
写到这里，发现并没有什么特殊的东西需要在博客里解释了
还有不明白的地方的读者，自己去看源码吧!
下载地址：www.xiangxuema.com
谢谢大家的支持；
接下来我打算为这个程序加入下面这些功能：
-
删除文章
-
编辑分类
-
支持CSDN博客
-
支持开源中国博客
-
支持简书
-
支持知乎
-
......
请大家多多关注：https://github.com/xland/xiangxuema
