我使用 quill 編輯器
他是在ＤＩＶ區塊編輯文本
<div id="editor" class="ql-editor"></div>
<input type="hidden" name="content" id="content">
ajax
$("#form").submit(function(e){
// ...
var formData = new FormData($("#form")[0]);
formData.append('content', document.querySelector(".ql-editor").innerHTML);
$.ajax({
type:"POST",
url:"xxx.php,
data: formData,
enctype: 'multipart/form-data',
cache: false,
contentType: false,
processData: false,
success:function(data){
//...
}
});
我會先把 .ql-editor 的內容丟給表單中的 content
然後再給 php 處理
但是現在有問題是因為 quill 上傳圖片是使用 base64
因此當我把有圖片的內容丟給 input value時會錯誤
因為裡面有附帶語法是
這樣沒辦法直接丟到 input的value 裡面使用
請問這要怎麼解？
如何獲取 div#editor 的內容？
已邀請的邦友 {{ invite_list.length }}/5
你使用套件時應該要先看看有沒有文件
通常都會有提供你使用的函式
像是你說取得編輯器內容在這邊
https://quilljs.com/docs/api/#content
quill.getText(0, 1000);
上面變數應該使取得從0到1000個字元
後面打超過長度沒差
疑？請問是怎麼寫才對？要讓ajax抓到要怎麼處理？
asys0512
quill.getText(0, 1000)傳回來的就是你編輯器打的內容
$.ajax({
type:"POST",
url:"xxx.php",
data: {"content":quill.getText(0, 1000)},
success:function(data){
//...
}
});
我也是這樣寫，但是發現 var formData = new FormData($("#form")[0]); 沒用處了，我還有其他的欄位要取
asys0512
我後來發現這樣不能儲存文字格式...
改成這樣抓會比較好
$('.ql-editor')[0].innerHTML
直接存html會比較好
但是好像也有點危險
所以改用ckEditor也是不錯的方法
本身的api就是儲存html
哇，這確實有點複雜
我想知道怎麼讓 ajax 可以抓到 div#editor 的內容？
照片有點醜，下面這樣有抓到了吧
function selectLocalImage() {
const input = document.createElement('input');
input.setAttribute('type', 'file');
input.click();
input.onchange = function(){
const file = input.files[0]; //上傳圖片物件
if (/^image\//.test(file.type)) {
saveToServer(file);//上传到服务器
} else {
toastr.warning("只能上传图片");
}
};
}
iThome鐵人賽
看影片追技術