Electron实现markdown笔记软件（六）

关于这个markdown笔记软件（五）——应用逻辑、electron对话框

项目源码

https://github.com/andytt/ErtuilEditor

目录

关于这个markdown笔记软件（一）——总体的思路和介绍

关于这个markdown笔记软件（二）——模型层设计

关于这个markdown笔记软件（三）——视图层设计

关于这个markdown笔记软件（四）——md的渲染和生成

关于这个markdown笔记软件（五）——electron库

关于这个markdown笔记软件（六）——应用逻辑、electron对话框

关于这个markdown笔记软件（七）——其他细节、总结

主体逻辑

程序的主题逻辑在file_manage.js中定义。在程序中使用“标签”，而不是“文件夹”来管理各个笔记，因此是一个比较扁平的逻辑。
程序所要实现的功能也就是对“标签”和“笔记”两种元素的增、删、查、改。

功能

• 要能够新建、删除笔记
• 要能够新建、删除标签
• 要能够自动保存笔记
• 要能够修改笔记的标签归属
• 要能够导出为pdf、图片、和md源文件
• 要能够导入md文件
• 要能够修改样式

以上功能全部在file_manage.js中实现。

导出

导出的时候用到了phantom库。将渲染好的html文件作为目标传入phantom库，就能够实现作为pdf和图片导出。具体代码如下：

function make_file(filename){
    var readStream = fs.createReadStream(__dirname+'/data/'+curr_note+'/'+curr_note+'.html');
    var writeStream = fs.createWriteStream(__dirname+'/data/output.html');
    readStream.pipe(writeStream);
    phantom.create().then(function(ph) {
        ph.createPage().then(function(page) {
            page.open("file://"+__dirname+'/data/output.html').then(function(status) {
                page.property('viewportSize',{width: 800, height: 600});
                page.render(filename).then(function(){
                    ph.exit();
                });
            });
        });
    });
}

图片和pdf是一套代码，不需要分别处理。也可以导出为md源文件，只需要把对应md文件复制一份发送到对应位置即可。

保存

程序可以使用ctrl+S的快捷键来保存。程序每十秒钟也会自动保存一次。
使用schedule实现，代码如下：

var rule     = new schedule.RecurrenceRule();  
var times    = [1,11,21,31,41,51];  
rule.second  = times;  
schedule.scheduleJob(rule, function(){  
    save_note(true,false);
});  

而function save_note(auto = false,build = false,reload = true)则是具体保存文件的函数。

auto表示时候是自动保存，build参数表示保存完成之后时候需要预览，reload参数表示保存完成之后时候需要重新载入目录。

导入

导入md文件

程序可以自己导入后缀是.md的文件。这是在input_file函数之中实现的。

导入图片

文件也可以实现对图片和其他素材对管理。在导入图片对时候，会将图片复制到应用程序自己的对应文件夹下，然后给出目的地的url。这样在生成html的时候就能减少图片和其他资源丢失的情况。

function import_file(){
    save_note();
    dialog.showOpenDialog({
        properties: ['openFile']
      }, function (files) {
        if (files){
            var dir_name = path.dirname(files[0]);
            var base_name = path.basename(files[0]);
            var desp = path.join(__dirname+'/data/'+curr_note+'/',base_name);
            var readStream = fs.createReadStream(files[0]);
            var writeStream = fs.createWriteStream(desp);
            readStream.pipe(writeStream);
            insertAtCursor(document.getElementById('raw_text'),"[]("+__dirname+'/data/'+curr_note+'/'+base_name+")")
        }
    })
}

insertAtCursor函数可以在对应位置插入一个markdown格式的“”并在其中生成图片的url。（这个函数也借鉴了网络资源）。

对话框

electron 有一个模块dialog提供来对话框。可以通过如下方式调用：

保存对话框

const {dialog} = require('electron');//主进程
const {dialog} = require('electron').remote;//渲染进程

这个模块提供了系统消息对话框、打开对话框、保存对话框、错误对话框等。
例如，在导出文件时，需要使用保存文件对话框：

    const options = {
        title: '导出',
        filters: [
          { name: 'PDF文稿', extensions: ['pdf'] },
          { name: '图片格式', extensions: ['jpg','jpeg','png','gif'] },
          { name: 'Markdown文件', extensions: ['md'] }
        ]
    }
    dialog.showSaveDialog(options, function (filename) {
        console.log(path.extname(filename));
        if(path.extname(filename) == '.md'){
            var readStream = fs.createReadStream(__dirname+'/data/'+curr_note+'/'+curr_note+'.md');
            var writeStream = fs.createWriteStream(filename);
            console.log(__dirname+'/data/'+curr_note+'/'+curr_note+'.md');
            console.log(filename);
            readStream.pipe(writeStream);
        }else{
            make_file(filename);
        }
    })

options给出来对话框参数。

打开对话框

传入.md文件也需要导入对话框

dialog.showOpenDialog({
        properties: ['openFile']
      }, function (files){
            //省略
        }
    );

properties可以设置时候可以打开文件、打开目录、选中多个文件等。
回调函数中的files则返回来一个保存文件地址字符串的数组。

错误对话框

参数很简单，分别是主要和次要提示信息。例如，发现文件重名时候，可以如下调用：

dialog.showErrorBox('文件名重复','请修改文件名');