本身动手用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