如何修改CDN加载的CKEditor4中已加载templates插件的模板？

嘿，刚好碰到过类似的需求！当你通过CDN加载CKEditor 4且Templates插件已经自动加载时，完全不用去修改CDN上的插件文件，只需要在初始化编辑器的时候通过配置覆盖或自定义模板即可，具体操作步骤如下：

核心思路 #

CKEditor 4的Templates插件支持通过初始化配置来替换或添加自定义模板，核心是利用templates_addTemplates、templates等配置项来覆盖默认模板集合。

具体操作方法 #

方法1：添加自定义模板组（不替换默认模板） #

如果不想动默认模板，只想新增自己的模板组，可以这么配置：

CKEDITOR.replace('your-editor-id', {
  // 其他编辑器配置...
  // 指定使用自定义模板组
  templates: 'my-custom-templates',
  // 添加自定义模板内容
  templates_addTemplates: {
    'my-custom-templates': {
      // 模板预览图的基础路径，可使用默认插件的图片路径或自定义路径
      imagesPath: CKEDITOR.getUrl('plugins/templates/images/'),
      templates: [
        {
          title: '自定义标题模板',
          image: 'template1.gif', // 预览图文件名，对应imagesPath下的文件
          description: '带自定义样式的标题区块',
          html: '<h2 class="custom-heading">这是我的自定义标题</h2>'
        },
        {
          title: '卡片式内容模板',
          image: 'template2.gif',
          description: '带边框和阴影的内容卡片',
          html: '<div class="content-card"><p>这里是卡片内容</p><span class="card-footer">底部备注</span></div>'
        }
      ]
    }
  },
  // 可选：设置模板插入行为，false为插入到光标位置，true为替换全部内容
  templates_replaceContent: false
});

方法2：完全替换默认模板 #

如果想把默认的Templates插件模板全部换成自己的，可以覆盖默认的default模板组：

CKEDITOR.replace('your-editor-id', {
  // 其他编辑器配置...
  // 使用默认模板组（我们会替换它的内容）
  templates: 'default',
  templates_addTemplates: {
    'default': {
      imagesPath: CKEDITOR.getUrl('plugins/templates/images/'),
      templates: [
        // 这里放你自己的所有模板，会完全替换原来的默认模板
        {
          title: '我的基础段落模板',
          image: 'template-paragraph.gif',
          description: '带行高的标准段落',
          html: '<p style="line-height: 1.6;">这是自定义段落内容</p>'
        }
      ]
    }
  }
});

方法3：通过外部模板文件加载（适合大量模板） #

如果你的模板很多，可以把模板内容单独写成一个JS文件，然后通过templates_files配置加载：

1. 新建一个模板文件（比如custom-templates.js），内容格式如下：

CKEDITOR.addTemplates('my-custom-templates', {
  imagesPath: '/path/to/your/images/',
  templates: [
    // 你的模板数组...
  ]
});

2. 初始化编辑器时配置加载这个文件：

CKEDITOR.replace('your-editor-id', {
  templates: 'my-custom-templates',
  templates_files: [
    '/path/to/custom-templates.js'
  ]
});

注意事项 #

• 预览图路径要确保可访问：如果用CKEditor默认的预览图，直接用CKEDITOR.getUrl('plugins/templates/images/')即可；如果是自己的图片，要写对绝对或相对路径。
• 自定义样式需单独引入：模板里用到的自定义CSS类，要在页面的<style>标签或外部CSS文件中定义，或者通过编辑器的contentsCss配置引入，这样编辑器里才能正确显示样式。
• 无需修改CDN文件：所有自定义都通过初始化配置完成，不会受CDN更新影响，也更易于维护。

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