Ask your WordPress questions! Pay money and get answers fast! Comodo Trusted Site Seal
Official PayPal Seal

WYSIWYG - Better End User Experience Needed - TinyMCE WordPress

  • SOLVED

Wanting to make a better end user experience when editing Post/Pages in the TinyMCE WYSIWYG editor. Would like for the user to be able to see what the post/page is truly going to look like with styles applied right in the editor.

I know of the function: add_editor_style();
Which does help make the editor look like the post by using editor-style.css

The two plugins that I see are probably the best ones are:
http://wordpress.org/extend/plugins/tinymce-advanced/
http://wordpress.org/extend/plugins/ultimate-tinymce/


Which one of these truly allows you to add custom css styles to the "Styles" dropdown in the editor?

Then how and where would you add the css styles that show up in the dropdown?




Answers (7)

2012-01-18

Grégory Viguier answers:

For the cache problem (very annoying), add a version number at the end of the url like this:
add_editor_style('editor-style.css?v=1.1');
When you make changes to your css file, change your version number in the url, that's it.


69developer comments:

For some reason, in IE 9, that dosnt work. Works ok in Firefox.

2012-01-18

Daniele Raimondi answers:

Hello, I usally use tinymce-advanced and add my stylesheets and styles like this:

<strong>1)</strong> Install tinymce-advanced and add Style dropdown to your tinymce toolbars

<strong>2)</strong> To add a stylesheet to every istance of your tinymce, open your theme functions.php file and add this code:

//load editor-styles.css in tinymce
add_editor_style('css/editor-styles.css');


remember to adjust the path and filename to your custom css file (path is relative to your theme folder)

<strong>3)</strong> To add some styles in the Style dropdown, add this code (to your theme functions.php):

add_filter('tiny_mce_before_init', 'myCustomTinyMCE' );
/* Custom CSS styles on TinyMCE Editor */
if ( ! function_exists( 'myCustomTinyMCE' ) ) {
function myCustomTinyMCE($init) {
$init['theme_advanced_styles'] = 'Style-01-name=css-01-identifier; Style-02-name=css-02-identifier; Style-03-name=css-03-identifier';
return $init;
}
}


where:
- <em>Style-XX-name</em> is one of the option users can choose from in the styles dropdown
- <em>css-XX-identifier</em> is the relative class name that will be added to the selected dom element.
Obviously you can go further and add as many classes you want, using ";" as separator.

<strong>4)</strong> Insert in css/extra-editor-styles.css all css code relative to all classes you have defined at point 3) and all the defined custom styles will be applied directly in the editor textarea

An example of one of my editor-styles.css can be found [[LINK href="http://pastebin.com/FWLgnd7Y"]]here[[/LINK]].

