集成过程请参考内容
数据的回显:
可以把数据保存在.md文件中,也可以保存在数据库中用大字段类型保存。
例如:
Mysql可以存text类型;
Oracle可以存ClobL类型;
var testEditor ;
$(function() {
testEditor = editormd("test-editormd", {
width: "90%",
height: 640,
syncScrolling: "single",
saveHTMLToTextarea:true,//保存markdown中的内容开启
path: "../editormd/lib/",//markdown lib文件存放的位置,找不到可以配置项目路径<c:set var="ctx" value="${pageContext.request.contextPath}"> 在路径前加上${ctx}"/editormd/lib/"
//图片上传
imageUpload : true,
imageFormats : ["jpg", "jpeg", "gif", "png", "bmp", "webp"],
imageUploadURL : "/file/upload"
onload:function(){//内容要在onload的时候加载,直接用ajax请求后台接口拿到数据库中的数据给markdown赋值
$.ajax({
type:"post",
url:"/md/getContent",//获取数据的接口
dataType:"json",
contetType:"application/x-www-form-urlencoded;charset=utf-8",
success:function(data){
testEditor.setMarkdown(data.content);//通过接口获取的数据
}
});
}
});
});
注意:
不要通过跳转页面的时候进行传参数,如果要给markdown赋的值中有回车或者换行,通过定义变量去接参数再赋值,页面就会因为数据问题导致加载不出来。
**错误操作 **
var content = ${data.content},
var testEditor ;
$(function() {
testEditor = editormd("test-editormd", {
width: "90%",
height: 640,
syncScrolling: "single",
saveHTMLToTextarea:true,//保存markdown中的内容开启
path: "../editormd/lib/",//markdown lib文件存放的位置,找不到可以配置项目路径<c:set var="ctx" value="${pageContext.request.contextPath}"> 在路径前加上${ctx}"/editormd/lib/"
//图片上传
imageUpload : true,
imageFormats : ["jpg", "jpeg", "gif", "png", "bmp", "webp"],
imageUploadURL : "/file/upload"
onload:function(){
testEditor.setMarkdown(content);//错误赋值方式❌
}
});
}
});
});
保存markdown中编辑的数据:
添加一个保存按钮
<button id="save" class="" type="button" onclick="saveContent()">保存</button>
<!-- 存放源文件用于编辑 -->
<textarea style="display:none;" id="my-editormd-markdown-doc" name="my-editormd-markdown-doc" placeholder="markdown"></textarea>
<!-- 第二个隐藏文本域,用来构造生成的HTML代码,方便POST提交 -->
<textarea id="my-editormd-html-code" class="editormd-html-textarea" name="my-editormd-html-code" style="display:none;"></textarea>
function saveContent(){
var content = $("#my-editormd-html-code").val();//通过id获取<textarea>标签中编辑的内容
$.ajax({
type:"post",
url:"/md/saveContent",//保存数据的接口
dataType:"json",
data:{'content':content},
success:function(data){
if(data==1){
alert("保存成功");
}
}
});
}