1

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

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

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

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”标签来标记这个问题，抱歉没有足够的代表这样做......

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 回答
0

所以我想出了这段代码，它通过 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();
        }
    };


});
于 2016-01-25T19:08:34.243 回答
0

根据Trix 项目页面，它trix-editor会在特定条件下发出不同的事件。

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

因此，您的 JavaScript 代码的第一行可能是

$('trix-editor').on('trix-change', function() {
  /* Here will be your code to save the editor's contents. */
})
于 2021-07-29T19:09:03.603 回答