既然要集成,第一步就是找到来源,直接到官方网站下载依赖。
下载之后解压下载文件
要是用的依赖基本就是用红框标注出来的,将需要的依赖丢入自己项目中的resources目录下
找到文本输入框的html,开始引入依赖。
// 引入css样式文件
// 引入js等依赖
将文本输入框替换为Markdown编辑器
初始化Markdown编辑器的js
var testEditor;
$(function () {
testEditor = editormd("test-editormd", { // test-editormd为之前定义编辑器所在div的id
width: "98%",
height: 300,
syncScrolling: "single",
path: "/lib/", //你的path路径(原资源文件中lib包在我们项目中所放的位置)
saveHTMLToTextarea: true,
emoji: true,
taskList: true,
tex: true,
flowChart: true,
tocm: true,
sequenceDiagram: true,
/* 上传图片配置 */
imageUpload: false,
imageFormats: ["jpg", "jpeg", "gif", "png", "bmp", "webp"], // 上传图片支持格式
imageUploadURL: "../imageUpload" // 上传图片的路径
});
});
以上集成编辑器就完成了,接下来就是讲取出来的数据展示出来。
第一步依旧是引入所需依赖
页面显示的div
解析的js
editormd.markdownToHTML("test-editormd", {
htmlDecode : "style,script,iframe",
emoji : true,
taskList : true,
tex : true, // 默认不解析
flowChart : true, // 默认不解析
sequenceDiagram : true // 默认不解析
});
到此就完成了Markdown 编辑器Editor.md简单集成。