Load visual editor without custom styling

1 Views

I have a plugin that uses the wp_editor() function to load an instance of the TinyMCE editor.

However, the editor is affected by custom styling to make it look similar to the theme through the add_editor_style() function. While this may be great in giving the user an idea of how the content may look on the front-end, I do not want this as the content will only ever be displayed on the back-end.

Read More

Is there any way to load an instance of the WordPress editor without it being affected by custom styling?

Post Views: 1

Related posts

Leave a Reply

2 comments

  1. While @s_ha_dum’s solution works fine on a custom plugin page, it will fail if you use TinyMCE on a post editor page after the first editor instance has been called, because it would either affect all editors or at least the editors later on the same page. TinyMCE parses custom styles into its settings during the first run only.

    How to remove the custom styles for one editor only?

    Let’s say we replace the excerpt box with a rich editor in a class with static methods only:

    wp_editor(
    self::unescape( $post->post_excerpt ),
    'excerpt', // $editor_id
    array (
    'textarea_rows' => 15
,   'media_buttons' => FALSE
,   'teeny'         => TRUE
,   'tinymce'       => TRUE
,   'first_init' => TRUE
    )
);

    To remove the custom styles for just one special editor ID, we can filter teeny_mce_before_init if we have set 'teeny' => TRUE and tiny_mce_before_init otherwise.

    See _WP_Editors::editor_settings():

    // 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 contains full set of XHTML 1.0.
if ( $set['teeny'] ) {
    $mceInit = apply_filters('teeny_mce_before_init', $mceInit, $editor_id);
} else {
    $mceInit = apply_filters('tiny_mce_before_init', $mceInit, $editor_id);
}

    In this example it is teeny_mce_before_init, and we need a simple helper method:

    public static function no_custom_css( $settings, $editor_id )
{
    'excerpt' === $editor_id and $settings['content_css'] = '';
    return $settings;
}

    Now we register that as callback before we call wp_editor():

    add_filter( 'teeny_mce_before_init', array ( __CLASS__, 'no_custom_css' ), 10, 2 );

    That’s all. Only editors with our ID will get no custom styles now. No untestable side effect, our code stays compatible with other code in all situations.

    enter image description here

  2. I believe you want remove_editor_styles. Looks like it removes the theme support for editor styles.

    remove_editor_styles();

    If you run that on your plugin’s backend page before the editor boots, it should solve the problem. There might be a parameter you can pass to the editor functions, or a hook, but removing the editor style support for the effected page was the first thing that came to my mind.

    Untested and I haven’t done much with editor styles but it seems pretty straightforward.