发布这篇文章是因为我刚开发了我的第一个Django博客应用,想支持Editor.md,却无奈网上只有怎么把Editor.md简单地嵌入Django的教程,并没有明确指明对于Editor.md中渲染出的HTML和采集的Markdown源码的提取,这里总结一下我自己的开发过程中遇到的一些坑,希望给新来的小伙伴一些帮助,起码摸着石头过河也知道方向
本文假设读者已根据前辈们的经验将Editor.md集成的了自己的web项目中
Editor.md Markdown的提取
通过分析Editor.md界面可知其Markdown文本都存放在一个类名为CodeMirror-code的div下的pre标签中(事实上这个div中还存放了很多其他东西)
var markdown_content="";
var line=document.querySelectorAll(".CodeMirror-code pre");
for(var i=0; i<line.length; i++){
//用document.innerText是因为事实上pre中还有一层<span>标签包裹着Markdown代码
markdown_content=markdown_content+line[i].innerText+'\n';
}
此时javascript变量markdown_content中存放的便是Markdown原文
Editor.md HTML的提取
在启用Editor.md的editormd的第二个参数散列中添加
saveHTMLToTextarea: True
以下代码提取HTML
//test-editormd是在启用Editor.md的editormd的第一个参数,即编辑器名字
//以下一行代码获取html代码是经过安全编码的(比如"<"编码为"<")
var html_code=document.getElementsByName("test-editormd-html-code");
//以下代码转化html安全编码为正常编码
function HTMLDecode(text){
var temp=document.createElement("div");
temp.innerHTML=text;
var output=temp.innerText || temp.textContent;
temp=null;
return output;
}
var html_code=HTMLDecode(html_code);
javascript变量html_code中存放的即为正常编码的HTML代码
Editor.md本地图片上传
在启用Editor.md的editormd的第二个散列参数中添加
imageUpload: True,
imageFormats: ['jpg','jpeg','png','bmp','webp','gif'],
imageUploadURL:'/imageUploadInterface',
imageUploadInterface为Editor.md上传图片要访问的路径
Editor.md图片以post方式上传一个包含图片信息的字典
Editor.md期待的返回:
{
'success(1表示成功,0表示失败)': 1(或0),
'message': 'message',
'url(如果失败则不返回)': 'imageURL'
}
Editor.md上传的图片的提取
#以下函数默认情况下应写在view.py中
#name为上传的图片名
#image为图片的二进制数据
def editorPic(request):
if request.method=="POST":
name=request.FILES['editormd-image-file'].name
image=request.FILES['editormd-image-file']
#...
#do something you want
在Editor.md页面中集成自己的组件
Editor.md编辑器的z轴位置默认为99999
你若不想让你的组件被Editor.md覆盖可以在editor.md/editormd.js的331行找到其数值并更改之或将你的组件z轴位置提高的99999以上
Editor.md表情不可用问题的解决
可以参考这篇文章: https://www.jianshu.com/p/9670fe7a8c32
