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

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

安装

通过 npm

npm install simplemde --save复制代码

通过 bower

bower install simplemde --save复制代码

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


    复制代码

开始使用

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

复制代码

也可以显式的指定textarea

复制代码

或使用JQuery的方法

复制代码

获取/设置内容

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会使用代码高亮，默认是false,如果设置为true,请在页面中引入


    复制代码

事件

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编辑器