The forum operates in read-only mode. Please head to StackOverflow for support.

Tue, 12/04/2012 - 18:18

estapepe

Joined: 04/12/2012

Posts: 1

Refresh in-line instances.

I'm using CKEditor 4's inline editing feature in a page in wich I dynamically detach, remove, append, reappend and add contenteditable="true" elements to the DOM with jQuery. I have encountered the folowing problems:

The CKEditor inline editing instances in reappended elements doesn't work.
Can't create a CKEditor inline editing instance in newly added elements.
Using the jQuery adapter ($(...).ckeditor()) creates a regular instance, not an inline editing one.
Calling CKEDITOR.inlineAll(); doesn't give new elements an inline editing instance nor repairs the reappended element's ones.

Fri, 12/07/2012 - 10:41

fredck

Joined: 19/01/2007

Posts: 898

Report your issues

Please open tickets for your issues at the CKEditor dev site: http://dev.ckeditor.com/. Be sure to have separate tickets for each issue.

Frederico Knabben
CKEditor Project Lead and CKSource Owner
--
Follow us on: Twitter | Facebook | Google+ | LinkedIn

Sun, 12/09/2012 - 21:54

(Reply to #2) #3

droesler

Joined: 09/12/2012

Posts: 1

Similar issue with updated inline divs

When div containers set with contenteditable="true" are updated from the server and CKEDITOR.inlineAll() is applied the divs are not editable.

If I put a break on that command in Firebug and then click the continue button some of the divs are now editable, but not all.

I'm using prototype 1.7.1 to get the updates from the server.

In the initial page load just before the closing body tag i have
<script type="text/javascript">
CKEDITOR.disableAutoInline = true;
</script>

Dennis

Wed, 02/13/2013 - 19:30

Tyree

Joined: 13/02/2013

Posts: 3

Has there been any resolution

Has there been any resolution to this?

Tue, 03/05/2013 - 04:52

vanvu0901

Joined: 05/03/2013

Posts: 1

Solution

After you append contenteditable="true" elements to the DOM with jQuery, then destroy all existing ckeditor inline and call CKEDITOR.inlineAll to initialize all ckeditor inline.

Good luck

Sat, 03/30/2013 - 18:10

khessels

Joined: 30/03/2013

Posts: 1

Does not work for me...

I have exact the same situation, loading divs that need to be editted, but above solution does NOT work.

Wed, 04/03/2013 - 02:40

dnamarcel

Joined: 03/04/2013

Posts: 1

works for me

the solution where you destroy and inlineAll didnt work for me as well .

but this one worked for me:

delete CKEDITOR.instances[instancename];

var editor = CKEDITOR.inline(document.getElementById(instancename));

not sure how bad it is to use delete instead of using destroy.

Sun, 04/07/2013 - 11:16

mikevrind

Joined: 18/06/2008

Posts: 23

Is there any solution jet for

Is there any solution jet for creating inline editing instances for newly added elements?
I have the same problem and can't find a solution...

Update:
After many search attempts with my friend Google, I came up with the following solution thats works for me (using jQuery). I just copied the most important pieces of code.

var clonedElement = e.parent().parent().clone(true);
        
clonedElement.appendTo('.PageContentContainer');
        
$('div[contenteditable="true"]', clonedElement).each(function(i, editableElement)
{
    CKEDITOR.inline(editableElement);
});

My clonedElement contains a unknown amount of div elements which could be editable, thats why I use a loop.

Hope this helps for someone.

Sun, 04/07/2013 - 17:33

(Reply to #8) #9

reinmar

Joined: 24/08/2012

Posts: 631

It is very wrong to delete

It is very wrong to delete CKEditor instance this way ;) You should use editor.destroy() method instead. So in your case it would be:

CKEDITOR.instances[ instancename ].destroy();
var editor = CKEDITOR.inline( instancename );  // You can pass id directly.

Piotrek (Reinmar) Koszuliński
CKEditor JavaScript Developer
--
CKSource - http://cksource.com
--
Follow CKEditor on: Twitter | Facebook | Google+

Tue, 05/14/2013 - 00:54

(Reply to #9) #10

robypez

Joined: 26/08/2011

Posts: 21

Hey Mike can you help me?

Hey Mike can you help me?

I'm trying to add some editable template into my container with a button but I cannot obtain any result.

<div id="container" class="container_12">
	<div  class="grid_12">
	
	</div>

	<div class="clear"></div>

	<div class="grid_7">
		<div contenteditable="true"></div>
	</div>
	<div class="grid_5">
			div contenteditable="true"></div>
	</div>

	<div class="clear"></div>
		
	<div class="grid_3">
		<div contenteditable="true"></div>
	</div>
	<div class="grid_9">
		<div contenteditable="true"></div>
	</div>
	<div class="clear"></div>
</div>

I want to create a button that add for example this template at the end of my container...

<div class="grid_6">
	<div contenteditable="true"></div>
</div>
<div class="grid_6">
	<div contenteditable="true"></div>
</div>
<div class="clear"></div>

Thank you

Tue, 05/14/2013 - 08:39

(Reply to #10) #11

mikevrind

Joined: 18/06/2008

Posts: 23

What JS are you using to add

What JS are you using to add the template to the end of your container?

Fri, 02/28/2014 - 04:34

(Reply to #11) #12

leoalves

Joined: 28/02/2014

Posts: 1

Another working solution

I also have another working solution. Don't know if is the best one. After I do all my changes in the dom I execute this code. This way is done in the end and not in every change. But this was just my case. Posting here if anyone have the same problem.

destroyEditorInstances();
CKEDITOR.inlineAll();

function destroyEditorInstances() {
   for (var instance in CKEDITOR.instances) {
       CKEDITOR.instances[instance].destroy();
   }

Wed, 04/23/2014 - 10:58

(Reply to #12) #13

alynaloosy345

Joined: 23/04/2014

Posts: 5

Has there been any resolution

Has there been any resolution to this?