快速入門 Editor.MD---在Web專案裡使用 Markdown 編輯器

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

什麼是Markdown

Markdown是一種可以使用普通文字編輯器編寫的標記語言，通過簡單的標記語法，它可以使普通文字內容具有一定的格式。

最直觀的方法，CSDN寫新文章用Markdown編輯器，自己琢磨下便知

什麼是Editor.MD

Editor.md 是一個可嵌入的開源 Markdown 線上編輯器元件，你可以很方便用在瀏覽器、NW.js（Node-webkit）等地方，基於CodeMirror、jQuery 和 Marked 構建。

Editor.MD官方顯示 CSDN 也在用該元件

環境準備

下載完成你就得到了這麼個玩意↓

這裡寫圖片描述

examples資料夾下有很多示例，可以開啟參考學習，或者直接去官方網站示例。

但是要想 EditorMD 在自己的 Web 專案裡跑起來，我們只需要把 editor.md-master 檔案目錄下的這些檔案放在自己的 Web 專案資原始檔夾，存放位置決定了你使用時填寫的路徑。
這裡寫圖片描述

注意：

EditorMD開啟 emoji 後 github 的出於某種原因是無法使用的，我們需要手動修改圖片下載路徑

首先先得把 emoji 表情下載到本地
emoji 下載地址

然後把它放在這裡寫圖片描述

接下來得修改 js 檔案裡的路徑（路徑值取決於你存放圖片的位置）
這裡寫圖片描述

這四個檔案裡的emoji路徑都得修改一個都不能少
這裡寫圖片描述

小例子

對應上圖的aa.html

<!doctype html> 

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

<body>
<div id="layout">
  <header>
    <h1>動態建立 Editor.md</h1>
    <p>Dynamic create Editor.md</p>
    <br>
    <div class="btns" style="margin:0;">
      <button id="create-btn">動態建立一個 Editor.md</button>
      <button id="remove-btn">移除 Editor.md</button>
    </div>
  </header>
</div>
 <script type="text/javascript">
    var testEditormd;

    $(function () {
        $("#create-btn").click(function () {

            $("#layout").append("<div id=\"test-editormd\"></div>");

            testEditormd = editormd("test-editormd", {
                    width: "90%",
                    height: 640,
                    emoji: true,
                    markdown: "### 動態建立 Editor.md\r\n\r\nDynamic create Editor.md",
                    path: 'plug-ins/EditorMD/lib/'

                });

        });

        $("#remove-btn").click(function () {
            testEditormd.editor.remove();
        });
    });
</script>
</body>
</html>

這裡寫圖片描述

關於 EditorMD 物件可用函式、可配置引數
如果能看懂 editormd.js 檔案的話，基本就知道了
簡單的著手方式：可在官方頁面自行進入使用示例裡找

快速入門 Editor.MD---在Web專案裡使用 Markdown 編輯器

什麼是Markdown Markdown是一種可以使用普通文字編輯器編寫的標記語言，通過簡單的標記語法，它可以使普通文字內容具有一定的格式。最直觀的方法，CSDN寫新文章用Markdown編輯器，自己琢磨下便知什麼是Editor

vue專案使用markdown編輯器

1.安裝mavon-editor $ npm install mavon-editor --save 2. 需要使用Markdown編輯器的頁面js中： import { mavonEditor } from 'mavon-editor' import 'mavon-editor

javaweb專案整合editor.md編輯器---markdown編輯器

最近寫一個部落格系統，需要整合編輯器，所以我就打算整合一個markdown編輯器用來編輯文章。在網上搜，好像editor.md這個國產開源的markdown編輯器比較好。不過想吐槽是網上的教程真的。。。哈哈哈，開始我們的教程： 1.首先在editor.md官網

Markdown 編輯器Editor.md------修改已經編輯的內容

前言最近寫一個部落格系統，需要整合一個markdown編輯器用來編輯文章。我選擇的是editor.md這個國產開源的markdown編輯器，editor.md好用是很好用，但是網上卻並沒有專門的教程，真是讓人痛苦不堪。問題在首次編輯時，是使用markdown

【常用 JS 外掛】Editor.md 實現 Markdown 編輯器

Editor.md 是一個Markdown 編輯器，單純基於前端 JavaScript，無需後臺程式碼加持，適用於任何語言。下載地址頁面引用 CSS 部分 <link rel="stylesheet" href="/static/admin

Wiz Editor md 為知筆記 Markdown 外掛

Wiz.Editor.md Wiz.Editor.md 是一個基於 Editor.md 構建的為知筆記 Markdown 外掛。主要特性多種樣式主題支援實時預覽支援程式碼高亮支援搜尋替換支援ToC目錄 Tex數學公式

