如何向CKEditor文本域插入数据？出现实例未定义错误求解决

问题重现 #

尝试给基于CKEditor的textarea设置数据时，抛出错误：

TypeError: Cannot read properties of undefined (reading 'editor')

相关HTML代码：

<div class="col-md-12">
  <a class="btn btn-primary pull-right" id="nextdiv">
    <i class="fa fa-plus"></i>
  </a>
  {!! Form::label('content', __('lang_v1.content') . ':*') !!}
  <div id="editor-container">
    <div class="printableArea ck-editor__editable_inline">
      {!! Form::textarea('content[]', null, [
          'class' => 'form-control editor updateEditor',
          'placeholder' => __('lang_v1.content'),
          'id' => 'editor',
      ]) !!}
    </div>
  </div>
  <div id="container"></div>
</div>

相关JS代码：

$(".template").on('change', function() {
  $.ajax({
    url: '/get/template/data/' + templateId,
    type: 'GET',
    success: function(response) {
      console.log(response.content)
      CKEDITOR.instances['editor'].setData(response.content);
    }
  )}
}

错误原因分析 #

• CKEditor未初始化目标元素：代码中没有调用CKEditor的初始化方法（如CKEDITOR.replace()），导致CKEDITOR.instances中不存在editor实例。
• HTML结构冲突：手动给textarea的父div添加了ck-editor__editable_inline类，这个类是CKEditor内联编辑模式自动生成的，会和针对textarea的替换模式产生冲突。
• JS语法错误：AJAX调用的括号闭合错误（$.ajax({ ... )}应为$.ajax({ ... })），且缺少事件绑定的闭合});，导致代码执行异常。

修复方案 #

1. 修正JS代码语法错误 #

$(".template").on('change', function() {
  // 确保正确获取选中的模板ID
  const templateId = $(this).val();
  $.ajax({
    url: '/get/template/data/' + templateId,
    type: 'GET',
    success: function(response) {
      console.log(response.content);
      // 先检查CKEditor实例是否存在再操作
      if (CKEDITOR.instances['editor']) {
        CKEDITOR.instances['editor'].setData(response.content);
      } else {
        console.error('未找到CKEditor实例，请检查初始化代码');
      }
    }
  });
});

2. 正确初始化CKEditor #

在页面加载完成后初始化目标textarea：

$(document).ready(function() {
  // 初始化CKEditor，替换id为editor的textarea
  CKEDITOR.replace('editor', {
    // 可根据需求添加配置项，例如自定义工具栏
    toolbar: [['Bold', 'Italic', 'Link', 'Unlink']]
  });
});

3. 修正HTML结构，移除冲突类 #

删除手动添加的ck-editor__editable_inline类：

<div class="col-md-12">
  <a class="btn btn-primary pull-right" id="nextdiv">
    <i class="fa fa-plus"></i>
  </a>
  {!! Form::label('content', __('lang_v1.content') . ':*') !!}
  <div id="editor-container">
    {!! Form::textarea('content[]', null, [
        'class' => 'form-control editor updateEditor',
        'placeholder' => __('lang_v1.content'),
        'id' => 'editor',
    ]) !!}
  </div>
  <div id="container"></div>
</div>

验证逻辑 #

完成上述修改后，页面加载时CKEditor会自动替换id=editor的textarea，当模板选择变化时，AJAX请求获取数据后，即可通过CKEDITOR.instances['editor']找到实例并设置内容。

内容的提问来源于stack exchange，提问作者mohammad atif