Copy paste of text from external source into a editable div with editor non-editable throws error.

[senthil]

We use CKEditor with Java for our content management application. We use the editor by default in non-editable mode (only the editor as non-editable, using editor.setAttribute("contenteditable", "false").

But, we provide the user of the application with a DIV(contentEditable = true) placed inside the editor as the only area to provide the data manually or copy and paster from other documents. While the page loads, the editable DIV has a default space present (&nbsp;) with in the DIV tag.If we do "Ctrl + V", some text from external documents(like, word, PDF, etc.,) it is getting copied into the DIV. Incase, if we delete the default space (&nbsp;) and do the paste operation, the content seems to be copied and dis-appears immediately. Only if i try for the 2nd time, the content appears but with an extra <p> tags added (by verifying in the Source) and a javascript error ("type" is null or not an object, l.no: 38 and column.no: 1778) reported. I feel this is an issue, like a dependency present for the default space while pasting the text. Please, provide your suggestions to overcome as we are facing this as an serious issue in our application. Thanks in advance.

[Garry Yao]

We can tell it's not a designed usage scenario of the editor, we recommend you to instead load the editor on demand on any editable section of your application page as demonstrated in our ​div replace sample.

[Jakub Ś]

Can I ask you to provide us with a simplified test case for this issue so that we could check what exactly is the problem. I don't mean piece of Java application but HTML with JS files.
Please send those files to support channel.

About this error have you tired to run CKEditor with ckeditor_source.js to find out where exactly error occurs?

[Jakub Ś]

I have tried to implement your way into CKEditor read-only sample. It worked. I don't get any errors when pasting. The solution itself is simple, maybe even to simple, but perhaps it may give you the clue how to tackle the problem form the other way around.

The basic steps are:

1. Set editor to readonly mode.
2. Disable source-mode button as it is not disabled by read-only mode. You can find info here: ​http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.command.html#disable. This has to be done, because when switching to source mode empty DOM nodes are removed by CKEditor.
3. Provide editable div with some content like the one presented below:

<textarea class="ckeditor" id="editor1" name="editor1" cols="100" rows="10">&lt;div id=&quot;myDiv&quot; contenteditable=&quot;true&quot;&gt; &lt;span style=&quot;color:#ffffff&quot;&gt; &nbsp; &lt;/span&gt; &lt;/div&gt;</textarea>

If span with &nbsp; does’t work in your case you can always paste sample letter in the color of background. It will get removed when content is ready.

4. Remove the contents of editable div.

The whole JS code for this sample is

CKEDITOR.on( 'instanceReady', function( ev )
	{
		editor = ev.editor;
		editor.setReadOnly( true );
		ev.editor.on( 'contentDom', function(){
			CKEDITOR.instances['editor1'].document.getById( 'myDiv' ).setHtml('');
		})
	});

and sample can be found in attachment.

This solution may not be perfect, but I'm posting it as I did not get any errors when pasting text from extarnal editors to empty div.

[senthil]

Replying to j.swiderski:

Can I ask you to provide us with a simplified test case for this issue so that we could check what exactly is the problem. I don't mean piece of Java application but HTML with JS files.
Please send those files to support channel.

About this error have you tired to run CKEditor with ckeditor_source.js to find out where exactly error occurs?

---

Below is the scenario:

1. I have a DIV replaced by CKEditor using standard jquery-1.4.4.js.
2. Set the data of CKEditor with a single empty DIV which has an id = "SENTHILK", contenteditable = "true". This is to restrict the User to enter only in that DIV area.
3. Additon to the above restricted area of DIV, i made the Editor alone to be non-editable using "setAttribute("contentEditable", "false")". So, the User still have all the controls of editor usable for the text that he would enter inside the DIV area.
4. Once the editor gets loaded, we can see a default "space" present in the DIV area.
5. If the USer identifies the space, either he might move the cursor before the space, and try copying a text from external document. By this time, the copied text diappears immediately after pasting (Ctrl + V). Or else, the User might delete the space and try pasting the content. Even by this time, the text disappers.
6. If the User place the cursor next to the space, and try pasting the content, the content can is visible with some javascript errors shown at the status bar.

For your convenience, i have attached a zip file('CopyProblem.zip') which can be used to test this scenario. You can place the html file and the jquery file outside the ckeditor folder and try.

As copy and pasting the text from external source is a major activity in our application, we are blocked at this issue. So, it would be really greatful if we can get some solution from your side.

[senthil]

Test file for copy paste problem in an empty DIV.

[Jakub Ś]

Not a typical use case but I don't think that JS error shouldn’t pop out when pasting.

Reproducible in IE6 and IE7 from CKEditor 3.1.

The JS error is:
Message: ‘type’ is null or not an object
Line: 1514
URI: /ckeditor/_source/core/dom/range.js

[senthil]

Replying to j.swiderski:

Not a typical use case but I don't think that JS error shouldn’t pop out when pasting.

Reproducible in IE6 and IE7 from CKEditor 3.1.

The JS error is:
Message: ‘type’ is null or not an object
Line: 1514
URI: /ckeditor/_source/core/dom/range.js

======================= Iam awaiting for your solution. Is it possible for you to provide any fix (even as a modified js file)? As we really need this to work, we are blocked with this issue.

[Wiktor Walc]

@senthil - I've just checked the attached sample, and after creating a list and adding some content below I ended up with lost initial <div> tag (yup, the div is gone) and such content:

<ul>
	<li contenteditable="true" id="SENTHILK" name="data">
		one</li>
	<li contenteditable="true" name="data">
		two</li>
	<li contenteditable="true" name="data">
		three</li>
</ul>
<p contenteditable="true" name="data">
	Line below</p>

Before trying to dig deeper into this edge case, could you confirm that this is exactly the way how would you like to use CKEditor?

I mean, are you ok with the sample result that I have pasted?

[senthil]

Replying to wwalc:

@senthil - I've just checked the attached sample, and after creating a list and adding some content below I ended up with lost initial <div> tag (yup, the div is gone) and such content:

<ul>
	<li contenteditable="true" id="SENTHILK" name="data">
		one</li>
	<li contenteditable="true" name="data">
		two</li>
	<li contenteditable="true" name="data">
		three</li>
</ul>
<p contenteditable="true" name="data">
	Line below</p>

Before trying to dig deeper into this edge case, could you confirm that this is exactly the way how would you like to use CKEditor?

I mean, are you ok with the sample result that I have pasted?

===================================================

The modified content that you have pasted is the same case which i have already faced, and it turned to be a very big problem for us. So, based on my understanding of its existing behaviour on applying the "Bulleting" / "Numbering" it is making use of the attributes / styles present in the TAG present immediately outside the data (to which we apply the numbering / bulleting). In order to get ride of this, i just introduced a <p></p> tag with in the empty <DIV> (<div name="data" id="SENTHILK" contentEditable="true"><p></p></div>)as avilable in the sample posted by me). With this, iam able to retain the editable DIV with the list appllied. Though this is an issue, we are maily focused on the COPY PASTING of data from external documents into the editable DIV. We really need this to be working without any issues. Please, provide some solution and we are really waiting for this. For your reference, the modified content should be as given below:

---

<div name="data" id="SENTHILK" contentEditable="true"> <ul>

<li>one</li> <li>two</li> <li>three</li>

</ul> <p>

Line below</p>

</div>

---

Please, let me know if you need any other informations.

[Piotrek Koszuliński]

This issue is too general and rather a feature request than a bug report. Also, it's mostly resolved by widgets introduction in CKEditor 4.3. And lastly, Garry was right (comment:1) that it's not a scenario for which CKEditor was designed - it was designed to have one editable and this is limitation which cannot be simply removed. However, thanks to widget it is now possible to have non-editable div with nested editables inside it, but still - nested editables are limited to certain elements (​http://docs.ckeditor.com/#!/api/CKEDITOR.dtd-property-S-editable) to avoid tricky situations (like that with list item).