Question

我正在使用非常简单的方法在“编辑视图”中实现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”标签标记这个问题，抱歉没有代表这样做...

Answer 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。

Answer 2

所以我想出了这个代码，它通过ajax保存在＆＃39; trix-blur＆＃39; （当用户解析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();
        }
    };


});

Answer 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. */
})

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

3 个答案: