1

I have draggable objects, and each content of an object can be editable. Here is a sample: http://jsfiddle.net/ashish41191/UH9UE/366/

The problem is when I type some words initially in an object, let's say the text is test for copy paste action. This is enclosed in a DIV <div> content </div>. If I select all of the typed words (ctrl + A or cmd + A) then paste it on the same text field, the pasted texts are not appended on the DIV. It rather creates a <span> copy paste words </span> inside the DIV. Can it be just appended on the DIV, like <div> content copy paste words </div>?

Earl Bunao
  • 205
  • 1
  • 5
  • 13
  • I've tried this in Chrome and IE. I'm not getting and div or span when pasting it in the same editable div, also not in other applications. – KoalaBear Feb 28 '14 at 11:58
  • http://prntscr.com/2wk4em This is what I'm getting when I'm copying the text `Object` – Earl Bunao Feb 28 '14 at 12:09
  • Which OS and browser? – KoalaBear Feb 28 '14 at 12:11
  • I'm trying it on Mac OSX with the browser Safari and Chrome. Even in Chrome, it still occurs. – Earl Bunao Feb 28 '14 at 12:15
  • Maybe there is a difference between Windows and Mac OS X with this. Cannot reproduce on Windows, and don't have Mac OS X available. – KoalaBear Feb 28 '14 at 12:23
  • Tried it on Windows OS, it still creates a span. What I've done, I created a box, I highlighted the text `Object`, then copy the text, then paste it. If you inspect element, under `
    ` there are multiple spans.
     – Earl Bunao Feb 28 '14 at 12:30
  • Ah. Inspect. The I'm also getting spans. Then you can do something like this: `var textInside = element.innerText || element.textConent` to get only the text. And what is the problem behind this you are trying to solve? – KoalaBear Feb 28 '14 at 12:42
  • I just want to make the text area to be like a "powerpoint" text field. I could freely edit the text. – Earl Bunao Feb 28 '14 at 12:47
  • Where should I put your code? – Earl Bunao Feb 28 '14 at 12:48
  • It is possible like this, but you need some postprocessing on the 'output' from the div with contenteditable. You 'can' use something like strip_tags (PHP) or [this](http://phpjs.org/functions/strip_tags/) one for Javascript to do this post processing. And specify "br" tag as allowed so you have text with returns, but no formatting. – KoalaBear Feb 28 '14 at 12:54
  • Sorry I can't follow. Could you supply a sample? – Earl Bunao Feb 28 '14 at 12:58
  • The place where you want to save all this, you are going to get all the contents of the contenteditable's, including the spans you're not wanting. That is where you might want to remove / strip the spans. – KoalaBear Feb 28 '14 at 13:03
  • Ohh is there a way that if I do the copy paste, it would just append on the `
    append here
    ` and not create spans?     – Earl Bunao Feb 28 '14 at 13:09
  • I guess there isn't a way which will ever work on all browsers. So the best thing you can probably do is use a well known WYSIWYG editor like CKEditor or so. Also read [this](http://stackoverflow.com/questions/16074358/content-editable-text-editors) article on Stack Overflow. Then you can copy text without the HTML as it looks like. – KoalaBear Feb 28 '14 at 13:14

1 Answers1

0

+1 for making me learn a HTML5 feature.

After a research, this is my inference:
HTML5 contentEditable is for Rich Text Editing. So each browser which supports contentEditable has its own way of presenting the style of the pasted content.

For your problem, I could not find a straight forward way to disable the rich text pasting. Below the workaround,

$('body').on('paste', '.ui-widget-content', function (e) {
setTimeout(function() { console.log($(e.target).html($(e.target).text())); }, 100); });

Updated Jsfiddle,

http://jsfiddle.net/UH9UE/372/

Muthukannan Kanniappan
  • 2,080
  • 1
  • 16
  • 18