Visual Editor Templates

Question

Hi there is anyway to style the visual editor in WordPress. For example if the user selects the page template shop say it loads into the visual editor a preset template which divs and formatted text.

Thanks very much.

Answer 1

Short answer: kinda

The visual editor is the open source Tiny MCE WYSIWYG editor. You can style it however you want (i.e. so that it presents the same colors and fonts as the finished posts and pages) by writing a stylesheet to do so and loading it with the add_editor_style hook.

However, it sounds more like you want to pre-load a template into the visual editor ... and you can't really do that.

The visual editor is meant for rendering the markup of the post or page so you'll see what it looks like and can edit it directly (versus manually editing the code). When you create a new post or page, no content exists to render until you add it.

If you want people working with a preset template (i.e. pre-defined <div> elements and pre-formatted text) I would recommend one of two different approaches.

Custom Post Types

Create a custom post type and use post meta to load content into these pre-defined sections. This allows you to keep complete control over the display in the template itself and let the post/page author focus on the content alone.

Add a Meta Box

Alternatively, you can add a custom meta box to your post/page edit screen (for the template in question) that lists out your pre-defined <div>s and formatted text. Then authors can easily copy-paste the pre-written content into the editor.

Answer 2

When i have clients that need different templates in the editor i use TinyMCE Templates plugin http://wordpress.org/extend/plugins/tinymce-templates/ Its the easier way