在jquery中添加多个CKEditor实例

Posted 2021-04-11

我正在尝试各种WYSIWYG javascript文本区域。如果我尝试用jquery在我的屏幕上的每个<textarea>上放置一个CKEditor，编辑器都显示正常，但他们不保存。我试过了：

$(function() {
$('.editors').ckeditor();
});

和

$(function() {
$('.editors').each(function(index, element){
    $(element).ckeditor();
});
});

在这两种情况下，每个文本区域都有一个CKEditor，但它不会保存。如果我手动添加所有编辑器

$(function() {
CKEDITOR.replace('contactText');
CKEDITOR.replace('edit_footer_text');
CKEDITOR.replace('termsText');
});

要么

$(function() {
$('#contactText').ckeditor();
$('#edit_footer_text').ckeditor();
$('#termsText').ckeditor();
});

这三个领域都有编辑，他们保存。

我试图在这个项目的标准模板中加入一些代码，这样如果我们想要文本区域的编辑器，他们只需要为它们添加类“编辑器”，这就是为什么我在寻找jQuery解决方案。这确实适用于tinymce：

$(function() {
     $('.editors').tinymce({
           script_url : '/common/tiny_mce/tiny_mce.js',
               // General options
               mode : "textareas",
              theme : "advanced",
         })
});

答案

实际上，jQuery Adapter for CKEditor，默认情况下不更新表单元素，您需要用当前id替换编辑器。

$(function() {
$('.editors').each(function(){
    CKEDITOR.replace( $(this).attr('id') );
});
});

Reference