1

「編集ビュー」でBasecampから提供される非常に簡単に実装できるTrix Editorを使用しています。

ユーザーが更新ボタンを介して対話することなく、変更を自動的に保存するにはどうすればよいでしょうか?

私はこのようなことを考えています: (OLD SCRIPT)

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

私が実際にやりたいこと：

Rails サーバーに ajax "post" リクエストを送信します。何かのようなもの：

$('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;
        }
    });

（認証と工夫にも問題があります。ログインしている場合にのみ、ajaxポストリクエストを送信できるはずです..??）

ユーザーが一部のデータを変更した場合にのみ変更を保存し、5 秒待ってから、更新されたデータを json 経由でサーバーにプッシュすることをお勧めします。私はそれを行う方法がわかりません...

PS：この質問に「trix-editor」タグを付けたいと思っていましたが、担当者が足りなくて申し訳ありません...

4

3 に答える 3

0

プレーンな JavaScript を使用している場合は、非表示の入力フィールドを使用します。

<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-24T09:29:55.827 に答える