整合營(yíng)銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
們經(jīng)常可以看到各個(gè)博客網(wǎng)站中用于編輯文章的富文本編輯器，在富文本編輯器中，我們可以對(duì)我們的編輯內(nèi)容樣式進(jìn)行設(shè)置。富文本編輯器一般是通過插件來實(shí)現(xiàn)的，我們只需要在頁面中配置一下插件提供的一些API即可。
本例中使用Editormd來演示如何配置使用富文本編輯器。
Editormd簡(jiǎn)介
Editormd是國(guó)內(nèi)開源的一款在線Markdown編輯器，可嵌入的 Markdown 在線編輯器（組件），基于 CodeMirror、jQuery 和 Marked 構(gòu)建。
支持“標(biāo)準(zhǔn)”Markdown / CommonMark和Github風(fēng)格的語法，也可變身為代碼編輯器。
官網(wǎng)地址：https://pandao.github.io/editor.md/
創(chuàng)建文章表
在使用富文本編輯器之前，先來創(chuàng)建一個(gè)文章表article，這里只添加了最基本的幾個(gè)字段， 以后想要擴(kuò)展的話還可以添加標(biāo)簽、時(shí)間、瀏覽量、點(diǎn)贊、評(píng)論等字段。建表SQL如下：
CREATE TABLE article(
id int(10) NOT NULL AUTO_INCREMENT COMMENT '文章唯一id',
author varchar(50) NOT NULL COMMENT '作者',
title varchar(100) NOT NULL COMMENT '標(biāo)題',
content longtext NOT NULL COMMENT '文章內(nèi)容'
PRIMARY KEY (id)
)ENGINE=InnoDB AUTO_INCREMENT=2 DEFAULT CHARSET=utf8建完表，我們就可以開始編寫代碼來使用富文本編輯器了。
配置使用
1、創(chuàng)建一個(gè)SpringBoot項(xiàng)目，配置數(shù)據(jù)庫連接，我們這里連接的是MyBatis（注意MySQL8需要在url中配置時(shí)區(qū)）。
spring:
datasource:
username: root
password: 123456
#?serverTimezone=UTC解決時(shí)區(qū)的報(bào)錯(cuò)
url: jdbc:mysql://localhost:3306/springboot?serverTimezone=UTC&useUnicode=true&characterEncoding=utf-8
driver-class-name: com.mysql.cj.jdbc.Driver
thymeleaf:
cache: false
?
mybatis:
mapper-locations: classpath:com/wunian/mapper/*.xml
type-aliases-package: com.wunian.pojo2、導(dǎo)入Editormd靜態(tài)資源，靜態(tài)資源的目錄結(jié)構(gòu)如下圖所示。
3、編寫文章編輯頁面editor.html，引入Editormd的CSS和js文本，添加Editormd配置。
<!DOCTYPE html>
<html class="x-admin-sm" lang="zh" xmlns:th="http://www.thymeleaf.org">
?
<head>
<meta charset="UTF-8">
<title>及時(shí)雨的Blog</title>
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi" />
<!--Editor.md-->
<link rel="stylesheet" th:href="@{/editormd/css/editormd.css}"/>
<link rel="shortcut icon" href="https://pandao.github.io/editor.md/favicon.ico" type="image/x-icon" />
</head>
<!--寫博客頁面-->
<body>
?
<div class="layui-fluid">
<div class="layui-row layui-col-space15">
<div class="layui-col-md12">
<!--博客表單-->
<form name="mdEditorForm">
?
<div>
標(biāo)題： <input type="text" name="title">
</div>
?
<div>
作者： <input type="text" name="author">
</div>
?
<!-- 文章的主體內(nèi)容 textarea -->
<div id="article-content">
<textarea name="content" id="content" style="display:none;"> </textarea>
</div>
?
</form>
?
</div>
</div>
</div>
</body>
?
<!--editormd-->
<script th:src="@{/editormd/jquery.min.js}"></script>
<script th:src="@{/editormd/editormd.js}"></script>
?
<script type="text/javascript">
var testEditor;
$(function() {
//這是一個(gè)最簡(jiǎn)單的Editormd配置，往后我們要修改Editormd的
//功能或者樣式，就改這里的配置就可以了
testEditor = editormd("article-content", {
width : "90%",
height : 640,
syncScrolling : "single",
path : "../editormd/lib/"
});
</script>
</html>4、上面配置的只是最簡(jiǎn)單的富文本編輯器功能，我們可以添加更多的配置來增加功能。
<script type="text/javascript">
var testEditor;
?
//window.onload = function(){ }
$(function() {
testEditor = editormd("article-content", {
width : "95%",
height : 500,
syncScrolling : "single",
path : "../editormd/lib/",
// 自定義的增強(qiáng)配置！
saveHTMLToTextarea : true, // 保存 HTML 到 Textarea
emoji: true, // 開啟表情的功能！ 圖片的本地配置！
// theme: "light",//工具欄主題
// previewTheme: "dark",//預(yù)覽主題
// editorTheme: "pastel-on-dark",//編輯主題
// markdown的配置！
tex : true, // 開啟科學(xué)公式TeX語言支持，默認(rèn)關(guān)閉
flowChart : true, // 開啟流程圖支持，默認(rèn)關(guān)閉
sequenceDiagram : true, // 開啟時(shí)序/序列圖支持，默認(rèn)關(guān)閉,
//圖片上傳
imageUpload : true,
imageFormats : ["jpg", "jpeg", "gif", "png", "bmp", "webp"],
imageUploadURL : "/article/file/upload", // 文件上傳的處理請(qǐng)求！
onload : function() {
console.log('onload', this);
},
/*指定需要顯示的功能按鈕*/
toolbarIcons : function() {
return ["undo","redo","|",
"bold","del","italic","quote","ucwords","uppercase","lowercase","|",
// "h1","h2","h3","h4","h5","h6","|",
"list-ul","list-ol","hr","|",
"link","reference-link","image","code","preformatted-text",
"code-block","table","datetime","emoji","html-entities","pagebreak","|",
"goto-line","watch","preview","fullscreen","clear","search","|",
//"help","info",
"releaseIcon", "index"]
},
// 這里的自定義功能就好比，Vue 組件
?
/*自定義功能按鈕，下面我自定義了2個(gè)，一個(gè)是發(fā)布，一個(gè)是返回首頁*/
toolbarIconTexts : {
releaseIcon : "<span bgcolor=\"gray\">發(fā)布</span>",
index : "<span bgcolor=\"red\">返回首頁</span>",
},
?
/*給自定義按鈕指定回調(diào)函數(shù)*/
toolbarHandlers:{
releaseIcon : function(cm, icon, cursor, selection) {
//表單提交
mdEditorForm.method = "post";
mdEditorForm.action = "/article/addArticle";//提交至服務(wù)器的路徑
mdEditorForm.submit();
},
index : function(){
window.location.href = '/';
},
}
});
});
</script>5、由于表情包的加載地址在國(guó)外，因此有時(shí)候可能加載不出來，我們可以把表情包下載到本地，放到/static/editormd/plugins/emoji-dialog/emoji目錄下，并修改editormd.js中的表情加載路徑為我們的表情包存放的目錄路徑。
editormd.emoji = {
path : "../editormd/plugins/emoji-dialog/emoji/",
ext : ".png"
};6、上傳圖片功能需要進(jìn)行配置，我們可以在當(dāng)前項(xiàng)目目錄下建立upload文件夾來上傳文件（注意這里應(yīng)該手動(dòng)建立目錄，不要使用代碼創(chuàng)建），然后配置一下虛擬路徑（需要自定義WebMVC配置類）。
@Configuration
public class MyMvcConfig implements WebMvcConfigurer {
?
?
// 文件保存在真實(shí)目錄/upload/下，
// 訪問的時(shí)候使用虛路徑/upload，比如文件名為1.png，就直接/upload/1.png就ok了。
@Override
public void addResourceHandlers(ResourceHandlerRegistry registry) {
registry.addResourceHandler("/upload/**")
.addResourceLocations("file:"+System.getProperty("user.dir")+"/upload/");
}
}7、在Controller中編寫文件上傳的請(qǐng)求方法。
// MarkDown博客圖片上傳問題
@RequestMapping("/file/upload")
@ResponseBody
public JSONObject fileUpload(@RequestParam(value = "editormd-image-file", required = true) MultipartFile file, HttpServletRequest request) throws IOException {
//上傳路徑保存設(shè)置
?
//獲得SpringBoot當(dāng)前項(xiàng)目的路徑：System.getProperty("user.dir")
String path = System.getProperty("user.dir")+"/upload/";
?
//按照月份進(jìn)行分類：
Calendar instance = Calendar.getInstance();
String month = (instance.get(Calendar.MONTH) + 1)+"月";
path = path+month;
?
File realPath = new File(path);
if (!realPath.exists()){
realPath.mkdirs();
}
?
//上傳文件地址
System.out.println("上傳文件保存地址："+realPath);
?
//解決文件名字問題：我們使用uuid;
String filename = "ks-"+UUID.randomUUID().toString().replaceAll("-", "")+".jpg";
//通過CommonsMultipartFile的方法直接寫文件（注意這個(gè)時(shí)候）
file.transferTo(new File(realPath +"/"+ filename));
?
//給editormd進(jìn)行回調(diào)
JSONObject res = new JSONObject();
res.put("url","/upload/"+month+"/"+ filename);
res.put("success", 1);
res.put("message", "upload success!");
?
return res;
}8、編寫文章顯示頁面article.html，同樣需要配置Editormd來正常顯示一些MarkDown文本。
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title th:text="${article.title}"></title>
</head>
<!--讀博客的頁面-->
?
<body>
<div>
<!--文章頭部信息：標(biāo)題，作者，最后更新日期，導(dǎo)航-->
<h2 style="margin: auto 0" th:text="${article.title}"></h2>
作者：<span style="float: left" th:text="${article.author}"></span>
<!--文章主體內(nèi)容-->
<div id="doc-content">
<textarea style="display:none;" placeholder="markdown" th:text="${article.content}"></textarea>
</div>
?
</div>
?
<!--固定editormd依賴！ -->
<link rel="stylesheet" th:href="@{/editormd/css/editormd.preview.css}"/>
<script th:src="@{/editormd/jquery.min.js}"></script>
<script th:src="@{/editormd/lib/marked.min.js}"></script>
<script th:src="@{/editormd/lib/prettify.min.js}"></script>
<script th:src="@{/editormd/lib/raphael.min.js}"></script>
<script th:src="@{/editormd/lib/underscore.min.js}"></script>
<script th:src="@{/editormd/lib/sequence-diagram.min.js}"></script>
<script th:src="@{/editormd/lib/flowchart.min.js}"></script>
<script th:src="@{/editormd/lib/jquery.flowchart.min.js}"></script>
<script th:src="@{/editormd/editormd.js}"></script>
?
<script type="text/javascript">
var testEditor;
$(function () {
// 綁定我們要渲染頁面的 div
testEditor = editormd.markdownToHTML("doc-content", {//注意：這里是上面DIV的id
htmlDecode: "style,script,iframe",
emoji: true,
taskList: true,
tocm: true,
tex: true, // 默認(rèn)不解析
flowChart: true, // 默認(rèn)不解析
sequenceDiagram: true, // 默認(rèn)不解析
codeFold: true
});
});
</script>
</body>
</html>9、最后別忘了編寫保存文章和顯示文章的Controller請(qǐng)求方法。
博客文章寫作過程中，一直再尋找一個(gè)合適的編輯器。先后嘗試了wangEditor、layui-Editor在用戶頁面得到應(yīng)用。但文章的整潔程度難以和markdown媲美。mdendtor是個(gè)不錯(cuò)的選擇，在安裝完Django-enditor之后，最大的難題就是前端顯示了。最初引入python庫markdown，轉(zhuǎn)化效果不是很理想。緊接著找到前端js對(duì)應(yīng)的showdown.js庫，顯示效果依舊不好。于是，想到后臺(tái)的預(yù)覽窗口是怎么顯示，直接把mdeditor的js抄到前端就行了。
安裝django-mdeditor
pip install django-mdeditor
添加app到sittings
INSTALLED_APPS = [ 'django.contrib.admin', 'django.contrib.auth', ...... 'django.contrib.sitemaps', 'mdeditor', # mdeditor編輯器 ]
修改model
from mdeditor import fields as md_models class Article(models.Model): id = models.AutoField(primary_key=True, max_length=32) ...... content = md_models.MDTextField(verbose_name='正文', blank=False) ......
此時(shí)，刷新后端就顯示正常了
找到需要的js和css
在site-packages目錄下找到如下js和css
mdeditor\static\mdeditor\js\lib\marked.min.js mdeditor\static\mdeditor\js\editormd.js mdeditor\static\mdeditor\css\editormd.preview.css
找到之后放到static目錄下并在相應(yīng)頁面引入
前端適配
css和js處理
<!--引入樣式文件-->
<link rel="stylesheet" href="/static/editor.md-master/css/editormd.preview.css"/>
<!--引入js文件-->
<script src="/static/editor.md-master/lib/marked.min.js"></script>
<script src="/static/editor.md-master/editormd.js"></script>
<!--處理邏輯-->
<script>
editormd.markdownToHTML("article_content", { //article_content是html文檔的ID
emoji: true,
taskList: true,
});
</script>
html的處理
需要注意的是：style里面所有的內(nèi)容不能少，否則造成樣式會(huì)扭曲。textarea標(biāo)簽不能缺少，不然會(huì)造成代碼的不識(shí)別。
<div id="article_content"
style="-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;">
<textarea style="display:none">{{ article.content | safe}}</textarea>
</div>
后續(xù)注意
這樣還不夠，原作者這個(gè)markdownToHTML的方法并未考慮兼容原有純HTML的文章。這樣會(huì)造成我們非MD格式的文章樣式上出現(xiàn)扭曲。此時(shí)可以打開editormd.js這個(gè)文件，搜索editormd.markdownToHTML方法。
在 var markdownDoc = (settings.markdown === "") ? saveTo.val() : settings.markdown;代碼的下一行添加
if(markdownDoc.startsWith('<') || markdownDoc.endsWith('>')){
$("#" + id).html(markdownDoc)
return
}
這樣解決下來并不是很完美，最好判斷下這個(gè)文章是不是一個(gè)XML文檔比較穩(wěn)妥，技術(shù)有限不能解決。留給你解決
譯自： https://opensource.com/article/18/8/markdown-html-publishing
作者： Peter Cheer
譯者： geekpi
用這個(gè)有用工具從 Markdown 文件創(chuàng)建一個(gè)基礎(chǔ)的網(wǎng)站。
有很多理由喜歡 Markdown，這是一門簡(jiǎn)單的語言，有易于學(xué)習(xí)的語法，它可以與任何文本編輯器一起使用。使用像 Pandoc 這樣的工具，你可以將 Markdown 文本轉(zhuǎn)換為 各種流行格式 ，包括 HTML。你還可以在 Web 服務(wù)器中自動(dòng)執(zhí)行轉(zhuǎn)換過程。由 TimoD?rr 創(chuàng)建的名為 MDwiki 的 HTML5 和 JavaScript 應(yīng)用可以將一堆 Markdown 文件在瀏覽器請(qǐng)求它們時(shí)轉(zhuǎn)換為網(wǎng)站。MDwiki 網(wǎng)站包含一個(gè)操作指南和其他信息可幫助你入門：
Mdwiki 網(wǎng)站的樣子。
在 Web 服務(wù)器內(nèi)部，基本的 MDwiki 站點(diǎn)如下所示：
該站點(diǎn)的 web 服務(wù)器文件夾的樣子
我將此項(xiàng)目的 MDwiki HTML 文件重命名為 START.HTML。還有一個(gè)處理導(dǎo)航的 Markdown 文件和一個(gè) JSON 文件來保存一些配置設(shè)置。其他的都是網(wǎng)站內(nèi)容。
雖然整個(gè)網(wǎng)站設(shè)計(jì)被 MDwiki 固定了，但內(nèi)容、樣式和頁面數(shù)量卻沒有。你可以在 MDwiki 站點(diǎn) 查看由 MDwiki 生成的一系列不同站點(diǎn)。公平地說，MDwiki 網(wǎng)站缺乏網(wǎng)頁設(shè)計(jì)師可以實(shí)現(xiàn)的視覺吸引力 —— 但它們是功能性的，用戶應(yīng)該平衡其簡(jiǎn)單的外觀與創(chuàng)建和編輯它們的速度和簡(jiǎn)易性。
Markdown 有不同的風(fēng)格，可以針對(duì)不同的特定目的擴(kuò)展穩(wěn)定的核心功能。MDwiki 使用 GitHub 風(fēng)格 Markdown ，它為流行的編程語言添加了格式化代碼塊和語法高亮等功能，使其非常適合生成程序文檔和教程。
MDwiki 還支持 “gimmick”，它增加了如嵌入 YouTube 視頻和顯示數(shù)學(xué)公式等額外功能。如果在某些項(xiàng)目中需要它們，這些值得探索。我發(fā)現(xiàn) MDwiki 是創(chuàng)建技術(shù)文檔和教育資源的理想工具。我還發(fā)現(xiàn)了一些可能不會(huì)立即顯現(xiàn)出來的技巧和 hack。
當(dāng)部署在 Web 服務(wù)器中時(shí)，MDwiki 可與任何現(xiàn)代 Web 瀏覽器一起使用。但是，如果你使用 Mozilla Firefox 訪問 MDwiki，那么就不需要 Web 服務(wù)器。大多數(shù) MDwiki 用戶會(huì)選擇在 Web 服務(wù)器上部署完整的項(xiàng)目，以避免排除潛在用戶，但只需使用文本編輯器和 Firefox 即可完成開發(fā)和測(cè)試。任何現(xiàn)代瀏覽器都可以讀取加載到 Moodle 虛擬學(xué)習(xí)環(huán)境（VLE）中的完整的 MDwiki 項(xiàng)目，這在教育環(huán)境中非常有用。 （對(duì)于其他 VLE 軟件，這可能也是如此，但你應(yīng)該測(cè)試它。）
MDwiki 的默認(rèn)配色方案并非適用于所有項(xiàng)目，但你可以將其替換為從 Bootswatch.com 下載的其他主題。為此，只需在編輯器中打開 MDwiki HTML 文件，找到 extlib/css/bootstrap-3.0.0.min.css，然后插入下載的 Bootswatch 主題。還有一個(gè) MDwiki gimmick，讓用戶在瀏覽器中載入 MDwiki 后，選擇 Bootswatch 主題來替換默認(rèn)值。我經(jīng)常與有視力障礙的用戶一起工作，他們傾向于喜歡高對(duì)比度的主題，在深色背景上使用白色文字。
MDwiki 頁面使用 Bootswatch Superhero 主題
MDwiki、Markdown 文件和靜態(tài)圖像可以用于許多目的。但是，你有時(shí)可能希望包含 JavaScript 幻燈片或反饋表單。Markdown 文件可以包含 HTML 代碼，但將 Markdown 與 HTML 混合會(huì)讓人感到困惑。一種解決方案是在單獨(dú)的 HTML 文件中創(chuàng)建所需的功能，并將其顯示在帶有 iframe 標(biāo)記的 Markdown 文件中。我從 Twine Cookbook 知道了這個(gè)想法，它是 Twine 交互式小說引擎的支持站點(diǎn)。Twine Cookbook 實(shí)際上并沒有使用 MDwiki，但結(jié)合 Markdown 和 iframe 標(biāo)簽開辟了廣泛的創(chuàng)作可能性。
這是一個(gè)例子：
此 HTML 將顯示由 Markdown 文件中的 Twine 交互式小說引擎創(chuàng)建的 HTML 頁面。
<iframe height="400" src="sugarcube_dungeonmoving_example.html" width="90%"></iframe>
MDwiki 生成的站點(diǎn)結(jié)果如下所示：
簡(jiǎn)而言之，MDwiki 是一個(gè)出色的小應(yīng)用，可以很好地實(shí)現(xiàn)其目的。
via: https://opensource.com/article/18/8/markdown-html-publishing
作者： Peter Cheer 選題： lujun9972 譯者： geekpi 校對(duì)： wxy
本文由 LCTT 原創(chuàng)編譯， Linux中國(guó) 榮譽(yù)推出
*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
