Summernote 关于动态引导模式

Question

我不太确定这是我的代码问题还是 Summernote 中的错误。以为我会在这里发帖，看看是否有其他人遇到这个问题......

我有一个用于编辑表单的 Bootstrap 模式。当模式被激活时，它会从 mySQL 中提取内容并填充模式中的表单字段。如果我更改 textarea 中的文本并单击 Submit，它会正常工作：新的、更新的文本被发送到服务器。但是，如果我将 Summernote 添加到该文本区域并单击提交 OLD，则会将原始文本而不是新的更新文本发送到服务器。

这是我将 Summernote 附加到动态模式的代码。 Summernote 编辑器确实出现在模式中，我没有收到任何 javascript 错误。

$('#modal-edit-post').on('shown.bs.modal', function() {
    if($('.summernote-edit').length > 0){
        $('.summernote-edit').summernote({
            toolbar: [
                ['style', ['bold', 'italic', 'underline', 'strike']],
                ['para', ['ul', 'ol']],
            ],
            styleWithSpan: false,
            onpaste: function(e) {
                var thisNote = $(this);
                var updatePastedText = function(someNote){
                    var original = someNote.code();
                    var cleaned = CleanPastedHTML(original);
                    someNote.code('').html(cleaned);
                };
                setTimeout(function () {
                    //this kinda sucks, but if you don't do a setTimeout, 
                    //the function is called before the text is really pasted.
                    updatePastedText(thisNote);
                }, 10);
            }
        });
    }
});

这是我用来处理提交的东西

$('#form-edit-post').submit(function(e) {

    var form = $(this);
    var formdata = false;
    if(window.FormData){
        formdata = new FormData(form[0]);
    }

    var id = 'edit-post';
    var formAction = form.attr('action');

    // testing to see the changes...
    var dd = form.serialize();alert(dd);return false;

    if($(this).valid()) {

        $('#form-edit-post :input').attr('disabled', true);
        $.ajax({
            type        : 'POST',
            url         : '/assets/ajax/post.php',
            cache       : false,
            data        : formdata ? formdata : form.serialize(),
            contentType : false,
            processData : false,
            dataType    : 'json',
            success: function(response) {
                if(response.status == 'success') {
                    modalSuccessMessage(id,'Your changes were saved');
                } else {
                    modalErrorMessage(id,response.message);
                }
                $('#form-edit-post :input').attr('disabled', false);
            },
        });
    }
    e.preventDefault();
});

不确定这是否相关，但这就是我提取动态内容的方式。

$('.edit-post').click(function(e) {

    var id   = $(this).data('id');
    var data = 'id=' + id;

    $.get('/assets/ajax/get-post-edit.php?id=',data, function(response) {
        if(response != 'fail') {
            $('#content-edit-post').html(response);
            $('#modal-edit-post').modal('show');
        }
    });

    e.preventDefault();
});

Answer 1

Summernote 创建一个新的 div，用于存储来自 Summernote 编辑器的内容。提交表单时，您需要从 Summernote 实例请求该数据，然后在序列化表单数据之前插入到您的文本区域。假设 'summernote-edit' 是你的 textarea 的类：

$('#form-edit-post').submit(function(e) {

   var form = $(this);
   var formdata = false;
   if(window.FormData){
       formdata = new FormData(form[0]);
   }

   var id = 'edit-post';
   var formAction = form.attr('action');

   // Get content from Summernote
   var content = $(".summernote-editor").code();

   // Add content from summernote to textarea
   $("textarea.summernote-editor").html( content );

   // testing to see the changes...
   var dd = form.serialize();alert(dd);return false;

   if($(this).valid()) {

       $('#form-edit-post :input').attr('disabled', true);
       $.ajax({
           type        : 'POST',
           url         : '/assets/ajax/post.php',
           cache       : false,
           data        : formdata ? formdata : form.serialize(),
           contentType : false,
           processData : false,
           dataType    : 'json',
           success: function(response) {
               if(response.status == 'success') {
                   modalSuccessMessage(id,'Your changes were saved');
               } else {
                   modalErrorMessage(id,response.message);
               }
               $('#form-edit-post :input').attr('disabled', false);
           },
       });
    }
    e.preventDefault();
});

Answer 2

我认为您应该在输入中添加 onchange 侦听器，这样您将始终收到正确的文本。

<textarea class="summernote" name="content"></textarea>

如果是文本区域：

$('.summernote').summernote({
    height: 300
}).on('summernote.change', function(we, contents, $editable) {
    $(this).html(contents);
});

如果是输入字段：

$('.summernote').summernote({
    height: 300
}).on('summernote.change', function(we, contents, $editable) {
    $(this).val(contents);
});