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

利用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,标题栏不显示，默认显示，建议显示

默认的标题栏 image

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

image