2. 程式人生 > >讓你自己的網頁支援Markdown編輯器

讓你自己的網頁支援Markdown編輯器

阿新 • • 發佈：2019-02-04

Editor是一款免費的，開源的輕量級Markdown編輯器，附上下載地址
下載下來的資料夾大概是這樣的結構：
這裡寫圖片描述
為了防止專案結構混亂，我做了這樣的目錄結構

這裡寫圖片描述

這裡的new_file.html是我的頁面，它和plug-ins資料夾同級，plug-ins文加下有JQuery和EditorMD兩個資料夾，剛才下載的檔案就放在這個資料夾下面。

這裡注意一點，由於Editor已經停止維護了，所以他的emoji檔案已經載入不了了，所以我們這裡需要先下載這個資料夾再配置路徑。
emoji下載地址
這裡寫圖片描述
這4個js檔案的emoji路徑都需要配置：

editormd.emoji     = {
        path  
 
: "plug-ins/EditorMD/plugins/emoji-dialog/emoji/",
        ext   : ".png"
    };

最後就是寫頁面了，我們採用官方github上面的例子

<!doctype html>
<html>

    <head>
        <meta charset="utf-8">
        <title>EditorMD</title>
        <link rel="stylesheet" type="text/css" href="plug-ins/EditorMD/lib/codemirror/codemirror.min.css"
 
 />
        <script type="text/javascript" src="plug-ins/JQuery/jquery-3.3.1.min.js"></script>
        <script type="text/javascript" src="plug-ins/EditorMD/editormd.min.js"></script>
        <link rel="stylesheet" type="text/css" href="plug-ins/EditorMD/css/editormd.css" />
    </head
 
>

    <body>

        <div id="editormd">
            <textarea style="display:none;">### Hello Editor.md !</textarea>
        </div>
        <script type="text/javascript">
            $(function() {
                var editor = editormd("editormd", {
                    path: 'plug-ins/EditorMD/lib/'
                });

                /*
                // or
                var editor = editormd({
                    id   : "editormd",
                    path : "../lib/"
                });
                */
            });
        </script>
        </script>
    </body>

</html>

OK,現在就可以在頁面中使用Markdown了，我覺得這個這個編輯器比CSDN的Markdown編輯器功能要多一點

這裡寫圖片描述

相關推薦

讓你自己的網頁支援Markdown編輯器

Editor是一款免費的，開源的輕量級Markdown編輯器，附上下載地址 下載下來的資料夾大概是這樣的結構： 為了防止專案結構混亂，我做了這樣的目錄結構 這裡的new_file.html是我的頁面，它和plug-ins資料夾同級，plug-ins

從零開發部落格-讓Flask-admin支援markdown編輯器(一)

前言 flask-admin 算是一個很不錯的 flask 後臺管理了,用它來做部落格系統的管理後端再合適不過了,節約時間成本,避免重複造輪子,但是作為一個程式設計師,寫文章怎麼可以沒有 markdown 呢? 現在讓我們嘗試一下讓 flask-admin 支援 markdown 吧. 實踐 Flask

showdown讓你的網站支援Markdown和程式碼塊highlight

在CSDN寫部落格應該都用過Markdown吧，一種簡單的標記語言。而有人拿他跟所見即所得編輯器比較，怎麼感覺也對不上。那麼在各大論壇、內容網站都支援Markdown的情況下，我們該怎麼實現呢？搜尋了半天也很少見到相關的資料，在此記錄下自己的研究供大家學習。 所需檔案： - mar

10款流行的Markdown編輯器，總有一款適合你

摘要：作為一個開源人，如果你不會使用Markdown語法，那你就OUT了！Markdown 是 2004 年由 John Gruberis 設計和開發的純文字格式的語法，非常的簡單實用。 作為一個開源人，如果你不會使用Markdown語法，那你就OUT了！Markdown 是 2004 年由 John Gr

手把手教你使用markdown編輯器（超詳細）

如何使用markdown編輯器來寫部落格 之前使用markdown格式編寫文件，但是都是一些零零散散的格式，今天有點空閒時間來總結一下markdown的格式，便於自己以後書寫marikdown文件。 目錄 用[TOC]來生成目錄： code如下：

Angular整合Editor.md的Markdown編輯器，支援NgModel雙向繫結

說明 最近用angular做後端，需要用到markdown編輯器，網上找了許多，有html的，但是搗鼓了半天發現無法使用NgModel繫結；也有angular寫的模組，但是整合到專案後發現不是很漂亮。 後來無意間在部落格園中看到了一位網友推薦的markdow

