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

本文概述

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="http://www.srcmini.com/bower_components/jquery/dist/jquery.min.js"> < /script> < script src="http://www.srcmini.com/bower_components/bootstrap/dist/js/bootstrap.min.js"> < /script> < script src="http://www.srcmini.com/bower_components/ace-builds/src-min/ace.js"> < /script> < script src="http://www.srcmini.com/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://img.readke.com/220521/0002244N5-8.jpg"> < /script> < script type="text/javascript" src="http://img.readke.com/220521/000224D44-9.jpg"> < /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="http://www.srcmini.com/editormd.min.css" /> < div id="editormd"> < textarea style="display:none; "> ### Hello Editor.md !< /textarea> < /div> < script src="http://www.srcmini.com/jquery.min.js"> < /script> < script src="http://www.srcmini.com/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>

【7个最佳Markdown编辑器Javascript和jQuery插件】如果你知道另一个值得一提的开源Markdown编辑器, 请在评论框中与社区共享。