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

  1. 云栖社区>
  2. 前端那些事儿>
  3. 博客>
  4. 正文

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

青衫无名 2018-07-17 14:10:35 浏览3653
展开阅读全文

最近在寻找适合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,标题栏不显示,默认显示,建议显示

默认的标题栏

1

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

1

作者:CoderMiner
原文发布时间:2018年07月02日
本文来源掘金如需转载请紧急联系作者


网友评论

登录后评论
0/500
评论
青衫无名
+ 关注
所属云栖号: 前端那些事儿