Question

WP 3.9.1 TinyMCE 4.x

I'm using wp_editor() in the frontend of my website. The problem is that when a user pastes some content with styles(bold, color ...) it appears in the tinyMCE4 editor.

How can I prevent styles from being pasted? I just want the text to be pasted.

Here is the code:

First, the tiny_mce_before_init filter:

function mytheme_job_tinymce_settings( $in ) {

    $in['remove_linebreaks'] = true;
    $in['gecko_spellcheck'] = false;
    $in['keep_styles'] = false;
    $in['accessibility_focus'] = true;
    $in['tabfocus_elements'] = 'major-publishing-actions';
    $in['media_strict'] = false;
    $in['paste_remove_styles'] = true;
    $in['paste_remove_spans'] = true;
    $in['paste_strip_class_attributes'] = 'all';
    $in['paste_text_use_dialog'] = false;
    $in['wpeditimage_disable_captions'] = true;
    $in['plugins'] = 'tabfocus,paste';
    $in['wpautop'] = false;
    $in['apply_source_formatting'] = false;
    $in['toolbar1'] = 'bold,italic,underline,strikethrough,bullist,numlist,hr,alignleft,aligncenter,alignright,undo,redo ';
    $in['toolbar2'] = '';
    $in['toolbar3'] = '';
    $in['toolbar4'] = '';

    return $in;

}

add_filter( 'tiny_mce_before_init', 'mytheme_job_tinymce_settings' );

Then wp_editor() in frontend (page template):

wp_editor( stripslashes( $profile ) , 'profile', array(
    'textarea_name'    => 'profile',
    'textarea_rows'    => 12,
    'media_buttons'    => false,
    'teeny'            => false,
    'editor_css'       => '<style>.mce-path { display: none !important; } </style>',
    'tinymce'          => array(
        'content_css' => MYTHEME_URI . '/assets/css/editor-styles.css'
    ),
    'quicktags'        => false,
    'dfw'              => false,
    'drag_drop_upload' => false
) );

Any ideas?

Was it helpful?

Solution

Solution found at https://stackoverflow.com/a/17421926/1109380:

function tinymce_paste_as_text( $init ) {
    $init['paste_as_text'] = true;

    // omit the pastetext button so that the user can't change it manually, current toolbar2 content as of 4.1.1 is "formatselect,underline,alignjustify,forecolor,pastetext,removeformat,charmap,outdent,indent,undo,redo,wp_help"
    $init["toolbar2"] = "formatselect,underline,alignjustify,forecolor,removeformat,charmap,outdent,indent,undo,redo,wp_help";

    return $init;
}
add_filter('tiny_mce_before_init', 'tinymce_paste_as_text');

OTHER TIPS

You can force the user to paste without styles. I've done some adjusting from the Codex:

function my_format_TinyMCE( $in ) {
    $in['remove_linebreaks'] = false;
    $in['gecko_spellcheck'] = false;
    $in['keep_styles'] = false;
    $in['accessibility_focus'] = true;
    $in['tabfocus_elements'] = 'major-publishing-actions';
    $in['media_strict'] = false;
    $in['paste_remove_styles'] = true;
    $in['paste_remove_spans'] = true;
    $in['paste_strip_class_attributes'] = 'none';
    $in['paste_text_use_dialog'] = true; // this is the one you REALLY want! 
    $in['wpeditimage_disable_captions'] = true;
    $in['plugins'] = 'tabfocus,paste,media,fullscreen,wordpress,wpeditimage,wpgallery,wplink,wpdialogs,wpfullscreen';
    $in['content_css'] = get_template_directory_uri() . "/editor-style.css";
    $in['wpautop'] = true;
    $in['apply_source_formatting'] = false;
    $in['toolbar1'] = 'spellchecker,wp_fullscreen ';
    $in['toolbar2'] = 'pastetext,removeformat,charmap,undo,redo,wp_help ';
    $in['toolbar3'] = '';
    $in['toolbar4'] = '';
    return $in;
}
add_filter( 'tiny_mce_before_init', 'my_format_TinyMCE' );

Untested, but you can see the defaults here: http://codex.wordpress.org/TinyMCE

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top