jquery - 如何将 TinyMCE 永久包装添加到内容区域

Question

我想添加 <div class="well"> tinymce 内容主体的包装器。但我不希望它与内容一起保存。因此，它只会改进所见即所得，因为内容将显示在 <div class="well"></div> 中发布时。使用tinymce 时该包装器应该不可删除。有什么想法吗？

更新:这是示例: http://unsalkorkmaz.com/twitter-embeds-in-wrong-language/

检查其评论表。基本上我将 body 的背景移至 html 并将“well”类添加到 body 中。这是一个快速修复，但我不太喜欢。必须有某种方法可以在编辑器体内添加永久根 block 。

Answer 1

我想要拥有相同的功能，这就是我解决它的方法(使用 Jquery 进行 DOM 操作):

$('textarea#id_body').tinymce({
    ....
    ....
    init_instance_callback : make_wysiwyg
});

这就是 make_wysiwyg 代码的样子:

var make_wysiwyg = function(inst){
    var tmceIframe = $(".mceIframeContainer iframe")[0].contentDocument || $(".mceIframeContainer iframe")[0].contentWindow.document;
    $(tmceIframe).find("body#tinymce article").wrapInner('<div class="post-content"/>');
}

现在，要删除我们添加的这个额外的 html，您可以在表单提交按钮上执行 onClick 事件，并在调用 form.submit 之前调用以下函数:

var strip_wysiwyg = function() {
    var tmceIframe = $(".mceIframeContainer iframe")[0].contentDocument ||     $(".mceIframeContainer iframe")[0].contentWindow.document;
    $post_content_wrapper = $(tmceIframe).find("body#tinymce div.post-content");
    $post_content = $post_content_wrapper[$post_content_wrapper.length-1];
    $($(tmceIframe).find("body#tinymce")[0]).html($($post_content).html());
};

希望有帮助。