? ? ?? 寫(xiě)個(gè)人博客的時(shí)候需要用到富文本編輯器，當(dāng)時(shí)找了半天践宴，Ueditor太丑且已經(jīng)沒(méi)有維護(hù)鲸匿，CKeditor文檔太長(zhǎng)，quill的坑起始也很深阻肩，只不過(guò)带欢，因?yàn)楸容^好看所以用了。
? ? ? ? 言歸正傳烤惊，我使用的是django做后臺(tái)洪囤，現(xiàn)在開(kāi)始踩坑，主要包含兩個(gè)方面撕氧。內(nèi)容的上傳，包括文章的上傳和圖片的上傳喇完；內(nèi)容的回傳伦泥，根據(jù)后臺(tái)返回的內(nèi)容正確顯示原來(lái)的文章。
? ? ? ? 內(nèi)容上傳部分：
? ? ? ? 先介紹一下提交圖片的部分锦溪。思路是這樣的：設(shè)定一個(gè)隱藏的form表（直接利用表單的input上傳文件最簡(jiǎn)單）單不脯，設(shè)定點(diǎn)擊插入圖片按鈕的消息處理函數(shù)，當(dāng)點(diǎn)擊插入圖片時(shí)刻诊，觸發(fā)表單的內(nèi)容選擇防楷，再將獲取的數(shù)據(jù)格式化上傳到服務(wù)器，服務(wù)器存儲(chǔ)好圖片之后则涯，返回在服務(wù)器上的地址复局，再將圖片插入到文本中。（這個(gè)時(shí)候圖片的源已經(jīng)變成了我們的服務(wù)器）
這里貼出源碼
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);//設(shè)置事件處理函數(shù)
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",//預(yù)期服務(wù)器返回的數(shù)據(jù)類(lèi)型
? ? ? ? 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("異常");
}
});
}
接下來(lái)踩坑文章內(nèi)容的提交粟判，我的思路是這樣的亿昏，我最開(kāi)始希望能夠官方提供的API能夠直接返回一個(gè)表示文本內(nèi)容的字符串，后來(lái)發(fā)先返回的是一個(gè)對(duì)象档礁，并且由多個(gè)數(shù)組組成角钩。我決定改變思路，直接從網(wǎng)頁(yè)中利用Javascript提取文本得DOM，再直接傳給服務(wù)器递礼，代碼如下：
function getcontent() {
var article=document.getElementsByClassName("ql-editor")[0].innerHTML;
／／標(biāo)簽是存放文本內(nèi)容的ｄｉｖ
$.post("",{
body:article,／／ａｒｔｉｃｌｅ 即是我要存儲(chǔ)的文章的主體部分
title:"1111"
})};
文章的復(fù)現(xiàn)
思路與上傳相反惨险，服務(wù)器再返回?cái)?shù)據(jù)時(shí)，將文章的內(nèi)容部分放在腳本當(dāng)中脊髓，再利用innerHTML將文本插入到編輯器當(dāng)中辫愉，最終代碼部分如下。
var text='{{content|safe }}';
var node=document.getElementsByClassName(("ql-editor"))[0];
node.innerHTML=text;
這里貼出的是ｄｊａｎｇｏ渲染時(shí)的目標(biāo)供炼，｛｛content｜ｓａｆｅ｝｝一屋，ｓａｆｅ是為了防止瀏覽器接收時(shí)將里面ｃｏｎｔｅｎｔ變量的內(nèi)容轉(zhuǎn)義（因?yàn)榭赡蹾TML代碼中還含有“”），同時(shí)外部使用＇＇袋哼，防止內(nèi)部雙引號(hào)造成語(yǔ)法錯(cuò)誤冀墨。最終可以實(shí)現(xiàn)將原來(lái)的文章復(fù)原。
第一次用簡(jiǎn)書(shū)寫(xiě)文章涛贯，不會(huì)用markdown诽嘉，找不到代碼高亮，各位先將就著看吧弟翘，什么時(shí)候找到了合適的方法之后虫腋，作者再繼續(xù)補(bǔ)充。
