利用Electron簡單擼一個(gè)Markdown編輯器的方法

# 克隆示例項(xiàng)目的倉庫
$ git clone https://github.com/electron/electron-quick-start

# 進(jìn)入這個(gè)倉庫
$ cd electron-quick-start

# 安裝依賴并運(yùn)行
$ 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() { }
 }
});

// 監(jiān)聽 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="http://bimage.coding01.cn/logo.jpeg" class="logo">
 <section class="textword"><span class="text">本文 <span id="word">111</span>字，需要 <span id="time"></span> 1分鐘</span></section>`)
 this.estore.set('footercontent', `<hr>
 <strong>coding01 期待您繼續(xù)關(guān)注</strong>
 <img src="http://bimage.coding01.cn/coding01_me.GIF" alt="qrcode">`)
 }

 // This will just return the property on the `data` object
 get(key, val) {
 return this.estore.get('windowBounds', val)
 }

 // ...and this will set it
 set(key, val) {
 this.estore.set(key, val)
 }

 getContent(content) {
 return this.headerContent + content + this.footerContent
 }

 getHeaderContent() {
 return this.estore.get('headercontent', '')
 }
 
 getFooterContent() {
 return this.estore.get('footercontent', '')
 }
}

// expose the class
export default Content

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

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>
`;

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);
 }
}

<template>
 <iframe src=""/>
</template>

<script>
import { messageBus } from '../main.js';

export default {
 methods: {
 reload(previewSrcURL) {
 this.$el.src = previewSrcURL;
 }
 },
 created: function() {
 messageBus.$on('newContentToPreview', (url2preview) => {
 console.log(`newContentToPreview ${url2preview}`);
 this.reload(url2preview);
 });
 }
}
</script>

<style scoped>
iframe { height: 100%; }
</style>

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