quill踩坑——关于quill内容的上传和回传
写个人博客的时候需要用到富文本编辑器,当时找了半天,Ueditor太丑且已经没有维护,CKeditor文档太长,quill的坑起始也很深,只不过,因为比较好看所以用了。
言归正传,我使用的是django做后台,现在开始踩坑,主要包含两个方面。内容的上传,包括文章的上传和图片的上传;内容的回传,根据后台返回的内容正确显示原来的文章。
内容上传部分:
先介绍一下提交图片的部分。思路是这样的:设定一个隐藏的form表(直接利用表单的input上传文件最简单)单,设定点击插入图片按钮的消息处理函数,当点击插入图片时,触发表单的内容选择,再将获取的数据格式化上传到服务器,服务器存储好图片之后,返回在服务器上的地址,再将图片插入到文本中。(这个时候图片的源已经变成了我们的服务器)
这里贴出源码
HTML部分
<div id="editor" ></div>
</div>
<form id="form1" method="POST" enctype="multipart/form-data">
<input id="SelectFile" name="img" style="display:none" type="file">
<input id="Submit" style="display:none" type=submit>
</form>
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;
//标签是存放文本内容的div
$.post("",{
body:article,//article 即是我要存储的文章的主体部分
title:"1111"
})};
文章的复现
思路与上传相反,服务器再返回数据时,将文章的内容部分放在脚本当中,再利用innerHTML将文本插入到编辑器当中,最终代码部分如下。
var text='{{content|safe }}';
var node=document.getElementsByClassName(("ql-editor"))[0];
node.innerHTML=text;
这里贴出的是django渲染时的目标,{{content|safe}},safe是为了防止浏览器接收时将里面content变量的内容转义(因为可能HTML代码中还含有“”),同时外部使用'',防止内部双引号造成语法错误。最终可以实现将原来的文章复原。
第一次用简书写文章,不会用markdown,找不到代码高亮,各位先将就着看吧,什么时候找到了合适的方法之后,作者再继续补充。