Skip to main content
 首页 » 编程设计

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

2026年07月28日498°冷暖

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

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

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

请您参考如下方法:

我想要拥有相同的功能,这就是我解决它的方法(使用 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()); 
}; 

希望有帮助。