MarkdownEditor 基于浏览器的 Markdown 在线文本编辑器

Question

MarkdownEditor 是一款基于浏览器的 Markdown 文本编辑器，功能非常简单实用。左侧是源代码，右侧是预览的文本信息，作为编辑器使用上非常方便。

此文本编辑器使用许可描述为“只要你喜欢，你可以随意复制、修改和使用他。（Feel free to take the code and copy it and modify it and use it however you like. ）”

基本有用的特征列表

• 快捷键 Ctrl+S / Cmd+S 保存文件
• 快捷键 Ctrl+Shift+S / Cmd+Shift+S 选择某个部分来保存为Markdown或者HTML代码
• 拖放一个文件到这里来加载它
• 文件内容保存在网址，这样您就可以共享文件

MarkdownEditor文件结构

文件夹里面有一个 emoji 子文件，里面包含了一些可以使用的开源图标，源代码中所引用资源如下代码块所示：

<script src="markdown-it.js"></script>
<script src="markdown-it-footnote.js"></script>
<script src="highlight.pack.js"></script>
<script src="emojify.js"></script>
<script src="codemirror/lib/codemirror.js"></script>
<script src="codemirror/overlay.js"></script>
<script src="codemirror/xml/xml.js"></script>
<script src="codemirror/markdown/markdown.js"></script>
<script src="codemirror/gfm/gfm.js"></script>
<script src="codemirror/javascript/javascript.js"></script>
<script src="codemirror/css/css.js"></script>
<script src="codemirror/htmlmixed/htmlmixed.js"></script>
<script src="codemirror/lib/util/continuelist.js"></script>
<script src="rawinflate.js"></script>
<script src="rawdeflate.js"></script>
<link rel="stylesheet" href="base16-light.css">
<link rel="stylesheet" href="codemirror/lib/codemirror.css">
<link rel="stylesheet" href="default.css">

按个人的习惯，把 JavaScript 代码改为 JS 文件夹下，样式代码改为 CSS 文件夹下。另有 emoji 目录，存储信息交互时所使用的靓丽的图标。

MarkdownEditor 配置和使用

使用这个编辑器，最简单的就是获取编辑器的内容，将 Markdown 的文本信息转换为 HTML 代码，储存在我们的服务器数据库中，方便以后直接调用。

源代码中已经有类似导出/存储文档的功能代码，找出来稍微修改即可。

function saveAsMarkdown(){
    var code = editor.getValue();
    var blob = new Blob([code], { type: 'text/plain' });
    saveBlob(blob, "untitled.md");
}
function saveAsHtml() {
    var code = document.getElementById('out').innerHTML;
    var blob = new Blob([code], { type: 'text/plain' });
    saveBlob(blob, "untitled.html");
}

光是文本信息是不够的，我们还需要实现图片的直接上传功能，可以借用源代码中快捷键（Ctrl/Cmd + S）方式处理，可参见源代码如下：

function showMenu() {
    document.getElementById('menu').style.display = 'block';
}
document.addEventListener('keydown', function(e){
    if(e.keyCode == 83 && (e.ctrlKey || e.metaKey)){
        e.preventDefault();
        showMenu();
        return false;
    }
});

还有其它特别的功能，比如加入扩展支持流程图和 UML 时序图功能，在信息发布中不实用，仅作技术交流研究，需要额外引入插件，流程图使用 flowchart，开源地址为：https://github.com/adrai/flowchart.js

相关资源

• markdown-it for Markdown parsing
• CodeMirror for the awesome syntax-highlighted editor
• highlight.js for syntax highlighting in output code blocks
• js-deflate for gzipping of data to make it fit in URLs
• Github地址：https://github.com/jbt/markdown-editor
• 在线示例地址：http://jbt.github.io/markdown-editor/

关于 Markdown

Markdown 是一种可以使用普通文本编辑器编写的标记语言，通过类似HTML的标记语法，它可以使普通文本内容具有一定的格式，Mediawiki 语法也是基于 Markdown 语法的衍生版本。

Markdown 是一种轻量级的「标记语言」，它的优点很多，目前也被越来越多的写作爱好者，撰稿者广泛使用。看到这里请不要被「标记」、「语言」所迷 惑，Markdown 的语法十分简单。

常用的标记符号也不超过十个，这种相对于更为复杂的 HTML 标记语言来说，Markdown 可谓是十分轻量的，学习成本也不需要太多，且一旦熟悉这种语法规则，会有一劳永逸的效果。