利用Electron简单撸一个Markdown编辑器的方法

# 克隆示例项目的仓库
$ git clone https://github.com/electron/electron-quick-start

# 进入这个仓库
$ cd electron-quick-start

# 安装依赖并运行
$ npm install && npm start

vue init simulatedgreg/electron-vue FanlyMD

npm installnpm run dev

npm install buefy vue2-ace-editor vue-material-design-icons --save

npm install markdown-it --save

npm install electron-store --save

.
├── README.md
├── app-screenshot.jpg
├── appveyor.yml
├── build
│   └── icons
│     ├── 256x256.png
│     ├── icon.icns
│     └── icon.ico
├── dist
│   ├── electron
│   │   └── main.js
│   └── web
├── package.json
├── src
│   ├── index.ejs
│   ├── main
│   │   ├── index.dev.js
│   │   ├── index.js
│   │   ├── mainMenu.js
│   │   ├── preview-server.js
│   │   └── renderer.js
│   ├── renderer
│   │   ├── App.vue
│   │   ├── assets
│   │   │   ├── css
│   │   │   │   └── coding01.css
│   │   │   └── logo.png
│   │   ├── components
│   │   │   ├── EditorPage.vue
│   │   │   └── Preview.vue
│   │   └── main.js
│   └── store
│     ├── content.js
│     └── store.js
├── static
└── yarn.lock

<div id="wrapper">
  <div id="editor" class="columns is-gapless is-mobile">
    <editor 
      id="aceeditor"
      ref="aceeditor"
      class="column"
      v-model="input" 
      @init="editorInit" 
      lang="markdown" 
      theme="twilight" 
      width="500px" 
      height="100%"></editor>
    <preview
      id="previewor" 
      class="column"
      ref="previewor"></preview>
  </div>
</div>

watch: {
  input: function(newContent, oldContent) {
    messageBus.newContentToRender(newContent);
  }
},

import Vue from 'vue';
import App from './App';
import 'buefy/dist/buefy.css';
import util from 'util';
import { ipcRenderer } from 'electron';

if (!process.env.IS_WEB) Vue.use(require('vue-electron'))
Vue.config.productionTip = false

export const messageBus = new Vue({
 methods: {
  newContentToRender(newContent) {
   ipcRenderer.send('newContentToRender', newContent);
  },
  saveCurrentFile() { }
 }
});

// 监听 newContentToPreview，将 url2preview 传递给 vue 的newContentToPreview 事件
// 即，传给 Preview 组件获取
ipcRenderer.on('newContentToPreview', (event, url2preview) => {
 console.log(`ipcRenderer.on newContentToPreview ${util.inspect(event)} ${url2preview}`);
 messageBus.$emit('newContentToPreview', url2preview);
});

/* eslint-disable no-new */
new Vue({
 components: { App },
 template: '<App/>'
}).$mount('#app')

import {
  app
} from 'electron'
import path from 'path'
import fs from 'fs'
import EStore from 'electron-store'

