Angular14集成CKEditor5时出现‘Template Invalid License key’错误求助

针对你在Angular14中使用带图片缩放功能的CKEditor5时遇到的许可证密钥错误，以下是具体的排查和解决步骤：

1. 修正licenseKey的配置位置 #

不要单独定义licenseKey变量，必须将其纳入编辑器配置对象中。如果使用开源版本（未涉及商业插件），可以显式设置licenseKey: undefined跳过许可证校验：

editorConfig = {
    licenseKey: undefined, // 开源版本添加此行
    image: {
      styles: [
        'alignLeft', 'alignCenter', 'alignRight'
      ],
      resizeOptions: [
        {
          name: 'resizeImage:original',
          label: 'Original',
          value: null
        },
        {
          name: 'resizeImage:25',
          label: '25%',
          value: '25'
        },
        {
          name: 'resizeImage:50',
          label: '50%',
          value: '50'
        },
        {
          name: 'resizeImage:75',
          label: '75%',
          value: '75'
        }
      ],
      toolbar: [
        'imageStyle:alignLeft', 'imageStyle:alignCenter', 'imageStyle:alignRight',
        '|',
        'ImageResize',
        '|',
        'imageTextAlternative'
      ],
    },
    language: 'en'
 }

注意：你的resizeOptions里有两个resizeImage:50的重复配置，建议修正为resizeImage:25避免冲突。

2. 解决依赖冲突问题 #

你同时安装了官方Classic Build和自定义构建包，这会导致版本冲突。二选一即可：

方案A：改用官方Classic Build #

修改TS文件的导入语句：

import ClassicEditor from '@ckeditor/ckeditor5-build-classic';
  
Editor = ClassicEditor;

方案B：规范自定义构建 #

如果需要自定义构建，确保构建过程未包含商业付费插件，且删除多余的@ckeditor/ckeditor5-build-classic依赖，避免版本混乱。

3. 统一CKEditor5依赖版本 #

确保所有CKEditor5相关依赖版本一致，避免因版本不匹配引发的隐性错误。执行以下命令重新安装依赖：

rm -rf node_modules package-lock.json
npm install

4. 清除Angular缓存 #

缓存可能残留旧配置，执行以下命令清理后重新构建：

ng cache clean
ng build

5. 排查是否启用了商业功能 #

检查你的编辑器配置和依赖，确认没有引入需要商业许可证的插件（如实时协作、PDF导出等），这类功能必须使用有效密钥才能正常运行。

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