2017-12-27 669 views
0

我正在使用summernote html文本編輯器及其插入圖像功能。 (當用戶輸入的圖像,我把它發送到我的後端和與我替換用戶的圖像網址)JQuery序列化數據獲取舊窗體值

例子:

用戶輸入:http://example.com/image.jpg - >上傳此圖片亞馬遜S3 - >更新summernote文本區域的img src =「」(mydomain.com/blabla.jpg)。

以上邏輯運行良好。這裏沒有問題。

然後我想把這個texarea發送到我的後端php腳本的數據庫的東西。

但是,當我serilize並提交表格。 Ajax發送用戶的圖片網址。沒有替換圖片網址。

圖片上傳

/*GET USER'S IMAGE URL AND SEND IT TO BACKEND. UPLOAD IT, THEN RAPLACE IT'*/ 
/*THIS PART IS WORKING CORRECTLY */ 
$('button[data-original-title="Picture"]').click(function(){ 
    // Set handler on Inset Image button when dialog window is opened 
    $('.modal-dialog .note-image-btn').on('click', function(e) { 
     var imageUrl = $('.modal-dialog .note-image-url').val(); 
     var currentTitle = $("#title").val().trim(); 
     if(currentTitle.length == 0){ 
      currentTitle = ""; 
     } 
     $.ajax({ 
      url: "upload.php", 
      data: "url="+encodeURIComponent(imageUrl)+"&title="+encodeURIComponent(currentTitle), 
      type: "POST", 
      dataType: 'json', 
      success: function(data) { 
       if (typeof data[0] === 'string') { 
        $('img[src="' + imageUrl + '"]').attr('src', data); 
       } else { 
        // What to do if image downloading failed 
        window.alert('oops'); 
       } 
      }, 
      error: function() { 
       /* console.log("error");*/ 
      } 
     }); 
    }); 
}); 

形式AJAX(問題是在這裏我想)

/* SEND SERIALIZED FORM DATA TO BACKEND */ 
/* PROBLEM IS HERE. $("#form").serialize() CAN'T GET replaced IMAGE URL. */ 
$("#submitButton").on("click",function() { 
    $.ajax({ 
     url: "save-article.php", 
     data: $("#form").serialize(), 
     type: "POST", 
     success: function(data) { 
      if(data === "success"){ 
       $(".messageBox").html('<div class="alert alert-success ic">Thanks, you are redirecting</div>'); 
      }else if(data === "fail"){ 
       $(".messageBox").html('<div class="alert alert-danger ic">There was an error</div>'); 
      } 
     }, 
     error: function (e) { 
      console.log(e); 
     } 
    });*/ 
}); 

我怎樣才能改變summernote文本區域的價值提交和序列化?

+0

HTML的外觀如何?你有沒有嘗試用新值替換textarea的值?或者使用隱藏的表單域來存儲新值? – xadhix

+0

Html部分看起來不錯。我可以在HTML文本編輯器上看到替換的圖像。這是正確的,img src =「」包含我的域的值。但是當我序列化並提交包含summernote textarea的表單時,在我的後端,我看不到被替換的src值。 @xadhix – hakiko

+0

_Html部分看起來不錯_如果我們應該聽取您的意見,可能需要一段時間纔能有人對此問題進行猜測。 – RiggsFolly

回答

0

Summernote不使用初始化編輯器的元素,它將該元素中的數據複製到它自己的動態創建的接口中。您需要複製Summernotes編輯區域中的數據(您可以使用類別目標.note-editable)。如果你還沒有的話,我建議你去看看Summernote的主站點,以獲得以編程方式獲取代碼的例子。 https://summernote.org/getting-started/#get--set-code