class Content {
  constructor() {
    this.estore = new EStore()
    this.estore.set('headercontent', `<img src="/UploadFiles/2021-04-02/logo.jpeg">

注：这里只是写死的头部和尾部内容。
有了头尾部内容，和编辑器的 Markdown 内容，我们就可以将这些内容整合，然后输出给我们的右侧 Preview 组件了。


ipcMain.on('newContentToRender', function(event, content) {
 const rendered = renderContent(headerContent, footerContent, content, cssContent, 'layout1.html');
 
 const previewURL = newContent(rendered);
 mainWindow.webContents.send('newContentToPreview', previewURL);
});


其中，renderContent(headerContent, footerContent, content, cssContent, 'layout1.html') 方法就是将我们的头部、尾部、Markdown内容、css 样式和我们的模板 layout1.html 载入。这个就比较简单了，直接看代码：


import mdit from 'markdown-it';
import ejs from 'ejs';

const mditConfig = {
  html:     true, // Enable html tags in source
  xhtmlOut:   true, // Use '/' to close single tags (<br />)
  breaks:    false, // Convert '\n' in paragraphs into <br>
  // langPrefix:  'language-', // CSS language prefix for fenced blocks
  linkify:   true, // Autoconvert url-like texts to links
  typographer: false, // Enable smartypants and other sweet transforms
 
  // Highlighter function. Should return escaped html,
  // or '' if input not changed
  highlight: function (/*str, , lang*/) { return ''; }
};
const md = mdit(mditConfig);

const layouts = [];

export function renderContent(headerContent, footerContent, content, cssContent, layoutFile) {
  const text = md.render(content);
  const layout = layouts[layoutFile];
  const rendered = ejs.render(layout, {
    title: 'Page Title',
    content: text,
    cssContent: cssContent,
    headerContent: headerContent,
    footerContent: footerContent,
  });
  return rendered;
}

layouts['layout1.html'] = `
<html>
  <head>
    <meta charset='utf-8'>
    <title><%= title %></title>
    <style>
      <%- cssContent %>
    </style>
  </head>
  <body>
    <div class="markdown-body">
      <section class="body_header">
        <%- headerContent %>
      </section>
      <div id="content">
        <%- content %>
      </div>
      <section class="body_footer">
        <%- footerContent %>
      </section>
    </div>
  </body>
</html>
`;


这里，使用插件 markdown-it 来解析 Markdown 内容，然后使用ejs.render() 来填充模板的各个位置内容。这里，同时也为我们的目标：样式必须是可以自定义的 和封装各种不同情况下，使用不同的头部、尾部、模板、和样式提供了伏笔
当有了内容后，我们还需要把它放到「服务器」上，const previewURL = newContent(rendered);


import http from 'http';
import url from 'url';

var server;
var content;

export function createServer() {
  if (server) throw new Error("Server already started");
  server = http.createServer(requestHandler);
  server.listen(0, "127.0.0.1");
}

export function newContent(text) {
  content = text;
  return genurl('content');
}

export function currentContent() {
  return content;
}

function genurl(pathname) {
  const url2preview = url.format({
    protocol: 'http',
    hostname: server.address().address,
    port: server.address().port,
    pathname: pathname
  });
  return url2preview;
}

function requestHandler(req, res) {
  try {
    res.writeHead(200, {
      'Content-Type': 'text/html',
      'Content-Length': content.length
    });
    res.end(content);
  } catch(err) {
    res.writeHead(500, {
      'Content-Type': 'text/plain'
    });
    res.end(err.stack);
  }
}


最终得到 URL 对象，转给我们右侧的 Preview 组件，即通过 mainWindow.webContents.send('newContentToPreview', previewURL);
注：在 Main 和 Renderer 进程间通信，使用的是 ipcMain 和 ipcRenderer。ipcMain 无法主动发消息给 ipcRenderer。因为ipcMain只有 .on() 方法没有 .send() 的方法。所以只能用 webContents。
预览区
右侧使用的时间上就是一个 iframe 控件，具体做成一个组件 Preview：


<template>
  <iframe src="/UploadFiles/2021-04-02/">

在 Preview 组件我们使用 vue 的 $on 监听 newContentToPreview 事件，实时载入 URL 对象。


messageBus.$on('newContentToPreview', (url2preview) => {
  this.reload(url2preview);
});


到此为止，我们基本实现了最基础版的 Markdown 编辑器功能，yarn run dev 运行看看效果：

总结
第一次使用 Electron，很肤浅，但至少学到了一些知识：

  
每个 Electron 应用只有一个 Main 进程，主要用于和系统打交道和创建应用窗口，在 Main 进程中，利用 ipcMain 监听来自 ipcRenderer的事件，但没有 send 方法，只能利用 BrowserWindow。webContents.send()。
  
每个页面都有对应的 Renderer 进程，用于渲染页面。当然也有对应的 ipcRenderer 用于接收和发送事件。
  
在 vue 页面组件中，我们还是借助 vue 的 $on 和 `$emit 传递和接收消息。

接下来一步步完善该应用，目标是满足于自己的需要，然后就是：也许哪天就开源了呢。
解决中文编码问题
由于我们使用 iframe，所以需要在 iframe 内嵌的 <html></html> 增加 <meta charset='utf-8'>
复制代码 代码如下:以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。