Stop TinyMCE stripping empty tags in WordPress – yes I have researched already

Like many other people, I have a problem with TinyMCE stripping HTML tags – specifically the empty ones I’m using with Font Awesome.

I have researched and tried solutions and nothing has worked. I’m not especially strong with PHP, but the problem I’m running into is this: everybody says modifiy the tinyMCE.init function in the tinymce.js file. However being in the newest version of WP, I don’t have that. What I have class-wp-editor.php, wherein lives this:

Read More
            /*
         * For people who really REALLY know what they're doing with TinyMCE
         * You can modify $mceInit to add, remove, change elements of the config
         * before tinyMCE.init. Setting "valid_elements", "invalid_elements"
         * and "extended_valid_elements" can be done through this filter. Best
         * is to use the default cleanup by not specifying valid_elements,
         * as TinyMCE checks against the full set of HTML 5.0 elements and attributes.
         */
        if ( $set['teeny'] ) {

            /**
             * Filter the teenyMCE config before init.
             *
             * @since 2.7.0
             *
             * @param array  $mceInit   An array with teenyMCE config.
             * @param string $editor_id Unique editor identifier, e.g. 'content'.
             */
            $mceInit = apply_filters( 'teeny_mce_before_init', $mceInit, $editor_id );
        } else {

            /**
             * Filter the TinyMCE config before init.
             *
             * @since 2.5.0
             *
             * @param array  $mceInit   An array with TinyMCE config.
             * @param string $editor_id Unique editor identifier, e.g. 'content'.
             */
            $mceInit = apply_filters( 'tiny_mce_before_init', $mceInit, $editor_id );
        }

Now I know I have to do something with valid_elements, or extended_valid_elements, or verify_html, but I don’t know how to do it. I can see from the comments where to put it, but I don’t know which to use or the proper syntax.

I found this fiddle: http://fiddle.tinymce.com/j9baab/1 but like I said I don’t have that function anywhere in WP.

Please help!

Related posts

1 comment

  1. You really don’t want to modify the class-wp-editor.php file as each time you update WordPress it will get overwritten.

    The easiest way to extend/modify the settings of TinyMCE is to build a simple WordPress Plugin and tie into the hooks WordPress provides to change the editor’s settings.

    To solve your particular desire to add options to the init you want to look at
    the 'tiny_mce_before_init' hook. You might do something like this in the plugin:

    add_filter('tiny_mce_before_init', 'add_my_options');
    
    function add_my_options($opt) {   
        // $opt is the existing array of options for TinyMCE 
        // We simply add a new array element where the name is the name
        // of the TinyMCE configuration setting.  The value of the array
        // object is the value to be used in the TinyMCE config.
    
        $opt['extended_valid_elements'] = '*[*]';
        return $opt;
    }
    

    Writing a simple WP plugin is not too hard – there are plenty of examples on the web. For something this simple its really just a single PHP file. Once you have the plugin built you just install and activate it. Once activated, your code is run each time TinyMCE is invoked and your options are injected into the init code.

    EDIT: Here is the code from the OPs comment (easier to read than how the comments are formatted):

    <?php
    /**
     * Plugin Name: Disable TinyMCE Filters
     * Plugin URI: http://mindspyder.com
     * Description: This plugin disables annoying TinyMCE Filters.
     * Version: 1.0.0
     * Author: Brandon Snow
     * Author URI: http://mindspyder.com
     * License: GPL2
     */
     add_filter('tiny_mce_before_init', 'add_my_options');
    
    function add_my_options($opt) {   
        // $opt is the existing array of options for TinyMCE 
        // We simply add a new array element where the name is the name
        // of the TinyMCE configuration setting.  The value of the array
        // object is the value to be used in the TinyMCE config.
    
        $opt['extended_valid_elements'] = '*[*]';
        return $opt;
    }
    ?>
    

Comments are closed.