Question

可编辑div具有与按钮功能相适应的编辑器结构的完整设计，使我可以在可编辑div中编写的文本中添加粗体，斜体。

我在可编辑div中编写的所有内容都将相同的值传递给textarea，这样我便可以将这些信息插入数据库中。

整个过程运行非常好。

问题是我在预览div的文本区域中接收到的数据无法同时显示，我必须在文本区域中写一些内容才能在预览中显示数据。

这是我的jQuery代码：

$(function() {
    let htmlDiv = $("#editor");
    htmlDiv.on("keyup", function(e) {
        $("#textarea").html(htmlDiv.html());
    });
    $("#textarea").html(htmlDiv.html());

    $('.editor-preview').keyup(function(){                  
        var value = $(this).val();
        var contentAttr = $(this).attr( 'class' );
        $( '.' + contentAttr + '' ).html(value);
    })
});

如何解决预览中数据输出的这种阻塞？

http://jsfiddle.net/rpvthc4u/4/

Answer 1

只需添加编辑器内容即可预览（按向上键）。参见下面的代码

$(function() {
    let htmlDiv = $("#editor");
    htmlDiv.on("keyup", function(e) {
        $("#textarea").html(htmlDiv.html());
        $(".editor-preview").html(htmlDiv.html()); //assign content to preview
    });
    $("#textarea").html(htmlDiv.html());

    $('.editor-preview').keyup(function(){                  
        var value = $(this).val();
        var contentAttr = $(this).attr( 'class' );
        $( '.' + contentAttr + '' ).html(value);
    })
});

如何避免阻塞预览数据输出？

1 个答案: