Rails / Trix Editor 通过 AJAX 将更改保存到服务器答案

【问题标题】：Rails / Trix Editor save changes via AJAX to serverRails / Trix Editor 通过 AJAX 将更改保存到服务器
【发布时间】：2016-04-30 04:26:10
【问题描述】：

我在“编辑视图”中使用 Basecamp 提供的非常简单的实现 Trix Editor。

如何在不让用户通过更新按钮进行交互的情况下自动更改保存？

我正在考虑这样的事情： （旧脚本）

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

我真正想做的事：

向 Rails 服务器发布一个 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;
        }
    });

（身份验证和设计也存在问题。只有登录后才能发送 ajax 发布请求 ..??）

更好的办法是在用户修改一些数据的时候才保存修改，然后等待5s，然后通过json将更新的数据推送到服务器。我不知道该怎么做...

PS：很想用“trix-editor”标签来标记这个问题，抱歉没有足够的代表这样做......

【问题讨论】：

我已经更新了答案的语法。这有点棘手。如果没有隐藏的输入字段，您将无法获得 trix-editor 的纯文本。您必须从 trix-editor 访问带有 id 的文本，而不是从隐藏的输入字段。

标签： ruby-on-rails trix

【解决方案1】：

如果您使用纯 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。

【讨论】：

感谢您的回复。通过 jquery 获取元素效果很好。不幸的是，我发布了一个误导性的脚本，我不会保存到浏览器的本地存储中，而是我想发送一个 ajax“发布”请求。查看编辑后的帖子。

【解决方案2】：

所以我想出了这个代码，它通过 ajax 保存在“trix-blur”（当用户取消选择 trix-editor 时触发）。剩下的问题是这段代码是否足够安全，或者现在任何人都可以发送要保存的数据？！？

我在笔记控制器中有这样的身份验证：

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


});

【讨论】：

快到了。您还可以使用在编辑器内容更改时发出的trix-change 事件。

【解决方案3】：

根据Trix project page trix-editor 在特定条件下发出不同的事件。

trix-change 事件是您所需要的；只要编辑器的内容发生变化，它就会触发。

所以，你的 JavaScript 代码的第一行可能是

$('trix-editor').on('trix-change', function() {
  /* Here will be your code to save the editor's contents. */
})

【讨论】：