can not fire CK editor on second or third dropped dynamic element - CkEditor

Question

I checked all the solutions online but can't fix it.

I am working on a kind of CMS where I drag and drop HTML widgets into the DOM and I need to apply CK Editor to the dynamically generated elements but I'm facing some issues here.

Here's the code which fires when a widget is dropped:

  //Triggered when an accepted draggable is dropped on the droppable
            drop: function (event, ui) {

//dropable Template here is complete HTML content
 var DropableTemplate = ui.draggable.attr("data-template");

//appending to event target
$(event.target).after(DropableTemplate);

// getting the editable [p] content from it
  var elementforCkEditor = $(event.target).find('p');

//I found this solution online 

                var i;
                for (i = 0; i < elementforCkEditor.length; i++) {
                    CKEDITOR.inline(elementforCkEditor .get(i))
                    delete CKEDITOR.instances['editor1'];
                }

It works Okay for the first time, but when I drop a second dynamic element, It doesn't fire CK editor on that.

it shows the editor a little far from the actual element, in this case, a paragraph

is this the right solution for this particular case? if yes how can I fix that?

I tried .replace, .editable but they don't happen to work.

Answer 1

elementforCkEditor.get(0)

In the above statement, you get the first element of the JQuery selection.

Few things to focus on

CKEditor expects the editable element to contain the attribute contenteditable=true

Also, there are permitted number of elements to be editable via CKEditor.

Please see here for those.

This is a very good source you can learn particularly about your case.

Note that you can pass the element id too to the CKEditor.

CKEDITOR.inline( 'my-id', {
    startupFocus: true
} );