web 项目集成markdown插件数据的保存和编辑

集成过程请参考内容

数据的回显:
可以把数据保存在.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("保存成功");
        		}
			}
        });
}


  • 1
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值