CODEWITHSUNDEEP
javascriptjqueryhtmlckeditor
Nafiu Lawal
Nafiu Lawal

Reputation: 466

CKEDITOR Error code: editor-element-conflict

I'm using the CKEditor jquery adapter in my web application. The editor works alright but I get a console error:

CKEditor console error

When I refer to the CKEDITOR dev error docs. It explains the error but it does not give a solution. I do not want to have errors in my code even if it works.

Upvotes: 8

Views: 17772

Answers (3)

Thom Kok
Thom Kok

Reputation: 15

This error occurred when I had this setup for my Laravel with Livewire project:

<form wire:submit.prevent="saveAssignment">
    <script src="//cdn.ckeditor.com/4.18.0/standard/ckeditor.js"></script>
    
    <div wire:ignore>
         <label for="blog_text">Blog</label>
         <textarea id="blog_text" class="ckeditor form-control" wire:model="blog_text" required autofocus>{{$assignment->blog_text}}</textarea>
    </div>
    
    <script>
         const editor = CKEDITOR.replace('blog_text');
    
         // Listens when textarea is changing.
         editor.on('change', function(event) {
              console.log(event.editor.getData());
    
              // Update wire:model value.
              @this.set('blog_text', event.editor.getData());
         });
    </script>
</form>

The reason why this error happened to me is, because I had "ckeditor" as a class on my textarea. Removing it solved this issue.

<textarea id="blog_text" class="form-control" wire:model="blog_text" required autofocus>{{$assignment->blog_text}}</textarea>

Upvotes: 0

Awad Haj
Awad Haj

Reputation: 629

One of the main causes of this error is using the "ckeditor" class on the targeted textarea and then use js again. If you need to add extra configuration on the ckeditor instance through js then remove the "ckeditor" class from the textarea.

Upvotes: 3

Nafiu Lawal
Nafiu Lawal

Reputation: 466

I found a solution. You have to initialize the CKEditor Textarea on DOM load.

Since the CKEditor adapter uses JQuery. The code below works.

$(window).on('load', function (){
    $( '#ckeditor-textarea' ).ckeditor();
});

Upvotes: 5

Related Questions