quill踩坑——关于quill内容的上传和回传

       写个人博客的时候需要用到富文本编辑器，当时找了半天，Ueditor太丑且已经没有维护，CKeditor文档太长，quill的坑起始也很深，只不过，因为比较好看所以用了。

        言归正传，我使用的是django做后台，现在开始踩坑，主要包含两个方面。内容的上传，包括文章的上传和图片的上传；内容的回传，根据后台返回的内容正确显示原来的文章。

        内容上传部分：

        先介绍一下提交图片的部分。思路是这样的：设定一个隐藏的form表（直接利用表单的input上传文件最简单）单，设定点击插入图片按钮的消息处理函数，当点击插入图片时，触发表单的内容选择，再将获取的数据格式化上传到服务器，服务器存储好图片之后，返回在服务器上的地址，再将图片插入到文本中。（这个时候图片的源已经变成了我们的服务器）

这里贴出源码

HTML部分

Javascript部分

var toolbar =quill.getModule('toolbar');

toolbar.addHandler('image',show);//设置事件处理函数

function show() {

const Upload =document.querySelector("#SelectFile");

Upload.click();

const input =Upload;

const Submit =document.querySelector("#Submit");

//Submit.click();

//ajax异步提交表单

    var formData =new FormData();

formData.append("img",Upload.files[0]);

$.ajax({

type:"POST",

dataType:"json",//预期服务器返回的数据类型

        url:"uploadphoto",

data:formData,

contentType:false,

processData:false,

success:function (result) {

var range =quill.getSelection()

quill.insertEmbed(range.index,'image', result.url);

quill.setSelection(range.index +1);

},

error:function () {

alert("异常");

}

});

}

接下来踩坑文章内容的提交，我的思路是这样的，我最开始希望能够官方提供的API能够直接返回一个表示文本内容的字符串，后来发先返回的是一个对象，并且由多个数组组成。我决定改变思路，直接从网页中利用Javascript提取文本得DOM，再直接传给服务器，代码如下：

function getcontent() {

var article=document.getElementsByClassName("ql-editor")[0].innerHTML;

／／标签是存放文本内容的ｄｉｖ

$.post("",{

body:article,／／ａｒｔｉｃｌｅ　即是我要存储的文章的主体部分

title:"1111"

})};

---

文章的复现

思路与上传相反，服务器再返回数据时，将文章的内容部分放在脚本当中，再利用innerHTML将文本插入到编辑器当中，最终代码部分如下。

var text='{{content|safe }}';

var node=document.getElementsByClassName(("ql-editor"))[0];

node.innerHTML=text;

这里贴出的是ｄｊａｎｇｏ渲染时的目标，｛｛content｜ｓａｆｅ｝｝，ｓａｆｅ是为了防止浏览器接收时将里面ｃｏｎｔｅｎｔ变量的内容转义（因为可能HTML代码中还含有“”），同时外部使用＇＇，防止内部双引号造成语法错误。最终可以实现将原来的文章复原。

第一次用写文章，不会用markdown，找不到代码高亮，各位先将就着看吧，什么时候找到了合适的方法之后，作者再继续补充。