0

When users cut content from outside sources, like a MS Word doc or another web page, then post that content into the Wordpress WYSIWYG editor, it also pastes a ton of bloated formatting code that skews the format of the published post.

I'm looking for a plugin that addresses this.

If there's no plugin available, I'd have to build one. The best option I can think of is to use javascript/jQuery to strip the formatting before the post is submitted. I would likely use keyUp() and keyDown() to catch the new content as it's pasted.

Step 1: Save cursor position upon keyDown()

Step 2: Save cursor position upon keyUp()

Step 3: Use regex to strip formatting from everything between keyUp and keyDown.

This would allow me to operate exclusively on the freshly pasted content while keeping the formatting the user has previously created via the WYSIWYG.

Though it seems using Javascript/jQuery to record cursor positions within a string is more complicated than I would've expected.

Preferably, I like suggestions for a plugin that is ready to go. But if not, are there any tips on what functions I should use to catch these cursor positions?

Brandon Buster
  • 77
  • 2
  • 10

2 Answers2

0

There are several resources available at your disposal that already include this functionality. My choice is to use CKEditor for Wordpress. There's a specific button to press when you want to paste from a program like Microsoft Word

You can try out a Demo of CKEditor Here and you can see the functionality live. The Clipboad with the W is what you'll use to copy from Word Processors.

To ensure it's what you want, you can click the 'Source' button to see what was pasted and ensure that there are no extra tags included.

Hope this helps.

Ohgodwhy
  • 49,779
  • 11
  • 80
  • 110
  • Thanks for the quick reply. Though I'm looking for something to works behind the scenes, so that I don't have to rely on users following instructions. I wouldn't be surprised if users overlooked the paste options or got confused by which of the three options to use. I'll look a bit deeper into the configurations and customizations though. If there are any suggestions how to parse out this formatting programatically behind the scenes, I'd appreciate it. – Brandon Buster Jun 02 '12 at 22:14
0

I'd suggest redirecting the paste to a textarea, which will strip all formatting reliably. There are some caveats though. I've covered this in other answers, such as these:

Saving and restoring the caret position/selection is more work than it should be but could be worse. See https://stackoverflow.com/a/5952332/96100, for example.

Community
  • 1
  • 1
Tim Down
  • 318,141
  • 75
  • 454
  • 536
  • Thank you. For finding the cursor point I found this article to be helpful so far: http://stackoverflow.com/questions/2897155/get-caret-position-within-an-text-input-field – Brandon Buster Jun 03 '12 at 14:56
  • @BrandonBuster: That's for textareas and text inputs, not `contenteditable` elements. If you're just looking to capture the pasted plain text content and insert it at the current caret position, saving and restoring the selection range as laid in the answer I linked will do just fine. – Tim Down Jun 03 '12 at 15:12