如何修改AngularJS自定义指令与ng-ckeditor适配CKEditor 4.24.0

1. 调整CKEditor加载方式 #

CKEditor 4.24.0默认启用ES模块模式，而AngularJS依赖全局CKEDITOR对象，需切换到全局UMD加载：

• 确保引入的是CKEditor 4的UMD版本脚本（而非ES模块版本），加载后全局会暴露CKEDITOR对象。
• 若使用CDN，直接引入标准CKEditor 4.24.0+的ckeditor.js即可，无需额外配置模块加载。

2. 修改自定义指令的实例化逻辑 #

原有指令可能在CKEditor未完全初始化时执行，导致实例创建失败，需调整为等待CKEditor全局对象就绪后再初始化：

angular.module('app').directive('ckEditor', function($timeout) {
  return {
    require: 'ngModel',
    link: function(scope, elm, attrs, ctrl) {
      // 等待CKEditor全局对象就绪
      var initEditor = function() {
        var editor = CKEDITOR.replace(elm[0], {
          // 按需添加4.24.0兼容的配置项，比如ACF配置
          allowedContent: true, // 若需关闭默认内容过滤，可开启（不建议，需自行处理安全）
          // 其他配置如toolbar、plugins等保持原有设置
        });

        // 初始化编辑器内容
        editor.on('instanceReady', function() {
          if (ctrl.$viewValue) {
            editor.setData(ctrl.$viewValue);
          }
        });

        // 同步编辑器内容到AngularJS模型
        editor.on('change', function() {
          $timeout(function() {
            ctrl.$setViewValue(editor.getData());
          });
        });

        // 模型变化同步到编辑器
        ctrl.$render = function() {
          if (editor) {
            editor.setData(ctrl.$viewValue || '');
          }
        };

        // 销毁编辑器，避免内存泄漏
        scope.$on('$destroy', function() {
          if (editor) {
            editor.destroy(true);
          }
        });
      };

      // 检查CKEditor是否已加载完成
      if (window.CKEDITOR) {
        initEditor();
      } else {
        // 监听CKEditor加载完成事件
        document.addEventListener('CKEditorLoaded', initEditor);
      }
    }
  };
});

• 新增$timeout避免AngularJS digest循环异常，替代原来的scope.$apply。
• 添加编辑器销毁逻辑，防止页面切换时内存泄漏。
• 增加CKEditor就绪检查，确保实例化时机正确。

3. 适配CKEditor 4.24.0的安全配置 #

CKEditor 4.24.0强化了内容过滤（ACF）和安全机制，若原有代码依赖宽松的内容规则：

• 如需保留原有编辑权限，可在编辑器配置中明确设置allowedContent或extraAllowedContent，避免默认过滤导致内容丢失。
• 移除原有disableObjectResizing等已废弃的配置项，替换为4.24.0支持的resize_enabled。

4. 修复ng-ckeditor插件兼容问题 #

若使用第三方ng-ckeditor插件，需修改其核心逻辑：

• 插件中依赖CKEDITOR.instances获取实例的代码，需改为通过编辑器实例的name属性或DOM元素关联获取，避免4.24.0中实例管理的变化。
• 插件内的事件绑定需确认兼容CKEditor 4.24.0，比如保留selectionChange等仍支持的事件，但需确保参数传递正确。

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