I am creating visual preview for shortcodes (just like captions). I have don't most of the parts but my preview html is getting broke by the editor when post is saved.

I have investigate it further and will try to give as much information as possible.

Replacing Shortcode

I am replacing shortcode by hooking into BeforeSetContent event. Here is how the event callback looks like

//replace from shortcode to an image placeholder
editor.on('BeforeSetcontent', function(event){

    if ( event.format !== 'raw' ) {
        console.log(event.content);  // log before shortcode replacement
        event.content = replaceShortcodes( event.content );
        console.log(event.content); // log after shortcode replacement


Below are some logs and observation I have made

So, from the log before shrotcode replacement. I have noticed something weird. Take below shortcode for example.

If I have a shortcode like this:

[shortcode attr1="my attr" attr2="my attr 2"]
    a bunch of contents
    <h1>A h1 tag</h1>

In the log it becomes

<p>[shortcode attr1="my attr" attr2="my attr 2"]</p>
<p>a bunch of conents</p>
<h1>A h1 tag</h1>

Notice, how shortcode tag is wrapped with <p></p> tags. I guess somehow line brakes are being added to each line of shortcode that is why <p> tags are being added. But Can't figure out from where!

So, I was curious how content for wp caption looks like. And sure enough caption doesn't have this problem.


[caption id="attachment_205" align="alignnone" width="370"]<img class="size-full wp-image-205" src="http://localhost/l/factory/wp-content/uploads/sites/2/10882100_885482111484562_5965805158604571190_n.jpg" alt="khkjh" height="389" width="370"> khkjh[/caption]

Function for Converting and Restoring Shortcode and Preview HTML (simplified)

These are the function being used for converting and restoring shortcodes.

function replaceShortCodes(content){
     content = content.replace( /\[block([^\]]*)\]([^\]]*)\[\/block\]/g, function( all, attr, con) {
                return html_block( 'block', attr , con); // returns html content
    return content;

    function restoreShortcodes(content ) {

        var $tmp = jQuery('<div>', {
            html: content

        $tmp.find('.content-block').each(function () {
            var $this = jQuery(this);
            var attr = decodeURIComponent($this.data('sh-attr'));
            var content = decodeURIComponent($this.data('sh-content'));
            var shortcode = '[block' + attr + ']' + content + '[/block]';

        content = $tmp.html();
        return content;

Now, How do I prevent tinymce to wrap around <p> tags on shortcode?

  • 3
    Maybe there is something in shortcake source github.com/fusioneng/Shortcake that may be helpful. – gmazzap Jul 2 '15 at 10:51
  • Very interesting indeed! I wish I had it 10 days ago. Lots of custom coding could've been avoided. oh well! :) – Sisir Jul 2 '15 at 11:20
  • Going back to the problem in hand. I am suspecting jQuery replaceWith() perhaps causing the problem. – Sisir Jul 2 '15 at 11:20
  • Honestly: I didn't read all your code ;) FYI shortcacke is a feature plugin, i.e. it may be included in core in future releases... – gmazzap Jul 2 '15 at 11:23

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.