Note that I include all css external files (if it's the case) already included in my theme css file just to be sure all elements render the same on frontend and in tinyMCE editor.
Also note that generaly speaking, I usually take all styles defined for the <em>.content</em> div (the one holding all my WP contents on templates file) and below, and "translate" <em>.content</em> in to <em>body.mceContentBody</em>, i.e. the main container in the tinyMCE editor window.

For example, if my theme css includes something like this:

.content p.important {
font-weight: bold;
color: #F00;
}

my tinymce custom css should contain the same translated like this:

body.mceContentBody p.important {
font-weight: bold;
color: #F00;
}





A little addition I've coded recently that can be useful: if you have several page templates with different styles, this code can auto-includes (if it exists) a css relative to every page template in tinymce.

If page template filename is <em>page-something.php</em>, it looks for <em>TEMPLATEPATH/css/editor-style-page-something.css</em>.
Obviously it can be extended to take in account <strong>taxonomies </strong>or particular <strong>post ids</strong> etc, as it globalizes <em>$post</em> so you can extract all informations you need.
Here is the code, hope it can be useful:

/**
* add_tinymce_custom_styles()
*/
add_filter( 'mce_css', 'add_tinymce_custom_styles' );
function add_tinymce_custom_styles( $url ) {
global $post;
if ( isset( $post->page_template )){
$pagetemplate = array_shift( explode( '.php', $post->page_template ) );
if ( file_exists( TEMPLATEPATH.'/css/editor-style-'.$pagetemplate.'.css' ) ){
if ( !empty($url) ) $url .= ',';
$url .= trailingslashit( get_stylesheet_directory_uri() ) . 'css/editor-style-'.$pagetemplate.'.css';
}
}
return $url;
}


thanks to Matt and Tyson suggestions [[LINK href="http://matty.co.za/2010/08/more-wordpress-custom-editor-styles/"]]here[[/LINK]]!

2012-01-17

Julio Potier answers:

Hello

i already use the first http://wordpress.org/extend/plugins/tinymce-advanced/ for a client site and it works great, what the problem with him ?

See you


Julio Potier comments:

Or you can try this :

Edit your "functions.php" from theme folder and add :
add_editor_style(get_stylesheet_uri() . '/style.css');
This will load the style.css from the current theme.

Doc : [[LINK href="http://codex.wordpress.org/Function_Reference/add_editor_style"]]http://codex.wordpress.org/Function_Reference/add_editor_style[[/LINK]]


69developer comments:

I have that already. But I do not see any additional styles in the 'Styles' dropdown in the TinyMCE editor toolbar.


Julio Potier comments:

<em>@Alberto Hornero Luque Sorry but as Web Security Consultant i do not recommand the use of these 2 plugins. They are vulnerables to some security issues, i tried to contact the author, but vainly at the moment.</em>


69developer comments:

Which 2 plugins are vulnerable?


Julio Potier comments:

CKeditor and FCKeditor, the ones who Alberto mentioned below.

2012-01-17

Arnav Joy answers:

add following code to functions.php

add_editor_style('custom-editor-style.css');

and then add custom-editor-style.css

in your theme file.


69developer comments:

I have that already. But I do not see any additional styles in the 'Styles' dropdown in the TinyMCE editor toolbar.


Arnav Joy comments:

try this

add_filter( 'tiny_mce_before_init', 'my_custom_tinymce' );

function my_custom_tinymce( $init ) {
$init['theme_advanced_buttons2_add_before'] = 'styleselect';
$init['theme_advanced_styles'] = 'Button=button,Callout Box=callout';
return $init;
}

2012-01-17

Francisco Javier Carazo Gil answers:

Hi 69 developer,

You can also add a CSS to your default TinyMCE:


/*
*
* Adds a filter to append the default stylesheet to the tinymce editor.
*
*/
if ( ! function_exists('tdav_css') ) {
function tdav_css($wp) {
$wp .= ',' . get_bloginfo('stylesheet_url');
return $wp;
}
}
add_filter( 'mce_css', 'tdav_css' );


69developer comments:

I added this but all I see is two styles in the "Styles" Dropdown:
wpGallery
wp-ombed


Francisco Javier Carazo Gil comments:

You can create your own CSS and select it then.

2012-01-17

Alberto Hornero Luque answers:

69developer,

I recommend you to try CKeditor, is a complete rewrite of FCKeditor and its official successor. You can try a demo [[LINK href="http://ckeditor.com/demo"]]here[[/LINK]].

The [[LINK href="http://wordpress.org/extend/plugins/ckeditor-for-wordpress/"]]plugin for wordpress[[/LINK]] it is very easy to install and manage. If you need help, please tell me.

Kind regards.

2012-01-17

She Codes answers:

1. Install Tinymce Advanced plugin. Then go to Settings > TinyMCE Advanced and add "Styles" to your buttons.

2. Add to your functions.php:
add_action('after_setup_theme', 'my_theme_setup');
function my_theme_setup() {
add_editor_style();
}


3. Create in your theme folder editor-style.css and paste inside all the styles that you want to be available in the Styles dropdown.


She Codes comments:

Important: When adding styles to editor-style.css, do not add the container (in your site), so no:

.container .class {
...
}


only

.class {
...
}


69developer comments:

It appears that option is not there (Advance Options) in the latest version.


She Codes comments:

I have the latest version of both wordpress and the plugin and there is a style dropdown that can be added to the buttons of your editor