[大阪/横滨/德岛] 寻找基础设施/服务器端工程师！

【超过500家企业部署】AWS搭建、运维、监控服务

【CentOS的后继者】AlmaLinux OS服务器搭建/迁移服务

[仅适用于 WordPress] 云服务器“Web Speed”

[便宜]网站安全自动诊断“快速扫描仪”

[预约系统开发] EDISONE定制开发服务

[注册100个URL 0日元] 网站监控服务“Appmill”

【兼容200多个国家】全球eSIM“超越SIM”

[如果您在中国旅行、出差或驻扎]中国SIM服务“Choco SIM”

【全球专属服务】Beyond北美及中国MSP

[YouTube]超越官方频道“美由丸频道”

SimpleMDE，一款可在浏览器和电子产品中使用的 Markdown 编辑器

2017.05.19

网络系统开发

1 介绍
2 从 Node.js 使用
3 修改建议
4 麻烦
5 概括

你好。
我是Mandai，负责Wild 开发团队。

浏览器上可以使用的富文本编辑器有很多种，但是说到 Markdown 的编辑器，我感觉选择还是很少。

这次，我们将介绍SimpleMDE，它易于安装。

介绍

在这里一个演示，我的印象是它非常简单并且具有最少的必要功能。

可以使用 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 安装 simplemde

使入口点 JavaScript 如下所示。

// app.js 'use strict'; var electro = require('electron'); var BrowserWindow = electro.BrowserWindow; var mainWindow = null; , () => { if (process.platform != 'darwin') app.quit() }); app.on('ready', () => { mainWindow = new BrowserWindow(); mainWindow.on( '关闭', ()=>{ mainWindow = null });

接下来，在同一级别创建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({ 工具栏: { { name: 'save', action: save_content, className: 'fa fa -save', title: '保存', }, '|', '粗体', '斜体', '标题', '|', '引用', '无序列表', '有序列表', '| ', '链接', '图像', '|', '预览', '并排', '全屏', '|', '指南', } }); function save_content(){ // 一些流程}

您需要自己合并保存机制，但编辑器端的设置现已完成。
如果您注册额外的菜单，默认菜单将会消失，因此您还需要注册它们，但设置可以很容易地完成。