Editor.md在Django中的集成

发布这篇文章是因为我刚开发了我的第一个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标签包裹着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