自己动手用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);

总结

写到这里,发现并没有什么特殊的东西需要在博客里解释了

还有不明白的地方的读者,自己去看源码吧!

下载地址:https://gitee.com/xland/cnblogs/releases/6.0.2

谢谢大家的支持;

接下来我打算为这个程序加入下面这些功能:

  • 删除文章
  • 编辑分类
  • 支持CSDN博客
  • 支持开源中国博客
  • 支持简书
  • 支持知乎
  • ......

请大家多多关注:https://github.com/xland/xiangxuema

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

扫码关注云+社区

领取腾讯云代金券