1-5 项目在线编辑器 Markdown
什么web编辑器?
--------------------------------------
kindeditor
ckeditor fckeditor
ueditor
markdown 编辑器 主要排版使用的markdown语法,markdown一种标签语言
Markdown在线编辑器 MdEditor （演示：https://www.mdeditor.com/)
http://editor.md.ipandao.com/
---------------------------------------
mdeditor 如何显示内容?
---------------------------------------
1) 将mdeditor 解压，复制
css
fonts
images
languages
lib
plugins
editormd.js
editormd.min.js
到项目的目录中.
2)在网页引入样式及脚本文件，必须引入jquery
<link rel="stylesheet" href="static/editormd/css/editormd.css">
<script src="static/editormd/lib/marked.min.js"></script>
<script src="static/editormd/lib/prettify.min.js"></script>
<script src="static/editormd/editormd.js"></script>
3)在网页编辑标签
<div id="content">
<textarea style="display: none"></textarea>
</div>
4)编写js代码，用来显示内容
<script>
testEditor = editormd.markdownToHTML("content", {
markdown:'# jdk13 :smile:\n## hello :fa-user: \n### hello :running:\n', //此处是要显示的markdown字符串
htmlDecode : "style,script,iframe", // you can filter tags decode
emoji : true,
taskList : true,
tex : true, // 默认不解析
flowChart : true, // 默认不解析
sequenceDiagram : true, // 默认不解析
});
</script>
如何使用markdown编辑器编写内容，并保存到数据库中？
--------------------------------------------------------------------------------
1）引入文件
<link rel="stylesheet" href="static/editormd/css/editormd.css">
<script src="static/editormd/editormd.js"></script>
2）编写网页标签
<div id="content">
<textarea style="display: none"></textarea>
</div>
3）编写脚本
<script>
let testEditor;
testEditor = editormd("contentaa", {
placeholder: '本编辑器支持Markdown编辑，左边编写，右边预览', //默认显示的文字，这里就不解释了
width: "100%",
height: 640,
syncScrolling: "single",
path: "static/editormd/lib/", //你的path路径（原资源文件中lib包在我们项目中所放的位置）
theme: "dark",//工具栏主题
previewTheme: "dark",//预览主题
editorTheme: "pastel-on-dark",//编辑主题
saveHTMLToTextarea: true,
emoji: true,
taskList: true,
tocm: true, // Using [TOCM]
tex: true, // 开启科学公式TeX语言支持，默认关闭
flowChart: true, // 开启流程图支持，默认关闭
sequenceDiagram: true, // 开启时序/序列图支持，默认关闭,
toolbarIcons: function () { //自定义工具栏，后面有详细介绍
return editormd.toolbarModes['mini']; // full, simple, mini
},
});
editormd("content", {
width: "100%",
height: 740,
path: 'static/editormd/lib/',
theme: "eclipse",
previewTheme: "eclipse",
editorTheme: "eclipse",
emoji: true,
taskList: true,
tocm: true, // Using [TOCM]
tex: true, // 开启科学公式TeX语言支持，默认关闭
flowChart: true, // 开启流程图支持，默认关闭
sequenceDiagram: true,
toolbarIcons:'full'
});
</script>
imageUpload:true,
imageFormats:["jpg", "jpeg", "gif", "png", "webp"],
imageUploadURL:"/upload.do"
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<title>Title</title>
<link rel="stylesheet" href="/static/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="/static/font-awesome/css/font-awesome.min.css">
<link rel="stylesheet" href="/static/editormd/css/editormd.css">
</head>
<body>
姓名: <input type="text" name="name">
<br>
<div id="content">
<textarea style="display: none"></textarea>
</div>
<br>
<input type="submit" value="提交">
<script src="/static/jquery/jquery-3.4.1.js"></script>
<script src="/static/editormd/editormd.js"></script>
<script>
editormd("content", {
width: "100%",
height: 740,
path: '/static/editormd/lib/',
theme: "eclipse",
previewTheme: "eclipse",
editorTheme: "eclipse",
emoji: true,
taskList: true,
tocm: true, // Using [TOCM]
tex: true, // 开启科学公式TeX语言支持，默认关闭
flowChart: true, // 开启流程图支持，默认关闭
sequenceDiagram: true,
toolbarIcons:'full',
imageUpload:true,
imageFormats:["jpg", "jpeg", "gif", "png", "webp"],
imageUploadURL:"/upload.do"
});
</script>
</body>
</html>