How can I preserve the formatting of the content within a shortcode block when I switch back and forth between the visual and text editor in TinyMCE? As in, the stuff between [myshortcode] and [/myshortcode]. I am using JSON inside the shortcode.

I've seen the Switch between Visual and HTML tab freely question and the Preserved HTML Editor Markup plugin. The plugin seems good, but I have hundreds of sites and hundreds of clients who own those sites and I don't want to risk messing up their content with the "Fix it" solutions required by that plugin. Really what I'm asking for seems to be special for the content section of shortcode blocks, so I'm hoping for a solution that's 'lighter' than the Preserved HTML Editor Markup plugin.

Here's an example of the 'before', while in text mode:

[myshortcode]
{
    "map": {
        "zoom": 5
    }
}
[/myshortcode]

Now here's an example of switching to the visual mode:

[myshortcode]
{
"map": {
"zoom": 5
}
}
[/myshortcode]

After that, if you switch back to the text mode, you see:

[myshortcode]
{
"map": {
"zoom": 5
}
}
[/myshortcode]

How can I preserve the formatting of the content within a shortcode block when I switch back and forth between the visual and text editor in TinyMCE? As in, the stuff between [myshortcode] and [/myshortcode]. I am using JSON inside the shortcode.

I've seen the Switch between Visual and HTML tab freely question and the Preserved HTML Editor Markup plugin. The plugin seems good, but I have hundreds of sites and hundreds of clients who own those sites and I don't want to risk messing up their content with the "Fix it" solutions required by that plugin. Really what I'm asking for seems to be special for the content section of shortcode blocks, so I'm hoping for a solution that's 'lighter' than the Preserved HTML Editor Markup plugin.

Here's an example of the 'before', while in text mode:

[myshortcode]
{
    "map": {
        "zoom": 5
    }
}
[/myshortcode]

Now here's an example of switching to the visual mode:

[myshortcode]
{
"map": {
"zoom": 5
}
}
[/myshortcode]

After that, if you switch back to the text mode, you see:

[myshortcode]
{
"map": {
"zoom": 5
}
}
[/myshortcode]

• shortcode
• tinymce
• visual-editor
• json
• text

• 1 Please post the code that's getting messed up (maybe even before and after) so people know exactly what's getting messed up. – mrwweb Commented Jul 18, 2014 at 17:39
• @mrwweb good idea; done. – Tyler Collier Commented Jul 18, 2014 at 18:30

1 Answer 1

This is not a direct answer to your question but if you have the option, I would restructure the shortcode so that it takes one or more attributes that you then plug in to the correct JSON format. e.g.:

[myshortcode zoom="5"]

This would not only prevent your site editors from making syntax mistakes (or at least they'd make different ones!) but would probably be a little more structured and secure. For instance, your zoom shortcode attribute could make sure that only numeric values are allowed and could set a sensible default for those that don't set the att with their shortcode:

// [myshortcode zoom={integer}]
function myshortcode_func( $atts ) {
    $atts = shortcode_atts( array(
        // defaults
        'zoom' => 5,
        // etc...
    ), $atts );

    // sanitize!
    $atts['zoom'] = intval( $atts['zoom'] );

    // do lots of fancy JSON things
}
add_shortcode( 'myshortcode', 'myshortcode_func' );