SimpleMDE：一款可在浏览器和 Electron 中使用的 Markdown 编辑器。

2017.05.19

Web系统开发

1 介绍
2 从 node.js 中使用
3 修改建议
4 棘手问题
5 概括

大家好，
我是Mandai，Wild团队负责开发工作的成员。

虽然浏览器中可以使用许多富文本编辑器，但说到 Markdown 编辑器，似乎选择仍然非常少。

这次我们将介绍易于实现的 SimpleMDE。

介绍

一个演示版本这里，看起来非常简单，只包含基本功能。

由于该模块可通过 CDN 获取，我们将使用 CDN 加载它。
之后，只需在 HTML 中创建一个文本区域，并创建一个 simpleMDE 的新实例，即可拥有一个简单的 Markdown 编辑器！

<!DOCTYPE html><html lang="ja"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>测试</title><link rel="stylesheet" href="https://cdn.jsdelivr.net/simplemde/latest/simplemde.min.css"></head><body><textarea></textarea><script src="https://cdn.jsdelivr.net/simplemde/latest/simplemde.min.js"></script><script> var simplemde = new SimpleMDE(); </script></body></html>

在网站上使用可能比较困难，但如果将其与 Electron 或类似技术结合，并将其转化为原生桌面应用程序，我认为它的用途将会扩展。

从 node.js 中使用

接下来，Electron我将介绍如何在

在这里，我想尝试从 npm 安装一个模块并显示它。

首先，安装它。

npm install simplemde

入口点 JavaScript 代码应该类似于这样：

// app.js 'use strict'; var electron = require('electron'); var app = electron.app; var BrowserWindow = electron.BrowserWindow; var mainWindow = null; app.on('window-all-closed', () => { if (process.platform != 'darwin') app.quit(); }); app.on('ready', () => { mainWindow = new BrowserWindow(); mainWindow.on('closed', ()=>{ mainWindow = null; }); mainWindow.loadURL('file://' + __dirname + '/index.html'); });

接下来，在同一目录下创建一个 index.html 文件。
这与之前的 HTML 文件几乎相同，但更简单。

<!-- index.html --><!DOCTYPE html><html lang="ja"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>测试</title><link rel="stylesheet" href="https://cdn.jsdelivr.net/simplemde/latest/simplemde.min.css"></head><body><textarea></textarea><script src="./index.js"></script></body></html>

创建 index.js 文件，该文件将从 HTML 加载。

// index.js var simplemde = require('/path/to/simplemde.min.js'); var editor = new simplemde();

准备好上述文件并编译后，会显示一个与浏览器中显示的编辑器样式相同的编辑器。

修改建议

simleMDE 具有很强的扩展性，添加菜单也很容易。
作为菜单图标Font Awesome，无需单独准备图片。

我们来尝试添加一个保存按钮。

// index.js var simplemde = require(/path/to/simplemde.min.js''); var editor = new simplemde({ toolbar: { { name: 'save', action: save_content, className: 'fa fa-save', title: '保存', }, '|', 'bold', 'italic', 'heading', '|', 'quote', 'unordered-list', 'ordered-list', '|', 'link', 'image', '|', 'preview', 'side-by-side', 'fullscreen', '|', 'guide', } }); function save_content(){ // 一些处理过程 }

你需要自行实现保存机制，但编辑器设置现已完成。
如果你注册了其他菜单，默认菜单将会消失，所以你也需要注册这些菜单，不过设置过程非常简单。