這些Markdown編輯器，使你寫作更加便捷

MarkdownPad 官網 - Windows Cmd Markdown 官網 - Windows - Linux - Web Dillinger 官網 - W

網頁中加入markdown編輯器

在瀏覽器整合 Mditor？ [說明]使用mditor外掛可以把markdown文字轉化成html 第一步: 引入 Mditor 樣式檔案 <link rel="stylesheet" href="your-path/dist/css/mditor

這可能就是你苦苦尋找免費、高顏值、功能強大的 Markdown 編輯器（共5款）

本文作者 | HelloGitHub-小豬蹄 Markdown 是一個輕量級的標記語言，語法簡單、容易上手，它深受程式設計師、部落格主等人群的鐘愛。隨著越來越多的部落格系統支援 Markdown，它也開始越來越流行。那麼一個趁手的 Markdown 編輯器能夠讓你醉心於創作、專注於文字、行文如流水般絲滑。

Typora[MarkDown編輯器]+(PicGo+Github+JsDelivr）[個人圖床] ，開啟你的高效創作

## 使用Typora搭配Picgo開啟你的高效創作 ### 0x00 一切都要從MarkDown說起 #### 富文字語言的弊端 平常我們最常用的寫作工具，無非是富文字編輯器中的代表——微軟家的Office Word。這種編輯器簡單、直觀，操作方便，很受辦公人員的喜歡。但是如果我們是做公眾號的，是要在

markdown編輯器typora本地圖片上傳到自己的伺服器

typora是windows平臺下最受歡迎的markdown書寫工具和檢視工具，本篇文章將會介紹如何在typora平臺使用java指令碼程式自動上傳本地圖片到自己的伺服器，從而讓markdown文章中的圖片“一次書寫，處處可見”，免去總是需要轉換圖片的麻煩。 ## 一、從何處下手 ### 1.typora

歡迎使用CSDN-markdown編輯器

數學計算 大量數據 com track -a ado ext fad layer Flash多線程機制Worker 之前的Flash版本號中，是不支持多線程的，這也是廣大開發人員苦惱的一個地方。在眾多開發人員的要求或需求之下，Adobe在他的Flash

Ubuntu 16.04下Markdown編輯器Haroopad

share .html eas 執行 6.0 png 嘗試 urg roo 1、下載deb包 地址：https://bitbucket.org/rhiokim/haroopad-download/downloads/haroopad-v0.13.2-x64.deb 這裏

能夠讓你閉目養神的電子書自動閱讀器

PDF閱讀器安卓版能夠讓你閉目養神的電子書自動閱讀器

<<讓你自己的APP成為系統應用>>所遇到的問題及解決方法

app local .so led lib64 不能 問題 1.7 error 1、adb connect 10.100.1.772、adb -s 10.100.1.77 shell remount3、讓你自己的APP成為系統應用 adb push xxx.apk sys

使用Markdown編輯器寫博客

ali enc 部分 mat n) ade 服務 序列圖 $$ 歡迎使用Markdown編輯器寫博客 本Markdown編輯器使用StackEdit修改而來，用它寫博客，將會帶來全新的體驗哦： Markdown和擴展Markdown簡潔的語法 代碼塊高亮 圖片鏈接和圖片上

django 使用markdown編輯器

django markdowneditor 1.編輯 下載地址https://github.com/pandao/editor.md <link rel="stylesheet" href="{% static ‘plugin/editor.md/css/editormd.css‘ %}"

從零開始造一個Markdown編輯器（一）

實時 需要 自己實現 自己 背景 學習正則表達式 tex ID img 背景 最近學習正則表達式，於是要挑一個練手項目，恰好對markdown編輯器十分感興趣，於是就進行了一些常識。做了一個簡單的markdown解析器和編輯器。 網頁端的地址(不支持文件的操作)： http

51CTO博客2.0-Markdown編輯器：脈絡清晰的排版速成班

TP 代碼 鼠標 鏈接 阿拉伯 一行 water RM 2.0 基礎： 1.【語法】請參看《51CTO博客2.0-Markdown編輯器使用技巧》2.【內容】 文章總標題&作者個人姓名介紹，不要放在正文3.【空行】使用markdown語法的段落，上下段之間空一行，避

博客開篇——應用Markdown編輯器呈現樣式和內容

$$ 練習 你在 9.png sub 截圖 博客 .cn 英文 剛剛開通博客，一直了解Markdown便捷的編寫能力，正好博客園支持Markdown編輯器，寫此篇練習Markdown的各種[標記]語法。本文內容有參考文章 博客園Markdown編輯器指南 Markdow