Forums

How do I add custom stylesheets to TinyMCE? (7 posts)

  1. Llasse
    Member
    Posted 2 months ago #

    I have searched on numerous websites for a solution, but the method seems to change every WP release, and I couldn't find one that works on the newest 2.8.4 release..

    I already added the styleselect-dropdown menu to the TinyMCE editor by adding it to $mce_buttons_2 in wp-admin/includes/post.php however, I don't know how to edit and add the styles that it offers me, which are:
    alignleft
    aligncenter
    alignright
    wp-caption
    wp-caption-dd
    wpgallery

    How can I edit this list to add my own class to be applied (and delete wp-caption etc.)?

  2. Llasse
    Member
    Posted 2 months ago #

    I think I am looking for the equivilant of tiny_mce_config.php or something like that?

  3. hedgehogsbottom
    Member
    Posted 1 month ago #

    I'd be interested to learn this too.

    The web's advice on customizing TinyMCE seems not to make much sense with the WP version of TinyMCE (eg references to modifying tinyMCE.init() are a bit confusing when looking at wp-tinymce.js)

    I'd like to tell TinyMCE where my custom stylesheets are, and have TinyMCE add the styles to the drop down style box.

  4. wicky
    Member
    Posted 1 month ago #

    Yes, me too.

    I like the very simple implementation of TinyMCE, however, when building sites for clients (who have very little technical knowledge), it would be extremely useful to add custom styles, avoiding the need for manually adding classes.

  5. hedgehogsbottom
    Member
    Posted 1 month ago #

    OK - here's a quick and dirty solution, that will likely be overwritten if you upgrade/re-install TinyMCE Advanced.

    Edit the file tinymce-advanced.php, found in plugins/tinymce-advanced/

    Around Line 63, in the code "function tdav_css($wp)"

    add code like this:-

    $wp .= "," . "/wp-content/themes/MyBespokeFolder/MyAdditionalStyles.css";

    Reloading the editor causes the additional styles to appear in the Style dropdown.

    Hope this helps.

  6. farrelley
    Member
    Posted 1 month ago #

    To add your stylesheet to the TinyMCE editor just add this as a filter. you can do this in your functions.php file.

    /*
     *
     *  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' );
  7. gambit37
    Member
    Posted 3 weeks ago #

    I have the same issue and have been trying to fix this for a couple of weeks.

    I tried the code supplied by farrelley which seems to work randomly. Sometimes my styles will appear in the dropdown, sometimes not.

    Is there a definitive way of doing this in Wordpress 2.8+? It seems that all documentation on tinyMCE on the web is now redundant for new versions of Wordpress, as the method for calling and configuring it has changed. I thought about hacking the wp_tinymce.js directly but I opened that file and nearly had a heart attack!

Reply

You must log in to post.

About this Topic