从 Word 复制到 Wordpress TinyMCE 时替换 HTML 标签

Question

I'm trying to clean as much as I can the HTML code when copying from Word/LibreOffice to Wordpress TinyMCE editor. I'm using this code (in functions.php), slightly adapted from here :

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,strong,em,i,b,h2,h3,h4,h5,h6,ul,li,ol';
    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('align');
    // Return the clean HTML
    args.content = stripped.html();
  }";
  return $in;
}

It works great, but I would also like this function to replace <b></b> and <i></i> tags by <strong></strong> and <em></em> tags. I've tried to play with str.replace, but since I'm new to Javascript I can't figure out a nice way to replace tags like this.

Answer 1

You can configure TinyMCE to convert <b> to <strong> and <i> to <em> in the TinyMCE configuration so you don't need to write code to do this. The setting is:

extended_valid_elements : "strong/b,em/i"

Here is an example in TinyMCE: http://fiddle.tinymce.com/pjhaab

WordPress has hooks for you to include configuration options before TinyMCE is invoked so you can add this instead of trying to pre or post process the content.