首页 > 其他分享 >UEditor的word图片转存-Electron篇

UEditor的word图片转存-Electron篇

时间:2023-09-15 19:45:33浏览次数:44  
标签:node UEditor sendUpdateMessage word update electron autoUpdater Electron message

electorn是用nodejs写桌面端应用,详细的可从官方文档上获得:Electron文档

完整的应用地址为:Word-Image-Handler

在这里需要实现如下几点:

1.在子进程中跑nodejs服务

2.实现自动更新

3.可唤起

Nodejs服务

因为,我这里需要跑一个nodejs应用,跑在子进程中,直接上一个大神的项目地址:Electron-with-expres

这个项目就是Express跑在electron创的子进程中,在express中增加需要的get,post响应,乏善可陈。

这里用的electron-packager工具打包,最终打包出一个绿色版应用,如果想要一步到位打包成一个可安装的文件,需要使用electron-builder工具

npm install electron-builder --save-dev

然后,可以直接使用electron-builder命令打包,可将其写入scripts中

"scripts": {    

        "start": ".\\node_modules\\node\\bin\\node.exe start-electron.js",    

        "dist": "electron-builder --win --x64"  

}

但是,直接使用electron-builder打包后的应用安装后,会提示express模块不存在,是因为express的依赖模块没被打包进去,可以在extraResources配置中(package.json的build节点下)将node_modules打包进去,from对应的根目录,to对应的是win-unpacked->resources

"extraResources": [

      {

        "from": "./express-app/node_modules",

        "to": "./node_modules"

      }

    ],

至此,可以成功跑起来应用,

自动更新

接下来至少要实现自动更新功能,自动更新使用electron-updater工具

npm install electron-updater --save

在主渲染进程中加入如下代码

main.js

ipcMain.on('update', (e, arg) => {  
        checkForUpdate()
})

function sendUpdateMessage (message, data) {

  console.log('sendMsg:', {message, data})

  mainWindow.webContents.send('message', { message, data })

}

let checkForUpdate = () => {

  autoUpdater.setFeedURL(feedUrl)

  autoUpdater.on('error', (e, message) => {

    sendUpdateMessage('error', message)

  })

  autoUpdater.on('checking-for-update', (e, message) => {

    sendUpdateMessage('checking-for-update', message)

  })

  autoUpdater.on('update-available', (e, message) => {

    sendUpdateMessage('update-available', message)

  })

  autoUpdater.on('update-not-available', (e, message) => {

    sendUpdateMessage('update-not-available', message)

  })

  autoUpdater.on('download-progress', (e, message) => {

    sendUpdateMessage('download-progress', message)

  })

  autoUpdater.on('update-downloaded', (e, releaseNotes, releaseName, releaseDate, updateUrl, quitAndUpdate) => {

    sendUpdateMessage('isUpdateNow')

    ipcMain.on('updateNow', (e, message) => {

      autoUpdater.quitAndInstall()

    })

  })

  autoUpdater.checkForUpdates()

}

在这里在主进程监听到检测更新的消息后,主要做的是

1.设置服务器地址feedUrl,该地址是更新包和更新信息文件(latest.yml)所在目录地址如: http://xxx/downloadDir/

其中,autoUpdater

const { autoUpdater } = require('electron-updater')

2.监听更新,下载等消息,做相应处理,这里是会发送对应消息,然后,在渲染进程中监听到后做相应处理。

在渲染进程中,需要发送检查的消息,监听更新好后发的isUpdateNow消息。

index.html

ipcRenderer.on('message',(event,{message,data}) => {

          console.log('message', { message, data})

          if (message === 'isUpdateNow') {

              if (confirm('Do you want to update now?')) {

                  ipcRenderer.send('updateNow');

              }

          }

      });

在渲染进程完成渲染,并且子进程已经运行成功后,发送update消息,设置autoUpdate参数

ipcRenderer.send('update')

唤起

当用户需要使用改应用时,可以快捷唤起,而不需要用户找到桌面图标,点击打开。

唤起其实是注册一个自定义协议如:WIH,使用链接 wih://,即可唤起应用

在main.js中加入:

app.setAsDefaultProtocolClient('WIH')

此时,应用可以唤起,但是,可以唤起多个应用,我们希望只保留一个实例,需要使用独占锁的方式来控制

main.js

const gotTheLock = app.requestSingleInstanceLock()

