Clean Google Doc Cut/Paste into WordPress Editor

If you cut/paste from a Google Doc into the WordPress WYSIWYG editor you get more than I want. Mainly a bunch of inline CSS that sets the font weight (see below). This is a pain because it’s going to take priority in CSS land and undoing it by hand is a hassle.

 	
<li style="font-weight: 400;"><span style="font-weight: 400;">Workshops</span>

Some internet wandering led me to Jonathan Nicol’s fix for some span elements and bit of adjustment allowed me to also deal with the inline CSS elements. The extra nice aspect of this as a fix is that it only applies on paste actions so you can still write the stuff in the HTML editor if you want.

//LETS YOU CONTROL WHAT GETS STRIPPED IN CUT/PASTE TO MCE EDITOR 
//fix cut paste drama from https://jonathannicol.com/blog/2015/02/19/clean-pasted-text-in-wordpress/
add_filter('tiny_mce_before_init','configure_tinymce');

/**
 * Customize TinyMCE's configuration
 *
 * @param   array
 * @return  array
 */
function configure_tinymce($in) {
  $in['paste_preprocess'] = "function(plugin, args){
    // Strip all HTML tags except those we have whitelisted
    var whitelist = 'p,b,strong,i,em,h2,h3,h4,h5,h6,ul,li,ol,a,href';
    var stripped = jQuery('<div>' + args.content + '</div>');
    var els = stripped.find('*').not(whitelist);
    for (var i = els.length - 1; i >= 0; i--) {
      var e = els[i];
      jQuery(e).replaceWith(e.innerHTML);
    }
    // Strip all class and id attributes
    stripped.find('*').removeAttr('id').removeAttr('class').removeAttr('style');
    // Return the clean HTML
    args.content = stripped.html();
  }";
  return $in;
}