自己动手用electron+vue开发博客园文章编辑器客户端【二】
回顾
在上一篇文章中,
咱们聊了我开发的这个程序是什么样子、为什么要开发这个程序
electron的工程结构,他是怎么启动和退出的
以及我们怎么用electron的技术,登录博客园,拿到会话信息;
这篇文章,我们主要讲怎么拿博客园的数据,以及怎么提交数据给博客园;
上几张新图:
宿主画面与webview通信的问题
在nwjs里,宿主页面与做过特殊标记的iframe页面(nwdisable nwfaketop和nwUserAgent)通信,并没有什么特别的地方
就像你在一个普通的页面里访问你自己的iframe子页面一样
1 | var frame = document.getElementById( '[yourFrameId]' ).contentWindow; |
可以通过上面的代码,轻而易举的得到iframe页面的window对象;
注意:被标记了nwfaketop的子页面里的代码是访问不到父页面的window对象的;
然而在electron里,宿主页面要想跟webview页面通信的话,事情就复杂的多了
你要给webview页面配置preload属性,
让webview把你一个你自己写的JS文件注入到目标页面里去,如下:
1 | <webview preload= "[your js file path]" src= "http://[yourTargetUrl]" ></webview> |
你可以在这个JS文件里访问目标页面上任何东西,就像你自己写了一个JS文件放在目标网站里一样;
不仅如此,你还可以在这个JS文件里访问electron提供的底层API;
然而怎么把访问到的东西呈现在自己的画面上呢
比如,我们在这个JS文件里拿到了博客分类的数据:
1 | var temp = $( "#post_categories a[href^='/posts?categoryid=']" ); |
注:博客园是我们的目标网站,目标网站加载了jquery,我们这个注入的js也可以使用jquery的能力
再通过如下代码反馈给我们自己的画面
1 2 | const {ipcRenderer} = require( 'electron' ) ipcRenderer.sendToHost( 'messageFromWeb' , temp); |
ipcRenderer就是electron里的东西了,
看这个API就知道,这是在通过消息的方式通信,
我们需要在自己的画面里监听这个消息
1 2 3 4 | var webViewInstance = document.getElementById( '[yourWebViewId]' ); webViewInstance.addEventListener( "ipc-message" , event=>{ console.log(event.args[0]); } |
这里event.args[0]就是注入JS里传过来的temp对象,也就是博客分类的数据了
接下来,就想怎么呈现就怎么呈现。
如果想把自己画面里的数据传递给注入的JS代码
需要在自己画面发送消息,代码如下:
1 2 | var webViewInstance = document.getElementById( '[yourWebViewId]' ); webViewInstance.send( "messageFromHost" , "hookSaveArticle" ,{data: 'your article data' }); |
在注入的JS代码里,可以通过下面的代码来获取宿主页面发送过来的消息:
1 2 3 4 5 | 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,再在接收方转回来达到目的的
虽然有点脱了裤子放屁,但是聊胜于无呀!
发送方的代码如下:
1 2 3 4 5 6 7 8 | window.editorUpload = function (file) { var reader = newFileReader(); reader.readAsDataURL(file); reader.onload = function () { webViewInstance.send( "messageFromHost" , "hookUploadPic" , {base64:reader.result, name:file.name}); }; } |
接收方的代码如下:
1 2 3 4 5 6 7 8 9 10 11 12 | 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目录下去了
这样只要在主页直接把这些静态资源加载过来就可以了
1 2 3 4 | < 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自己会自动加载,路径也不会有什么问题
多标签页的问题
在我上一个版本的程序里,一次只能编辑一篇文章
有人反映说,这样不是很方便,于是这个版本做了多标签页的功能;
首先,我用一个数组存储每个标签页的基础数据
1 2 3 4 5 6 | tabs: [{text: "文章列表" , url: "https://i.cnblogs.com/posts" , isHomePage: true , pageType: 'list' , data: null }], |
vue的模板代码里呈现这个数组的数据:
1 | <div @click= "selectTab(index)" v- for = "(tab,index) in tabs" > |
程序刚启动的时候,就这么一个标签页,当用户点了文章列表的某条文章的时候,执行下面的方法
1 2 3 4 5 | articleClick(url, text) { var obj = {url,text, "pageType" : "editor" ,data: null }; this .tabs.push(tab); this .webViewInstance.loadURL(url); } |
这样就多了一个标签页;
因为我们这个程序,只有两种类型的画面,不是文章列表,就是编辑文章(添加文章和编辑文章是同样的画面)
所以,虽然是多个标签页,也不过是在这两种画面间切换
vue的模板代码如下
1 2 3 4 | < 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获取数据,重置数据,代码如下:
1 2 | UE.instants.ueditorInstant0.getContent(); UE.instants.ueditorInstant0.setContent(content); |
总结
写到这里,发现并没有什么特殊的东西需要在博客里解释了
还有不明白的地方的读者,自己去看源码吧!
下载地址:www.xiangxuema.com
谢谢大家的支持;
接下来我打算为这个程序加入下面这些功能:
-
删除文章
-
编辑分类
-
支持CSDN博客
-
支持开源中国博客
-
支持简书
-
支持知乎
-
......
请大家多多关注:https://github.com/xland/xiangxuema
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 没有源码,如何修改代码逻辑?
· 一个奇形怪状的面试题:Bean中的CHM要不要加volatile?
· [.NET]调用本地 Deepseek 模型
· 一个费力不讨好的项目,让我损失了近一半的绩效!
· .NET Core 托管堆内存泄露/CPU异常的常见思路
· 微软正式发布.NET 10 Preview 1:开启下一代开发框架新篇章
· 没有源码,如何修改代码逻辑?
· NetPad:一个.NET开源、跨平台的C#编辑器
· PowerShell开发游戏 · 打蜜蜂
· 在鹅厂做java开发是什么体验
2015-01-21 自己动手写客户端UI库——创建第一个控件
2013-01-21 【转载】JS获取浏览器版本信息
2013-01-21 windows server 2003 sp2安装VS2010之后需要打的几个布丁
2010-01-21 汇编语言基础教程-指令:传送,交换,取地址
2010-01-21 汇编语言基础教程-寄存器