6

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.

6
  • 1
    why don't you add this wrapper before submitting the content to the server? you won't be able to wrap an iframe body element into a div
    – Thariama
    Mar 8, 2013 at 9:24
  • This wrapper is purely cosmetic and only needs when writing content in tinymce. I thought to add to tinymce with init but then it can get deleted while editing content. Basically somehow i need tinymce need to accept <html><body id="tinymce"><div class="well"> as root of content. Mar 8, 2013 at 13:05
  • due to the fact that tinymce inserts divs or paragraphs to wrap inserted content into them your div won't wrap the whole content
    – Thariama
    Mar 8, 2013 at 15:27
  • 1
    an alternative would be to add the the well class to the tiny MCE body itself tinymce.com/wiki.php/Configuration:body_class
    – Simon West
    Mar 12, 2013 at 15:18
  • ok, you don't want the wrapper div getting saved to your database. for what reason do you want to wrap the content inside this div? i am asking because there might be other options to get what you desire - just tell us what you want.
    – Thariama
    Mar 14, 2013 at 14:10

2 Answers 2

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.

1
  • Long time passed,I remember I tried similar approach, main problem was, user can delete this format accidently. Its not permanent. Thanks for sharing Sep 16, 2013 at 12:10
0

You'll want to hook into TinyMCE's save process, using the provided save_callback.

This will allow you to specify a function which will be called before TinyMCE completes it's save, allowing you to inject content.

A simple example, using jQuery to handle the div insertion:

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

If you need to ensure the div exists inside of TinyMCE at all times, and that the user cannot delete it, you'll want to use the noneditable_regexp option.

Through this property, you can provide a regular expression, which, when matched by TinyMCE, will reject any attempts by the user to alter it.

6
  • This doesn't stop the user from editing or removing the outer divs though.
    – Moshe Katz
    Mar 15, 2013 at 3:53
  • Added a note for that use case. Do you need sample code? I hate writing regular expressions :D
    – Jack Shedd
    Mar 15, 2013 at 3:57
  • Interesting... TinyMCE seems to have a "left hand/right hand" problem. Just this minute, I was reading the documentation for the "noneditable" plugin. However, it looks like the demo at tinymce.com/tryit/noneditable_content.php and the documentation at tinymce.com/wiki.php/Plugin:noneditable are not the same.
    – Moshe Katz
    Mar 15, 2013 at 4:16
  • This wrapper should be undeletable while using tinymce. And i dont need it while saving, i need it while using. Mar 15, 2013 at 12:33
  • I looked into it. Basically i can delete all things even noneditable_regexp Mar 15, 2013 at 18:40

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.