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

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

安装

• 经过 npm

npm install simplemde --save
复制代码

• 经过 bower

bower install simplemde --save
复制代码

• 也能够经过CDN链接或本地文件，直接在浏览器中引用

<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>
复制代码

开始使用

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

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

也能够显式的指定textarea

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

或使用JQuery的方法

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

获取/设置内容

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,请在页面中引入

<script src="https://cdn.jsdelivr.net/highlight.js/latest/highlight.min.js"></script>
<link 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 boolean
simplemde.isSideBySideActive(); // returns boolean
simplemde.isFullscreenActive(); // returns boolean
simplemde.clearAutosavedValue(); // no returned value
复制代码

默认打开全屏预览功能

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

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

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