Member Avatar for Member #46692

Good morning dudes,

I have a little issue, I have a rich text editor but on copy and pasting it retains a lot of the gunk, unwanted fonts classes. It is even worse when copy and pasting from microsoft word. Here are some of the things I want:

  • To remove all unwanted formatting except bold tags, uls, lis, hyperlinks and p tags
  • On paste either, control +v or right click paste, remove formatting (cross platform solution that works on all browsers
  • Is it best to use javascript and PHP for validation? So should I do a double pass and use a PHP function to clean the input?
  • When I save to the database I have limited the content field to 500 chars, but if the user copy and pastes too much text it will drop a closing html tag and thus mess up my form.
  • 3 Contributors
  • 7 Replies
  • 347 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by Member #120589

Dani AI

Generated

Good call on catching paste client-side and using DOMDocument server-side — that two-layer approach is exactly the right pattern. Short workflow: 1) intercept paste and prefer inserting plain text (or a cleaned HTML fragment) so the editor never receives Word cruft; 2) always re-sanitize on the server with a whitelist of tags/attributes; 3) enforce length limits on plain text (not on raw HTML) or use an HTML-aware truncator so tags never get cut mid-stream. This ties to what has started and to ’s whitelisting point; was right that real editors show the techniques you’ll need to replicate.

A minimal client-side paste handler (insert as plain text) stops most problems before they hit your sanitiser:

editor.addEventListener('paste', function(e) {
  e.preventDefault();
  var text = (e.clipboardData || window.clipboardData).getData('text/plain');
  if (document.queryCommandSupported('insertText')) {
    document.execCommand('insertText', false, text);
  } else {
    var sel = window.getSelection();
    if (!sel.rangeCount) return;
    sel.getRangeAt(0).deleteContents();
    sel.getRangeAt(0).insertNode(document.createTextNode(text));
  }
});

Server-side, keep a strict allowlist (b/strong, p, a[href], ul/ol/li, em) and remove style/class/id/onclick. DOMDocument is fine for this; additionally, do not truncate the raw HTML column in the DB. Either increase the field (TEXT) or truncate the serialized HTML safely by walking text nodes and cutting at the Nth character, then serializing so tags remain balanced. Example strategy in PHP: loadHTML, iterate //text() nodes counting characters, trim the node where the limit is reached, remove subsequent nodes, then saveHTML.

Quick troubleshooting tips: validate hrefs (no javascript:), strip comments and meta/office namespaces, test with many Word/Pages/Docs variants, and log clipboardData types during development.

Recommended Answers

All 7 Replies

Member Avatar for pritaeas

I have a rich text editor

Which one?

Member Avatar for Member #46692

My own, I can send you the files if needed?

Member Avatar for pritaeas

Why don't you check how an editor like TinyMCE does it?

Removing formatting can be a pain, it could be HTML, XML or RTF.

Member Avatar for Member #46692

Not looked at that editor, the source code could be a minefield. Any other ideas.

Member Avatar for Member #46692

I ended up using

Which looks very good.

To detect copy and paste I am using:

http://www.mkyong.com/jquery/how-to-detect-copy-paste-and-cut-behavior-with-jquery/

And finally, I'm using PHP dom document to strip id and classes.

http://stackoverflow.com/questions/3026096/remove-all-attributes-from-an-html-tag

I just need a way to hook this all in to my rich text fields so I don't repeat the code.

Thanks for the help.

Member Avatar for Member #120589

I'm assuming that this is a javascript issue? You wouldn't use php to clean pasted input before you passed it "from the editor to the server" would you?

Anyway, sanitizing tags is impt in php to ensure no script tags etc are included. Whitelisting tags may be a way of doing it.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.