7个最佳Markdown编辑器Javascript和jQuery插件

本文概述

• 7. JS-Markdown-Editor
• 6. Bootstrap Markdown编辑器
• 5. Woofmark
• 4. Editor
• 3. Markdown-it
• 2. simplemd-markdown-editor
• 1. Editor.md

例如, 每个人都知道WYSIWYG(所见即所得)格式可用于设计网页。好吧, 现在Markdown就像简化的WYSIWYG并以最佳方式进行了简化。 Markdown是面向Web作家的文本到HTML转换工具。 Markdown允许你使用易于阅读, 易于编写的纯文本格式进行编写, 然后将其转换为结构上有效的XHTML(或HTML)。

除了有许多开源Java脚本所见即所得(WYSIWYG)编辑器外, 还有许多用Javascript编写的Markdown开源编辑器插件。享受我们的7种最佳开源Markdown编辑器集合。

7. JS-Markdown-Editor

Github

JS Markdown编辑器是@Grafikart编写的Javascript插件, 它是一款易于使用的markdown编辑器, 具有实时预览和图像上传功能。此插件的初始化使用MdEditor类的新实例将文本区域转换为markdown编辑器。

要初始化此插件, 请提供你要转换为markdown编辑器的textarea的ID作为类的第一个参数：

var md = new MdEditor('#mdeditor', {
    preview: true
});

该编辑器甚至提供了集成的图像上传器(使用拖放)。你可以通过为上载器选项提供一个字符串来启用它, 该字符串包含应在其中上传图像的REST api端点。配置对象(MdEditor类的第二个参数)具有几个选项, 你可能需要在官方存储库中检入。

6. Bootstrap Markdown编辑器

Github

该插件是用于Bootstrap的Markdown编辑器, 具有预览, 图像上传支持, 快捷方式和其他功能。这个插件有3个依赖项

• Bootstrap
• jQuery的
• Ace编辑

要使用它, 请在文档中添加带有脚本标签的依赖项：

<script src="bower_components/jquery/dist/jquery.min.js"></script>
<script src="bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
<script src="bower_components/ace-builds/src-min/ace.js"></script>
<script src="bower_components/bootstrap-markdown-editor/dist/js/bootstrap-markdown-editor.js"></script>

用jQuery选择要在其中初始化插件的文本区域, 然后使用markdownEditor方法：

$('#myEditor').markdownEditor();

options对象可以在插件初始化时作为对象传递, 请查阅文档以获取更多信息。

5. Woofmark

Github

Woofmark是一个模块化, 渐进且美观的Markdown和HTML编辑器。该插件支持包括所有理智的浏览器和IE9 +。该编辑器的主要功能是：

• 小而专注
• 渐进式, 增强原始的<textarea>
• Markdown, HTML和WYSIWYG输入模式
• 即使在输入模式下, 文本选择仍然存在！
• 内置撤消和重做
• 完全可定制的样式
• 自带解析器

4. Editor

Github

Editor不是所见即所得的编辑器, 它是纯文本markdown编辑器。 CodeMirror是一个依赖项,

你可以通过添加3个必需文件(CSS和JS)开始使用Editor：

<link rel="stylesheet" href="http://lab.lepture.com/editor/editor.css" />
<script type="text/javascript" src="http://lab.lepture.com/editor/editor.js"></script>
<script type="text/javascript" src="http://lab.lepture.com/editor/marked.js"></script>

然后使用Editor类对其进行初始化, 并使用render方法对其进行渲染：

var editor = new Editor({
    element: document.getElementById("myTextArea")
});

editor.render();

3. Markdown-it

Github

Markdown-它是一种Markdown解析器, 具有100％CommonMark支持。它提供了扩展, 语法插件和高性能。 Markdown-it的主要功能是：

• 遵循CommonMark规范+添加语法扩展和语法(URL自动链接, 印刷者)。
• 可配置语法！你可以添加新规则, 甚至替换现有规则。
• 高速。
• 默认为安全。
• npm上由社区编写的插件和其他软件包。

降价-这是作者做出的决定的结果, 这些作者贡献了99％的卓越代码, 转而使用具有相同作者身份但拥有新领导权的项目(Vitaly和Alex)。这不是叉子。

2. simplemd-markdown-editor

Github

SimpleMD是JavaScript文本区域的替代品, 用于编写美观且易于理解的Markdown。 WYSIWYG式编辑器允许那些对Markdown不太熟悉的用户使用熟悉的工具栏按钮和快捷方式。另外, 在编辑时会渲染语法以清楚显示预期结果。标题较大, 强调的单词斜体, 链接带有下划线, 等等。SimpleMDE是最早具有内置自动保存和拼写检查功能的编辑器之一。

产生HTML的所见即所得(WYSIWYG)编辑器通常很复杂且有错误。 Markdown可通过多种方式解决此问题, 此外Markdown可以在比HTML更多的平台上本地呈现。但是, Markdown并不是普通用户会熟悉的语法, 在编辑时在视觉上也不清晰。换句话说, 对于不熟悉的用户, 他们编写的语法在单击预览按钮之前几乎没有意义。 SimpleMDE旨在消除那些不太熟悉或只是学习Markdown语法的非技术用户的这种差距。 SimpleMDE最初是对lepture的Editor项目的改进, 但现在已经具有了自己的身份。它与CodeMirror捆绑在一起, 并且取决于Font Awesome。 CodeMirror是项目的基础, 它在编写Markdown语法时会对其进行语法分析。

SimpleMDE的初始化非常简单：

<!-- Include the required files -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/simplemde/latest/simplemde.min.css">
<script src="https://cdn.jsdelivr.net/simplemde/latest/simplemde.min.js"></script>

<!-- Start simple MDE -->
<script>
    var simplemde = new SimpleMDE({ 
        element: document.getElementById("MyID") 
    });
</script>

1. Editor.md

Github

Editor.md是一个使用Javascript编写, 基于CodeMirror, jQuery和Marked的开源可嵌入在线降价编辑器。 Editor.md的主要功能是：

• 支持标准Markdown / CommonMark和GFM(GitHub风味Markdown)；
• 功能齐全：实时预览, 图像(跨域)上载, 预格式化的文本/代码块/表格插入, 代码折叠, 搜索替换, 只读, 主题, 多语言, L18n, HTML实体, 代码语法突出显示。 ..;
• Markdown Extras：支持ToC(目录), 表情符号, 任务列表, @ Links …；
• 与所有主流浏览器(IE8 +)兼容, 兼容Zepto.js和iPad；
• 支持解码和过滤HTML标签和属性；
• 支持TeX(LaTeX表达式, 基于KaTeX), Markdown流程图和顺序图扩展语法；
• 支持AMD / CMD(Require.js＆Sea.js)模块加载器, 以及自定义/定义编辑器插件；

初始化的最基本示例是：

<link rel="stylesheet" href="editormd.min.css" />
<div id="editormd">
    <textarea style="display:none;">### Hello Editor.md !</textarea>
</div>

<script src="jquery.min.js"></script>
<script src="editormd.min.js"></script>
<script type="text/javascript">
    $(function() {
        var editor = editormd("editormd", {
            path : "../lib/" // Autoload modules mode, codemirror, marked... dependents libs path
        });

        /*
        // or
        var editor = editormd({
            id   : "editormd", path : "../lib/"
        });
        */
    });
</script>

如果你知道另一个值得一提的开源Markdown编辑器, 请在评论框中与社区共享。