How to add a TinyMCE persistent wrapper to the content area
I want to add a wrapper <div class="well">to the tinymce content body. But I do not want it to be saved with content. Therefore, it will simply improve WYSIWYG, because the content will be displayed <div class="well"></div>when published. This shell should be removed when using tinymce. Any idea on it?
Update: here is an example: http://unsalkorkmaz.com/twitter-embeds-in-wrong-language/
Check the comment form. Basically, I moved the body background to html and made the class “good” for the body. This is a quick fix that I don't like much tbh. There must be some way to add a permanent root block inside the editor body.
, ( 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());
};
, .
TinyMCE, save_callback.
, , TinyMCE , .
: jQuery div:
function add_custom_div(element_id, html, body) {
var dom = $(html);
if ($('div.well').length < 1)
{
dom.wrap("<div class='wrap' /><div class='well'");
html = dom.html();
}
return html;
}
tinyMCE.init({
...
save_callback : "add_custom_div"
});
, div TinyMCE , , noneditable_regexp.
, TinyMCE .