jquery 错误代码:编辑元素冲突

arknldoa  于 2023-04-20  发布在  jQuery
关注(0)|答案(3)|浏览(140)

我在我的Web应用程序中使用CKEditor jquery适配器。编辑器工作正常,但我得到一个控制台错误:

当我参考CKEDITOR dev错误文档时。它解释了错误,但没有给予解决方案。我不希望在我的代码中有错误,即使它可以工作。

cld4siwp

cld4siwp1#

我找到了一个解决方案。你必须在DOM加载时初始化CKEditor Textarea。
由于CKEditor适配器使用JQuery。下面的代码可以工作。

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

6ie5vjzr2#

这个错误的主要原因之一是在目标文本区域上使用了“ckeditor”类,然后再次使用js。如果你需要通过js在ckeditor示例上添加额外的配置,那么就从文本区域中删除“ckeditor”类。

iyr7buue

iyr7buue3#

当我为我的Laravel with Livewire项目设置时发生了这个错误:

<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>

这个错误发生在我身上的原因是,因为我在textarea上有一个类“ckeditor”。删除它解决了这个问题。

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

相关问题