if(!gotTheLock){

  app.quit()

} else {

  app.on('second-instance', e =>{

    if(mainWindow){

      mainWindow.focus()

    }

  })

}


参考文章:http://blog.ncmem.com/wordpress/2023/09/15/ueditor%e7%9a%84word%e5%9b%be%e7%89%87%e8%bd%ac%e5%ad%98-electron%e7%af%87/

欢迎入群一起讨论

 

 



标签:node,UEditor,sendUpdateMessage,word,update,electron,autoUpdater,Electron,message
From: https://www.cnblogs.com/songsu/p/17705791.html

相关文章

  • word安装(ppt、excel),以及word的常用设置
    一、安装word(ppt、excel)0、关闭电脑的所有杀毒软件等到激活的时候,注意断开网络!!!一般,白嫖的时候,激活都要记得断网,杀毒软件是从下载就得关闭了!1、卸载卸载:把电脑所有和办公office相关的软件卸载了,比如:word、ppt、excel、onenote、outlook等等[具体参考下图],注意还有wps也要一起卸载......
  • Navicat连接Mysql数据显示2059 - authentication plugin ‘caching_sha2_password‘的
    安装Mysql8.0,使用navicat登录时显示如下错误提示 错误原因:MySQL新版本(8以上版本)的用户登录账户加密方式是【caching_sha2_password】,Navicat不支持这种用户登录账户加密方式。解决办法:1.打开MySQL命令行客户端 2.输入登录密码登录,查看加密方式,命令:showvariableslike'd......
  • UEditor的word图片转存-UEditor篇
    在UEditor中需要做两件事,第一,在一开始标记Img,为每一个需要转存的图片设置一个UUID,得到本地地址和UUID,第二,在上传结束后,根据UUID找到img元素,替换属性src1.标记imgwordimage插件的inputRule中会对输入的数据流进行处理,这里默认会把src是本地的img转成一张图片(提示使用wordimage工......
  • CKEditor从word粘贴问题
    在ckeditor/config.js的CKEDITOR.editorConfig=function(config){}函数中添加如下配置//是否强制复制来的内容去除格式plugins/pastetext/plugin.jsconfig.forcePasteAsPlainText=false//不去除//是否使用等标签修饰或者代替从word文档中粘贴过来的内容plugins/paste......
  • Electron-vue项目打包遇坑
    项目背景一个Electron+vue2的桌面应用项目,进行打包使用了vue-cli-plugin-electron-builder将Electron和vue结合直接使用electron-builder打包问题一:打包后,background.js中会出现模块引入报错。Electron是commonJs规范,但使用了ESM规范import{createProtocol}from'vu......
  • 「乱搞」用 Python 处理 word 文档
    目录写在前面代码写在最后写在前面大家好啊,我是过气up主Luckyblock,今天给大家来点想看的东西。简单记录如何使用Python中的python-docx模块快速处理word文档。周末就是省赛了,然而板子还没整合起来。因为我是一个懒狗,懒得把代码再慢慢复制进文档里了,于是来学了这个。......
  • electron 如何在linux底下调试
    1、确保已经安装了Node.js和npm。2、在你的Electron项目目录下,执行以下命令安装 electron-debug:npminstall--save-develectron-debug3、修改主进程(mainprocess)的启动代码(通常在 main.js 文件中),添加以下内容:const{app,BrowserWindow}=require('electron')......
  • CKEDITOR 展示word中复制的内容和多张图片
    从word中复制全部内容(包括文字、多图片),并在富文本框内展示(CKEDITOR)CKEDITOR.instances["editor"].on('instanceReady',function(elem){console.log(elem.editor.element);elem.editor.on("paste",function(e){console.log(e);......
  • 给WordPress设置自动发布每日60秒文章
    应大家需求,出一个wp自动发布每日60秒读懂世界文章的教程.1.复制下方的php代码<?php$date=file_get_contents("https://www.zhihu.com/api/v4/columns/c_1261258401923026944/items");$date=json_decode($date);$content=$date->data[0]->content;$content=pr......
  • office学习之word
    本帖仅是个人学习贴,对他人可能无太大帮助一、结合excel表格批量完成邀请函员工工作证工资条合同的客户信息的批量录入  二、插入图片文本框等设置浮于文字上方这样就不影响文字的排版了Ctrlshift左键可以复制文本框 三、word模板的来源有word自带的主题模板......