自己动手用electron+vue开发博客园文章编辑器客户端【二】

时间：2022-11-22 08:34:58

回顾

在上一篇文章中，

咱们聊了我开发的这个程序是什么样子、为什么要开发这个程序

electron的工程结构，他是怎么启动和退出的

以及我们怎么用electron的技术，登录博客园，拿到会话信息；

这篇文章，我们主要讲怎么拿博客园的数据，以及怎么提交数据给博客园；

上几张新图：

自己动手用electron+vue开发博客园文章编辑器客户端【二】

自己动手用electron+vue开发博客园文章编辑器客户端【二】

自己动手用electron+vue开发博客园文章编辑器客户端【二】

自己动手用electron+vue开发博客园文章编辑器客户端【二】

宿主画面与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自己会自动加载，路径也不会有什么问题

多标签页的问题

在我上一个版本的程序里，一次只能编辑一篇文章

自己动手用electron+vue开发博客园文章编辑器客户端【二】

有人反映说，这样不是很方便，于是这个版本做了多标签页的功能；

首先，我用一个数组存储每个标签页的基础数据

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

 

标签：

相关文章