模态框加载CKEditor后无法输入文本的技术问题求助

这种情况我遇到过好几次，通常是因为CKEditor的初始化时机和模态框的渲染生命周期不匹配，或者焦点/层级问题导致的。给你几个针对性的解决方案：

1. 延迟聚焦CKEditor，确保模态框完成渲染 #

模态框显示时，DOM可能还没完全更新，直接操作CKEditor会导致焦点无法正确绑定。可以在模态框显示后延迟一小段时间再聚焦编辑器：

修改你的JS代码，在showsubcatpost函数末尾添加：

// 延迟100ms确保模态框渲染完成，再聚焦CKEditor
setTimeout(function() {
  const editor = CKEDITOR.instances['subcateditor'];
  if (editor) {
    editor.focus();
  }
}, 100);

2. 调整CKEditor的层级，避免被模态框遮挡 #

有时候模态框的遮罩层或容器z-index太高，会覆盖CKEditor的输入区域，导致无法点击。添加以下CSS：

/* 确保CKEditor的编辑区域层级高于模态框 */
.cke_editor_subcateditor {
  z-index: 99999 !important;
}
.cke_inner {
  z-index: 99999 !important;
}

3. 改为在模态框显示后初始化CKEditor #

如果页面加载时就初始化隐藏在模态框里的CKEditor，可能会导致编辑器的事件绑定失效。建议把初始化逻辑移到模态框显示时：

修改HTML（移除页面加载时的CKEditor初始化脚本） #

<input type="button" class="btn" id="addsubcatpost" value="Add new post" ng-click="showsubcatpost()">
<textarea name="subcateditor" ng-model="cat_postcontent" id="subcateditor" rows="10" cols="80">{{postcontent}}</textarea>

修改JS代码 #

$scope.showsubcatpost = function() {
  $scope.cat_title = '';
  $(".urlinks").val('');
  $(".selector-wrapper").html('');
  $(".attached-files").hide();
  $('.image-attachment-preview').html('');
  $('.document-attachment-preview').html('');
  $('.weblink-attachment-preview').html('');
  $('.gdocs-attachment-preview').html('');
  $('.video-attachment-preview').html('');
  $("#addnewsubcatpost").toggle();
  $(".hidediv").hide();

  // 先销毁已存在的编辑器实例，避免重复初始化
  if (CKEDITOR.instances['subcateditor']) {
    CKEDITOR.instances['subcateditor'].destroy();
  }

  // 在模态框显示后初始化CKEditor
  const editor = CKEDITOR.replace('subcateditor', {
    toolbarGroups: [
      {"name": "styles", "groups": ["styles"]},
      {"name": "paragraph", "groups": ["list", "align"]},
      {"name": "basicstyles", "groups": ["basicstyles"]},
      {"name": 'insert', "groups": ['addImage']}
    ],
    removeButtons: 'Underline,Strike,Subscript,Superscript,Anchor,Styles,Specialchar,Format,Image,Flash,Table,HorizontalRule,Smiley,SpecialChar,PageBreak,Iframe,addFile',
    filebrowserUploadUrl: '/admin/categorymanagement/uploadckeditorimages'
  });

  // 编辑器初始化完成后自动聚焦
  editor.on('instanceReady', function() {
    this.focus();
  });
};

4. 检查模态框的tabindex属性 #

如果你的模态框设置了tabindex="-1"，可能会影响焦点的正常获取。可以尝试移除这个属性，或者在聚焦CKEditor时手动设置焦点到编辑器的内容区域。

先从第一个方案开始试，大部分情况下延迟聚焦就能解决问题，如果不行再尝试后面的方法。

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