Markdown編輯器editor.md的使用

一、Markdown和editor.md簡介： Markdown在技術圈裡（估計更多是程式猿吧）越來越流行。簡單的語法，統一的格式，使用過程中，手基本上不用從鍵盤上移到滑鼠上去，超級方便。寫好了一篇md文件(也就是含Markdown語法格式的普通TXT檔案

如何快速使用idea部署web專案

1.首先建立一個工作目錄 2.在idea中開啟這個工作目錄 3.在工作目錄中建立一個module,並勾選web應用，並且命名myWeb, 然後單擊完成。 4.此時專案目錄為： 5.點選file--->project Settings 設定專案 6.相關設

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

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

Markdown編輯器之Editor.md v1.5.0應用

在開始寫CSDN部落格前一直使用的是類似xhEditor、百度的ueditor編輯器，新版本的有道雲筆記也實現了markdown編輯器，的確用過markdown後感覺很喜歡，再用之前的編輯器很彆扭，然後專案中用到編輯器的時候我就想使用markdown來實現，而非

JavaWEB之Markdown 編輯器Editor.md整合使用教程

第一步：下載外掛第二步：解壓外掛，並將需要的包拷進專案。如圖：第三步：配置  <link href="<%=path%>/app/editorm

在Django中使用editor.md部屬markdown編輯器的一些分享

我平時很喜歡markdown來寫東西，最近在用django做一個自己的部落格系統，這時我就想到了怎麼在django中部屬markdown編輯器，在網上找了一下發現了一個很好用的js外掛叫 editor.md 1、下載下載下來後目錄結構是這樣的 2、部屬然

【轉】使用CSDN-markdown編輯器入門

歡迎使用Markdown編輯器寫部落格本Markdown編輯器使用StackEdit修改而來，用它寫部落格，將會帶來全新的體驗哦： Markdown和擴充套件Markdown簡潔的語法程式碼塊高亮圖片連結和圖片上傳 LaTex數學公式 UML序列

Spring基礎：快速入門spring cloud）：API閘道器之Zuul

Spring Cloud是Spring總多的Project中的一個,它提供了一整套的工具幫助系統架構師們在進行分散式設計的時候可以拿來即用, 在建立和釋出微服務時極為便捷和有效。本系列文章將會使用最簡單的例子和最為容易的方式來學習Spring Cloud。本文將會介紹如何引入Zuul在

PHP專案中使用 Markdown編輯器

個人站點 :http://oldchen.iwulai.com/ Markdown在技術圈越來越受歡迎，今天為大家帶來一款國內開源的比較好用的Markdown編輯器——editor.md。在這

java Web專案中的定時器實現

在Java的6.0版本中新增了concurrent包，這個包是用作執行緒同步的包，提供了很多工具類。其中定時器就是其中之一。近期在做一個專案，在專案中要實現啟動Web服務的同時啟動一個任務，要求此任務為守護程序，定時呼叫一些任務操作程式碼。在網上搜索相關的實現，綜合考慮得

在web專案中新增定時器

在JAVA專案中常常需要程式定時自動執行一些操作，比如快取中資料的更新等等，那麼這個時候就需要用到定時器去定時執行任務。廢話不說了，直接上專案吧。首先建立一個監聽器，在監聽器中加入Util包中的定時任務 package Listener; import java.uti

Markdown編輯器使用說明.md

歡迎使用Markdown編輯器寫部落格本Markdown編輯器使用StackEdit修改而來，用它寫部落格，將會帶來全新的體驗哦： Markdown和擴充套件Markdown簡潔的語法程式碼塊高亮圖片連結和圖片上傳 LaTex數學公式 UML序列圖和

spring cloud快速入門教程（四）路由閘道器Zuul

現在服務也統一註冊管理了，配置也統一管理了，我們就可以瘋狂的開發各項微服務了，是不是還覺得少了點什麼？前端怎麼訪問到相應服務？這就用到路由網關了。路由閘道器就是整個微服務的統一入口，看看第一張的架構圖，專案的前端做成了動靜分離，靜態檔案、html頁面、css檔案和js檔案

Markdown編輯器安裝及入門

remarkable 編輯器下載安裝包因為官網已經掛了，所以在網上找裡好幾才找到一個可以下載deb的連結： -http://remarkableapp.github.io/linux/download.html 下載完成後，將下載的deb包，最好移動

快速入門 Editor.MD---在Web專案裡使用 Markdown 編輯器

什麼是Markdown

什麼是Editor.MD

環境準備

注意：

小例子

相關推薦