contenteditable div,加载隐藏HTML标签?

时间:2014-03-11 08:32:01

标签: jquery contenteditable

我有contenteditable='true'的div。我还有一些javascript将内容从这个div移动到隐藏的textarea并将其保存到数据库。

当我加载页面时,我显然想要向后执行,将一些html从textarea加载到contenteditable div。我可以这样做,但现在所有的html标签如<b>都可见。我之前使用document.execCommand("bold", false, null);通过输入到div来制作som粗体文本,但是如何再次加载此文本并将其视为粗体?

jQuery("textarea:visible").each(function() {
    jQuery(this).textJq();
});

$.fn.textJq = function() {
    this.after("<div class='textJq-wrapper'></div>");
    var textarea = this;
    var wrapper = this.next();
    wrapper.append("<div class='textJq-header'></div>");
    var header = wrapper.children().first();
    wrapper.append("<div contenteditable='true' class='textJq-text'></div>");
    var viewer = header.next();

    $('.textJq-text').css({'height' : this.height(), 'width': '100%'});
    this.hide();

    // Init Tools
    header.append("<a href='#' class='textJq-bold'>B</a>");


    // Functions for each tool
    $(header).find('.textJq-bold').click(function() {
        document.execCommand("bold", false, null);
        return false;
    });

    // Update textarea on input
    $(viewer).on("input", function() {
        $(textarea).html($(viewer).html());
    });

    // Init text on load
    $(viewer).html($(textarea).html());
};

1 个答案:

答案 0 :(得分:0)

使用val()而不是html()来获取textarea的值。在这种情况下更好,只需使用textarea.value