利用SimpleMDE打造类似简书、掘金的markdown编辑器

最近在寻找适合web端的markdown编辑器，一直没有发现太合适的，直到发现 SimpleMDE，也可以直接在 Github上查看对应的说明信息，

安装

• 通过 npm

npm install simplemde --save复制代码

• 通过 bower

bower install simplemde --save复制代码

• 也可以通过CDN连接或本地文件，直接在浏览器中引用

<  rel="stylesheet" href="https://cdn.jsdelivr.net/simplemde/latest/simplemde.min.css"><  src="https://cdn.jsdelivr.net/simplemde/latest/simplemde.min.js"></ >复制代码

开始使用

如果不指定textarea，默认使用的当前页面的第一个textarea

< >var simplemde = new SimpleMDE();</ >复制代码

也可以显式的指定textarea

< >var simplemde = new SimpleMDE({ element: document.getElementById("MyID") });</ >复制代码

或使用JQuery的方法

< >var simplemde = new SimpleMDE({ element: $("#MyID")[0] });</ >复制代码

获取/设置内容

simplemde.value();复制代码

simplemde.value("This text will appear in the editor");复制代码

获取渲染之后的内容(默认是HTML形式)

var val = simplemde.value()var html = simplemde.markdown(val)复制代码

配置

先上代码

var simplemde = new SimpleMDE({    element: document.getElementById("demo"),    spellChecker: false,    autofocus: true,    autoDownloadFontAwesome: false,    placeholder: "Type here...",    autosave: {        enabled: true,        uniqueId: "demo",        delay: 1000,    },    tabSize: 4,    status: false,    lineWrapping: false,    renderingConfig: {        codeSyntaxHighlighting: true    },});复制代码

一些参数说明

• autoDownloadFontAwesome: true会强制下载Font Awesome，false不会下载，默认值是 undefined,会自动检查，由于网络问题，然后下载，建议设置为 false,手动的引入

• autoSave: 是否自动保存，默认是 false

autosave: {    enabled: true,    uniqueId: "demo",//必须设置    delay: 10000,//时间间隔默认 10s},复制代码

• toolbar：设置为false,标题栏不显示，默认显示，建议显示

默认的标题栏

• renderingConfig：
  • codeSyntaxHighlighting： 设置为true会使用 highlight.js代码高亮，默认是false,如果设置为true,请在页面中引入

<  src="https://cdn.jsdelivr.net/highlight.js/latest/highlight.min.js"></ ><  rel="stylesheet" href="https://cdn.jsdelivr.net/highlight.js/latest/styles/github.min.css">复制代码

事件

var simplemde = new SimpleMDE();simplemde.codemirror.on("change", function(){	console.log(simplemde.value());});simplemde.isPreviewActive(); // returns booleansimplemde.isSideBySideActive(); // returns booleansimplemde.isFullscreenActive(); // returns booleansimplemde.clearAutosavedValue(); // no returned value复制代码

默认打开全屏预览功能

一般使用markdown编辑文字时，会打开实时预览功能

simplemde.toggleSideBySide()//打开实时全屏预览复制代码

这个功能打开之后，会是全屏的状态，其实我们在编辑文字之后，会直接提交到后台，一般会设置一个标题，但是这个功能打开之后，就是全屏状态，我们需要修改默认的 css文件，加入标题和按钮类似于掘金和 简书的markdown编辑器