Copy&Paste content into TinyMCE input results in bloated HTML - php

Question

I use TinyMCE for various projects. The problem I'm having ATM is that a lot of users copy&paste content form sources like Word or OpenOffice into the TinyMCE input. This results often in bloated code (e.g. things like <span lang="EN-GB"> being taken over from OpenOffice). TinyMCE's cleanup doesn't seem to remove those tags. Is there a way to strip all formating befor the text is pasted into the TinyMCE input area? Or is there another way to prevent such bloated code, for example by filtring it server side with PHP?

Answer 1

I know this is an opd question but for the benefit of others who may be searching for an answer to this (like I was!), TinyMCE now includes the ability to control what is pasted into the textbox.
In the init call, add the "paste" plugin and then set whatever options you require, e.g.
tinyMCE.init({
...
plugins: "paste",
paste_auto_cleanup_on_paste : true,
paste_remove_styles: true,
paste_remove_styles_if_webkit: true,
paste_strip_class_attributes: "all",
paste_remove_spans : true,
...
});
You can see all options in the tinyMCE wiki

Answer 2

I remove all tags using the followingc function on_preprocess:
strip_tags = function (str, allowed_tags) {
var key = '', allowed = false;
var matches = []; var allowed_array = [];
var allowed_tag = '';
var i = 0;
var k = '';
var html = '';
var replacer = function (search, replace, str) {
return str.split(search).join(replace);
};
// Build allowes tags associative array
if (allowed_tags) {
allowed_array = allowed_tags.match(/([a-zA-Z0-9]+)/gi);
}
str += '';
// Match tags
matches = str.match(/(<\/?[\S][^>]*>)/gi);
// Go through all HTML tags
for (key in matches) {
if (isNaN(key)) {
// IE7 Hack
continue; }
// Save HTML tag
html = matches[key].toString();
// Is tag not in allowed list? Remove from str!
allowed = false;
// Go through all allowed tags
for (k in allowed_array) { // Init
allowed_tag = allowed_array[k];
i = -1;
if (i != 0) { i = html.toLowerCase().indexOf('<'+allowed_tag+'>');}
if (i != 0) { i = html.toLowerCase().indexOf('<'+allowed_tag+' ');}
if (i != 0) { i = html.toLowerCase().indexOf('</'+allowed_tag) ;}
// Determine
if (i == 0) { allowed = true;
break;
}
}
if (!allowed) {
str = replacer(html, "", str); // Custom replace. No regexing
}
}
return str;
};
In the tinymce init i place
paste_preprocess : function(pl, o) {
// remove Clipboard header on MAC
var pos_sel = o.content.search("EndSelection:");
var pos_fra = o.content.search("EndFragment:");
var mac_header_found = false;
if (o.content.search("Version:") == 0 && pos_sel < 135 && pos_sel > 120){
o.content = o.content.substring(pos_sel+23);
mac_header_found = true;
}
else if (o.content.search("Version:") == 0 && pos_fra < 80 && pos_fra > 75){
o.content = o.content.substring(pos_fra+23);
mac_header_found = true;
}
// Copy from Word oder OpenOffice (MAC) - remove header
if (o.wordContent || mac_header_found) {
// first style tag + content to be removed
var pos_start_style = o.content.search('<style');
var pos_end_style = o.content.search('</style>');
if (pos_start_style > 0 && pos_end_style > pos_start_style) {
o.content = o.content.substring(0, pos_start_style).concat(o.content.substring(pos_end_style + 8));
}
// complete Worddokument gets pasted
else {
var pos_start_p = o.content.search('<p');
if (pos_start_p) o.content = o.content.substring(pos_start_p);
}
}
o.content = ir.im.strip_tags( o.content, '' );
// NO-Break Zero-width space if empty
if (o.content == '') {
o.content = '';
}
},