天天看點

Editor.md開源線上編輯器(頁面插件內建—markdown)

頁面插件內建—markdown

我想或許是個人部落客的福音了,通過引入markdown到部落格内容管理區,非常有效且快速。

為了便以了解,這邊利用個人html檔案進行描述,如有不懂得地方,請提出

  • 擷取編輯器得兩種途徑,進入官網下載下傳zip,壓縮到對應位置Editor.md一款開源線上編輯器
  • 第二種途徑進入OSCHINA,點選下載下傳并壓縮。

為什麼這裡要說到兩種方式,原因是部落客關于第一種進入官網會出現網頁加載不了的情況,試了多種方法無果。若有朋友有解決方法,不勝感激!

Editor.md開源線上編輯器(頁面插件內建—markdown)

壓縮完之後我們會得到這樣一些檔案,我們将需要的檔案拷貝到 個人網頁檔案下

Editor.md開源線上編輯器(頁面插件內建—markdown)

建立lib檔案夾存放插件,進入檔案夾後點選css檔案夾找到“editormd.min.css”此檔案,然後記住這個路勁,引入到個人網頁檔案中

Editor.md開源線上編輯器(頁面插件內建—markdown)

我已經引入好了,你呢?

Editor.md開源線上編輯器(頁面插件內建—markdown)

接下來繼續引入js檔案,找到lib檔案夾中的“editormd.min.js”,此檔案,并引入。

Editor.md開源線上編輯器(頁面插件內建—markdown)

這個路徑是我的,請各位務必參照自己路徑正确引入。

Editor.md開源線上編輯器(頁面插件內建—markdown)

回到第一張圖檔,我們會看到 “examples”這個檔案夾,它所存放的是一些示例,供人預覽;我們點進去可任意找一個自己喜歡樣式。

Editor.md開源線上編輯器(頁面插件內建—markdown)

将選擇好的檔案拖入代碼編輯器中檢視

Editor.md開源線上編輯器(頁面插件內建—markdown)
Editor.md開源線上編輯器(頁面插件內建—markdown)

看一下示例代碼,中間div id名為 test-Editor 裡面的textarea的css樣式預設不顯示,内容[TOC]為編輯器預設的文字;

下面js部分,定義了一個變量名,将原定義好的id名放入進去,設定寬度,高度,滾動方式以及路徑。

按照示例代碼部分,将個人網頁代碼部分改動一下,或者直接複制div部分

Editor.md開源線上編輯器(頁面插件內建—markdown)

id名我改動了一下 div中的css樣式是将編輯區域能夠處在網頁内容前面,不然當編輯器放大時網頁内容也一并顯示了。

接下裡就是js部分,直接複制過去就好。注意複制過來時如果div中的id名有改動,js代碼也要改動一下。

Editor.md開源線上編輯器(頁面插件內建—markdown)

示例代碼中有兩種方法,都可以直接用,但是路徑一定路徑 path 一定要寫好 不然就會出現這種情況

Editor.md開源線上編輯器(頁面插件內建—markdown)

最後結果,怎麼樣,是不是相對來說比較簡單,過程最多的隻是複制,稍多加練習就會很快上手。

Editor.md開源線上編輯器(頁面插件內建—markdown)

繼續閱讀