Rails/Trix Editor通過AJAX將更改保存到服務器

我使用非常簡單的方式實現了Basecamp在「編輯視圖」中提供的Trix Editor。Rails/Trix Editor通過AJAX將更改保存到服務器

如何自動保存更改，而無需用戶通過更新按鈕進行交互？

我的想法是這樣的： （舊腳本）

window.setInterval(function() { 
    localStorage["editorState"] = JSON.stringify(element.editor) 
}, 5000);

我真正想要做的：

後一個AJAX 「後」請求軌道服務器。是這樣的：

$('trix-editor').on('blur', function() { 

    var sendname = $('#note_name').val(); 
    var sendlink = $('#linkinput').val(); 
    var sendnote = $('input[name="note[note]"]').val(); 

    $.ajax({ 
     type: "POST", 
     url: "/notes", 
     data: { note: { name: sendname, link: sendlink, note: sendnote } }, 
     success: function(data) { 
      alert(data.id); 
      return false; 
     }, 
      error: function(data) { 
      return false; 
     } 
    });

（有以及與認證的問題，並制定只有當你在loged你應該能夠發送一個ajax post請求??）

更妙的是僅在用戶更改某些數據時才保存更改，然後等待5秒鐘，然後通過json將更新的數據推送到服務器。我不知道該怎麼做......

PS：也很想來標記一個「TRIX編輯器」的標籤這個問題，很抱歉沒有足夠多的代表這樣做...

來源

2016-01-23 xpnimi

我已經更新了我的語法回答。這有點棘手。如果沒有隱藏的輸入字段，則不會爲您的trix編輯器獲取純文本。您必須從trix編輯器訪問帶有ID的文本，而不是來自隱藏的輸入字段。 –

如果您使用普通的JavaScript，使用hidden input field：

<form> 
    <input type="hidden" id="noticeEditorContent"/> 
    <trix-editor input="noticeEditorContent" id="x" style="min-height: 200px;"></trix-editor> 
</form>

現在你有機會與ID X的元素。

這意味着，用的getElementById，你可以做這樣的事情：

var richTex = document.getElementById("x");

有了這個變量，你可以設置的時間間隔，你已經解釋的，或者你使用jQuery做的工作：

$('#x').on('input', function() { 
    localStorage["editorState"] = JSON.stringify($('#x').val()); 
});

只是一個建議。你可以寫這個代碼更好，更乾淨。

現在看情況。每5秒更好地設置一個時間間隔還是每次更改LocalStorage？

建議： 保存在用戶取消選擇該領域的投入：

$('#x').on('blur', function() { 
    localStorage["editorState"] = JSON.stringify($('#x').val()); 
});

更新：這是一個工作JSFiddle。

來源

2016-01-24 09:29:55

感謝您的回覆。通過jquery獲取元素工作得很好。不幸的是我發佈了一個誤導性的腳本，我不會保存到瀏覽器localstorage，而是我想發送ajax「post」請求。查看編輯過的帖子。 – xpnimi

所以我想出了這個代碼，通過ajax保存'trix-blur'（當用戶釋放trix編輯器時觸發）。如果這個代碼足夠安全，或者現在任何人都可以發送數據以保存，那麼只剩下問題了！

我有一個這樣的筆記控制器的鑑別：

before_action :authenticate_user!

這裏是JavaScript部分（帶有自定義消息功能）：

$('trix-editor').on('trix-blur', function() { 

    var sendname = $('#note_name').val(); 
    var sendlink = $('#linkinput').val(); 
    var sendnote = $('input[name="note[note]"]').val(); 
    var sendid = $('#note_id').val(); 

    $.ajax({ 
     type: "PUT", 
     url: "/notes/" + sendid, 
     dataType: "json", 
     data: { note: { name: sendname, link: sendlink, note: sendnote }, id: sendid, commit: "Update Note" }, 
     success: function(data) { 
      addMessage('auto saved ...', 'msg-success'); 
      return false; 
     }, 
     error: function(data) { 
      alert('error'); 
      return false; 
     } 
    }); 

    var addMessage = function(msg, msgclass) { 
     $('#notifications').append('<div id="msg" class="msg '+msgclass+'">'+msg+'</div>'); 
     setTimeout(function() { 
      $('#msg:last-child').addClass('msgvisible');  
     }, 100); 
     displayMessage(); 
    }; 

    var displayMessage = function() { 
     setTimeout(function() { 
      hideMessage(); 
     }, 2000); 
    }; 

    var hideMessage = function() { 
     $('#msg').addClass('msghide'); 
     setTimeout(function() { 
      deleteMessage(); 
     }, 300); 
    }; 


    var deleteMessage = function() { 
     $('#msg').remove(); 
     if ($('#notificatosn').find('#msg') > 1) { 
      displayMessage(); 
     } 
    }; 


});

來源

2016-01-25 19:08:34 xpnimi

Rails/Trix Editor通過AJAX將更改保存到服務器

回答

相關問題