利用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編輯器