iT邦幫忙

0

如何正確的丟 data 給 ajax 去 php 處理?

  • 分享至 

  • xImage

我使用 quill 編輯器
他是在DIV區塊編輯文本

<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 的內容?

圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

2 個回答

0
Homura
iT邦高手 1 級 ‧ 2018-06-21 14:41:19
最佳解答

你使用套件時應該要先看看有沒有文件
通常都會有提供你使用的函式
像是你說取得編輯器內容在這邊
https://quilljs.com/docs/api/#content

quill.getText(0, 1000);

上面變數應該使取得從0到1000個字元
後面打超過長度沒差

看更多先前的回應...收起先前的回應...
火爆浪子 iT邦研究生 1 級 ‧ 2018-06-21 16:08:02 檢舉

疑?請問是怎麼寫才對?要讓ajax抓到要怎麼處理?

Homura iT邦高手 1 級 ‧ 2018-06-21 16:10:03 檢舉

asys0512
quill.getText(0, 1000)傳回來的就是你編輯器打的內容

Homura iT邦高手 1 級 ‧ 2018-06-21 16:14:07 檢舉

asys0512

$.ajax({
            type:"POST",
            url:"xxx.php",
            data: {"content":quill.getText(0, 1000)},
            success:function(data){
                //...
            }
        });
火爆浪子 iT邦研究生 1 級 ‧ 2018-06-21 18:09:48 檢舉

我也是這樣寫,但是發現 var formData = new FormData($("#form")[0]); 沒用處了,我還有其他的欄位要取

Homura iT邦高手 1 級 ‧ 2018-06-21 19:40:25 檢舉

asys0512
我後來發現這樣不能儲存文字格式...
改成這樣抓會比較好

$('.ql-editor')[0].innerHTML

直接存html會比較好
但是好像也有點危險
所以改用ckEditor也是不錯的方法
本身的api就是儲存html

火爆浪子 iT邦研究生 1 級 ‧ 2018-06-22 00:19:59 檢舉

哇,這確實有點複雜

1
火爆浪子 iT邦研究生 1 級 ‧ 2018-06-21 12:28:30 檢舉

我想知道怎麼讓 ajax 可以抓到 div#editor 的內容?

照片有點醜,下面這樣有抓到了吧
/images/emoticon/emoticon10.gif

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("只能上传图片");
}
};
}

我要發表回答

立即登入回答