利用Electron簡單擼一個Markdown編輯器的方法
Markdown 是我們每一位開發(fā)者的必備技能，在寫 Markdown 過程中，總是尋找了各種各樣的編輯器，但每種編輯器都只能滿足某一方面的需要，卻不能都滿足于日常寫作的各種需求。
所以萌生出自己動手試試，利用 Electron 折騰一個 Markdown 編輯器出來。
下面羅列出我所理想的 Markdown 編輯器的痛點需求：
- 必須要有圖床功能，而且還可以直接上傳到自己的圖片后臺，如七牛；
- 樣式必須是可以自定義的；
- 導出的 HTML 內容可以直接粘貼到公眾號編輯器里，直接發(fā)布，而不會出現(xiàn)格式的問題；
- 可以自定義固定模塊，如文章的頭部，或者尾部。
- 可以自定義功能，如：自動載入隨機圖片，豐富我們的文章內容。
- 必須是跨平臺的。
- 其它。
環(huán)境搭建
使用 Electron 作為跨平臺開發(fā)框架，是目前最理想的選擇，再者說，如：VS Code、Atom 等大佬級別的應用也是基于 Electron 開發(fā)的。
Electron
使用 JavaScript, HTML 和 CSS 構建跨平臺的桌面應用
初次使用 Electron，我們下載回來運行看看：
# 克隆示例項目的倉庫 $ git clone https://github.com/electron/electron-quick-start # 進入這個倉庫 $ cd electron-quick-start # 安裝依賴并運行 $ npm install && npm start
VUE
VUE 是當前的前端框架的佼佼者，而且還是我們國人開發(fā)的，不得不服。本人也是 VUE 的忠實粉絲，在還沒火的 1.0 版本開始，我就使用 VUE 了。
electron-vue
將這兩者結合在一起，也就是本文推薦使用的 simulatedgreg/electron-vue：
vue init simulatedgreg/electron-vue FanlyMD
安裝插件，并運行：
npm installnpm run dev
選擇插件
1. Ace Editor
選擇一個好的編輯器至關重要：
chairuosen/vue2-ace-editor: https://github.com/chairuosen/vue2-ace-editor
npm install buefy vue2-ace-editor vue-material-design-icons --save
2. markdown-it
能夠快速的解析 Markdown 內容，我選擇是用插件：markdown-it
npm install markdown-it --save
3. electron-store
既然是編輯器應用，所有很多個性化設置和內容，就有必要存于本地，如編輯器所需要的樣式文件、自定義的頭部尾部內容等。這里我選擇：electron-store
npm install electron-store --save
整合
萬事俱備，接下來我們就開始著手實現(xiàn)簡單的 Markdown 的編輯和預覽功能。
先看 src 文件夾結構：
. ├── 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
整個 APP 主要分成左右兩列結構，左側編輯 Markdown 內容，右側實時看到效果，而頁面視圖主要由 Renderer 來渲染完成，所以我們首先在 renderer/components/ 下創(chuàng)建 vue 頁面：EditorPage.vue：
<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>
編輯區(qū)
左側使用插件：require('vue2-ace-editor')，處理實時監(jiān)聽 Editor 輸入 Markdown 內容，將內容傳出去。
watch: {
input: function(newContent, oldContent) {
messageBus.newContentToRender(newContent);
}
},
其中這里的 messageBus 就是把 vue 和 ipcRenderer 相關邏輯事件放在一起的 main.js：
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')
編輯器的內容，將實時由 ipcRenderer.send('newContentToRender', newContent); 下發(fā)出去，即由 Main 進程的 ipcMain.on('newContentToRender', function(event, content) 事件獲取。
一個 Electron 應用只有一個 Main 主進程，很多和本地化東西 (如：本地存儲，文件讀寫等) 更多的交由 Main 進程來處理。
如本案例中，想要實現(xiàn)的第一個功能就是，「可以自定義固定模塊，如文章的頭部，或者尾部」
我們使用一個插件：electron-store，用于存儲頭部和尾部內容，創(chuàng)建Class：
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ù)關注</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
注：這里只是寫死的頭部和尾部內容。
有了頭尾部內容，和編輯器的 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無法主動發(fā)消息給ipcRenderer。因為ipcMain只有.on()方法沒有.send()的方法。所以只能用webContents。
預覽區(qū)
右側使用的時間上就是一個 iframe 控件，具體做成一個組件 Preview：
<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>
在 Preview 組件我們使用 vue 的 $on 監(jiān)聽 newContentToPreview 事件，實時載入 URL 對象。
messageBus.$on('newContentToPreview', (url2preview) => {
this.reload(url2preview);
});
到此為止，我們基本實現(xiàn)了最基礎版的 Markdown 編輯器功能，yarn run dev 運行看看效果：
總結
第一次使用 Electron，很膚淺，但至少學到了一些知識：
- 每個 Electron 應用只有一個 Main 進程，主要用于和系統(tǒng)打交道和創(chuàng)建應用窗口，在 Main 進程中，利用 ipcMain 監(jiān)聽來自 ipcRenderer的事件，但沒有 send 方法，只能利用 BrowserWindow。webContents.send()。
- 每個頁面都有對應的 Renderer 進程，用于渲染頁面。當然也有對應的 ipcRenderer 用于接收和發(fā)送事件。
- 在 vue 頁面組件中，我們還是借助 vue 的 $on 和 `$emit 傳遞和接收消息。
接下來一步步完善該應用，目標是滿足于自己的需要，然后就是：也許哪天就開源了呢。
解決中文編碼問題
由于我們使用 iframe，所以需要在 iframe 內嵌的 <html></html> 增加 <meta charset='utf-8'>
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
這篇文章主要介紹了淺談Vue CLI 3結合Lerna進行UI框架設計,在此之前先簡單介紹一下Element的構建流程，以便對比新的UI框架設計。小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-04-04
這篇文章主要介紹了vue中實現(xiàn)路由跳轉的三種方式超詳細教程，其中聲明式router-link實現(xiàn)跳轉最簡單的方法，可用組件router-link來替代a標簽，每種方式給大家講解的非常詳細需要的朋友可以參考下2022-11-11
這篇文章主要介紹了VueCli3.0中集成MockApi的方法示例，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-07-07
vue-router中scrollBehavior的巧妙用法
本文給大家介紹vue-router中scrollBehavior的妙用,文中給大家提到了兩種解決方案，需要的朋友可以參考下2018-07-07
這篇文章主要介紹了vue實現(xiàn)微信瀏覽器左上角返回按鈕攔截功能,本文通過實例代碼相結合的形式給大家介紹的非常詳細，具有一定的參考借鑒價值，需要的朋友可以參考下2020-01-01
這篇文章主要為大家詳細介紹了vue2.0多條件搜索組件的實現(xiàn)方法，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-05-05
vue form表單post請求結合Servlet實現(xiàn)文件上傳功能
這篇文章主要介紹了vue form表單post請求結合Servlet實現(xiàn)文件上傳功能，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2021-01-01
這篇文章主要介紹了vue接入高德地圖繪制扇形，需求是有一個列表，列表的數(shù)據(jù)就是一個基站信息，包含基站的經(jīng)緯度信息和名字，基站下面又分扇區(qū)，本文通過示例代碼給大家介紹的非常詳細，需要的朋友可以參考下2022-04-04
這篇文章主要為大家詳細介紹了vue非組件如何實現(xiàn)列表的無縫滾動效果,文中的示例代碼簡潔易懂,感興趣的小伙伴可以跟隨小編一起學習一下2023-09-09
Vue3 composition API實現(xiàn)邏輯復用的方法
本文主要介紹了Vue3 composition API實現(xiàn)邏輯復用的方法，文中通過示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-08-08