show div in tinyMCE Wordpress

Question

I know similar questions have been asked here before but this is slightly different from what I've seen.

Because of the need for responsive design these days it has become important that we can place divs with media query css into our content.

I'd like to create a button that inserts divs into the text area of Wordpress pages. I know I could do this with a wordpress shortcode but that's not what I'm after I'd like to see the page layout exactly as it will appear on website page. WP shortcodes tend to cause confusion with clients especially when its to do with layout.

It is possible to add tables to tinyMCE which show up accurately in the editor by unblocking tinyMCE's table button in Wordpress or using a Wordpress plugin I'd like a similar effect with tables.

If I switch to the text tab in WPs edit pages/posts you can add html markup and when you switch back to Visual (using TinyMCE) the divs are visible. But this would be too difficult for most of my clients and therefore not a viable option.

So is it possible to create a tinyMCE button which adds a divs that look the same as it will on the web page? OR Is it possible to show the outcome of WP shortcodes visually in the editor?

Thanks in advance

Neil

Vaibs_Cool Vaibs_Cool · Accepted Answer · 2013-10-16T10:28:36

This

"Section Head=section-head;Sub Section Head=sub-section-head";

...needs to be the value of 'theme_advanced_styles'.

Whereas this

$style_formats = array(
array(
    'title' => 'Column',
    'block' => 'div',
    'classes' => 'col',
    'wrapper' => true
    ),
);

...should be changed to value of 'style_formats' in the TinyMCE settings array.

show div in tinyMCE Wordpress

1 Answers