1. 程式人生 > >網頁中加入markdown編輯器

網頁中加入markdown編輯器

在瀏覽器整合 Mditor?

[說明]使用mditor外掛可以把markdown文字轉化成html

第一步:
引入 Mditor 樣式檔案

<link rel="stylesheet" href="your-path/dist/css/mditor.min.css" />

引用 Mditor 指令碼檔案

<script src="your-path/dist/js/mditor.min.js"></script>

當然,也可以使用 CDN 資源

<link rel="stylesheet" href="https://unpkg.com/[email protected]
/dist/css/mditor.min.css"
/>
<script src="https://unpkg.com/[email protected]/dist/js/mditor.min.js"></script>


第二步:
新增 textarea 元素

<textarea name="editor" id="editor"></textarea>

建立 Mditor 例項

var mditor =  Mditor.fromTextarea(document.getElementById('editor'));

在node中使用

1.安裝

npm i mditor -s

2.匯入

 const mditor=require('mditor')

3.在需要渲染的頁面中加入

var mditor =  Mditor.fromTextarea(document.getElementById('editor'));

從資料庫讀出時,可以使用marked方法把markdown文字轉化成html

 const html = marked(result[0].content)

相關推薦

網頁加入markdown編輯

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

PHP專案使用 Markdown編輯

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

django之admin使用markdown編輯,並實時預覽一

安裝django-markdownx Macos:直接pip install django-mrakdownx;Ubuntu需要先安裝pillow,參考此連結。 按照官方教程設定,不同的是本文markdownx的widget如下設定,在專案的temp

CSDN使用Markdown編輯的快捷鍵、生成目錄

目錄 用 [TOC]來生成目錄: 目錄 快捷鍵 快捷鍵 加粗 Ctrl + B 斜體 Ctrl + I 引用 Ctrl + Q 插入連結

django之admin使用markdown編輯,並實時預覽二

解決圖片上傳問題 解決url路徑出錯問題 設定了MARKDOWNX_MEDIA_PATH = 'media/markdownx/img'以後,圖片顯示仍然有問題。 markdown

有道雲筆記使用Markdown編輯編輯文字

    使用markdown編輯似乎成了程式設計師的主流編輯文字軟體.CSDN部落格有內建的markdown,有道雲筆記也完美的相容了markdown.現在就來講講鄙人一點使用的簡單方法. 工具:有道

CSDN如何使用Markdown編輯

簡介 最近CSDN支援Markdown語法寫部落格了,甚是歡喜。前幾天寫了一篇實驗了下,感覺不錯。準備寫幾篇文章介紹一下如何使用CSDN的Markdown編輯器寫部落格,不求全面,但求夠用,望大家批評指正。 本文會介紹以下幾點: 什麼是Markdown

Jupyter Notebook markdown編輯的字型顏色設定

換行: 方法1: 連續兩個以上空格+回車方法2:使用html語言換行標籤:<br> 首行縮排兩個字元:(每個表示一個空格,連續使用兩個即可) &ensp; 半形的空格&emsp; 全形的空格 字型、字號與顏色:   Jupyter Note

MarkDown編輯縮排

        首先,Markdown是不支援縮排的。      在Markdown裡按下四個空格,就自動轉入Code模式。   在Markdown裡一個回車,不是分段而是換行,要兩個回車,才是分段。   分段和換行的區別是:換行後,上一行和下一行在一個段落裡,其視覺表現為

如何在原生微信小程式實現資料雙向繫結歡迎使用CSDN-markdown編輯

在原生小程式開發中,資料流是單向的,無法雙向繫結,但是要實現雙向繫結的功能還是蠻簡單的! 下文要講的是小程式框架 minapp 中實現雙向繫結的原理,在 minapp 中,你只需要在 wxml 模板中給元件的屬性名後加上 .sync 就可以實現雙向繫

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

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

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

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

markdown編輯數學公式的基本命令

常見的Markdown編輯器中數學公式使用 相比於初入Markdown編輯器的小白來說,數學公式的使用是必須要掌握的一門技能。本內容大體的介紹結構如下: 插入公式 常用數學運算子 輸入希臘字母 輸入括號和分隔符 輸入向量 輸入累加、累乘運算 輸入省略號

歡迎使用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 這裏

vue使用Ueditor編輯

main path 實例化 server 圖片 打開 ttext name file   一、 下載包:     從Ueditor的官網下載1.4.3.3jsp版本的Ueditor編輯器,官網地址為:       http://ueditor.baidu.com/web

ShaderLab學習小結(八)在標準表面shader加入頂點著色函數

render ace rop 實現 diff car center fff coo 場景中新建cube,和一個plane,新建一個standard surface shader和用此shader的材質賦給cube。在不改變這個標準表面shader原有元素的基礎上加入頂點程序

使用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