一.EditorMD编辑器的使用
1.1editor编辑器介绍
- 支持“标准”Markdown / CommonMark和Github风格的语法,也可变身为代码编辑器;
- 支持实时预览、图片(跨域)上传、预格式文本/代码/表格插入、代码折叠、搜索替换、只读模式、自定义样式主题和多语言语法高亮等功能;
- 支持ToC(Table of Contents)、Emoji表情、Task lists、@链接等Markdown扩展语法;
- 支持TeX科学公式(基于KaTeX)、流程图 Flowchart 和 时序图 Sequence Diagram;
- 支持识别和解析HTML标签,并且支持自定义过滤标签解析,具有可靠的安全性和几乎无限的扩展性;
- 支持 AMD / CMD 模块化加载(支持 Require.js & Sea.js),并且支持自定义扩展插件;
- 兼容主流的浏览器(IE8+)和Zepto.js,且支持iPad等平板设备;
1.2.下载editor编辑器
官网:https://pandao.github.io/editor.md/index.html
1.3.下载完成后
这是目录信息,找到examples目录,里面有个simple.html文件,只需要改动这个文件就可以使用
1.4.更改配置
这是笔者下载后修改过后的配置
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="utf-8"/>
<title>Simple example - Editor.md examples</title>
<link rel="stylesheet" href="css/style.css"/>
<link rel="stylesheet" href="../css/editormd.css"/>
<link rel="shortcut icon" href="https://pandao.github.io/editor.md/favicon.ico" type="image/x-icon"/>
</head>
<body>
<div id="layout">
<header>
<h1>Simple example</h1>
</header>
<div id="test-editormd">
<textarea style="display:none;"></textarea>
<textarea class="editor-md-html" name="editor-md-html"></textarea>
</div>
</div>
<script src="js/jquery.min.js"></script>
<script src="../editormd.min.js"></script>
<script type="text/javascript">
var testEditor;
$(function () {
testEditor = editormd("test-editormd", {
width: "70%",//编辑器大小官方默认90%
height: 640,
syncScrolling: "single",
path: "../lib/",//这个编辑器文件的lib路径
saveHTMLToTextarea : true,//注意3:这个配置,textarea可以提交
emoji: true,//emoji表情,默认关闭
/**上传图片相关配置如下*/
imageUpload : true,
imageFormats : ["jpg", "jpeg", "gif", "png", "bmp", "webp"],
imageUploadURL : "/editorMDUpload",//注意你后端的上传图片服务地址
//editorTheme: "pastel-on-dark",//编辑器的主题颜色
theme: "gray",//顶部的主题
previewTheme: "dark"//显示的主题
//editor.md期望得到一个json格式的上传后的返回值,格式是这样的:
/*
{
success : 0 | 1, // 0 表示上传失败,1 表示上传成功
message : "提示的信息,上传成功或上传失败及错误信息等。",
url : "图片地址" // 上传成功时才返回
}
*/
});
/*
// or
testEditor = editormd({
id : "test-editormd",
width : "90%",
height : 640,
path : "../lib/"
});
*/
});
</script>
</body>
</html>
1.5.图片上传
这是图片上传的前端配置,如上代码中的一样
imageUpload : true,
imageFormats : ["jpg", "jpeg", "gif", "png", "bmp", "webp"],
imageUploadURL : "/editorMDUpload",//注意你后端的上传图片服务地址
1.6.SpringMVC文件上传
为了试下动态上传,笔者后台使用的是java SpringMVC框架,以下是修改后的jsp代码
<%--
Created by IntelliJ IDEA.
User: hly
Date: 2018/8/15
Time: 16:17
github :github.com/SiriusHly
blog :blog.csdn.net/Sirius_hly
To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<% String path = request.getContextPath();%>
<html lang="zh">
<head>
<meta charset="utf-8"/>
<title>Simple example - Editor.md examples</title>
<link rel="stylesheet" href="<%=path%>/static/html/editor/editor.md-master/examples/css/style.css"/>
<link rel="stylesheet" href="<%=path%>/static/html/editor/editor.md-master/css/editormd.css"/>
<link rel="shortcut icon" href="https://pandao.github.io/editor.md/favicon.ico" type="image/x-icon"/>
</head>
<body>
<div id="layout">
<header>
<h1>Simple example</h1>
</header>
<div id="test-editormd">
<textarea style="display:none;"></textarea>
<textarea class="editor-md-html" name="editor-md-html"></textarea>
</div>
</div>
<script src="<%=path%>/static/ht