How to Add TinyMCE permanent wrapper to content area

Question

I want to add a <div class="well"> wrapper to tinymce content body. But i dont want it gets saved with content. So it will just improve WYSIWYG because content will show in <div class="well"></div> when publish. This wrapper should be undeletable while using tinymce. Any idea on it?

Update: here is example: http://unsalkorkmaz.com/twitter-embeds-in-wrong-language/

Check its comment form. Basically i moved body's background to html and made "well" class to body. Its a quick fix which i dont like much tbh. There must be some way to add a permanent root block inside editor body.

Answer 1

I wanted to have the same feature, this is how I solved it (uses Jquery for DOM manipulation):

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

this is how make_wysiwyg code looks like :

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"/>');
}

Now, to remove this extra html that we have added, you can do a onClick event on the form submission button and before calling form.submit, call the following function:

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());
};

Hope it helps.