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.

//REMOVE STUFF FROM CUT/PASTE VISUAL EDITOR
//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;
}

Comments on this post

No comments.

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Trackbacks and Pingbacks on this post

No trackbacks.

TrackBack URL