Kentico 13中如何借助内置Insert Link对话框在CKEditor添加自定义链接

可行方案说明 #

方案1：直接复用Kentico原生Insert Link对话框（优先推荐） #

完全可以在自定义CKEditor插件中直接调用该对话框，Kentico 13.0.44版本内置的CMSPlugins插件已对外暴露了对应的调用API，不需要你自行开发链接选择、关联页面/附件的逻辑，也能保持编辑人员原有的操作习惯：

• 自定义插件的工具栏按钮点击事件中，直接调用CKEDITOR.plugins.cmsplugins.openLinkDialog(editor, callback)方法即可唤起原生插入链接对话框，其中editor为当前CKEditor实例，callback为用户完成链接配置后的回调函数。
• 在回调函数中拿到用户配置的链接地址、打开方式、链接文本等参数后，直接给生成的<a>标签追加你预定义的CSS类（比如custom-btn），再插入到编辑器光标位置即可。
• 如果需要让按钮样式在编辑器内也能预览，把你预定义的按钮CSS规则添加到CKEditor的内容样式表中，对应路径为/CMSAdminControls/CKeditor/content.css（MVC模式下对应你项目中自定义的CKEditor资源目录下的内容样式文件）。

方案2：配置CKEditor自定义样式集（轻量方案，开发成本极低） #

如果不需要单独做工具栏按钮，也可以直接通过配置实现，不需要开发自定义插件：

1. 找到项目中CKEditor的配置文件config.js，添加自定义样式配置：

// 注册自定义样式集
CKEDITOR.stylesSet.add('site_custom_styles', [
  { name: '主按钮链接', element: 'a', attributes: { 'class': 'btn btn-primary' } },
  { name: '次级按钮链接', element: 'a', attributes: { 'class': 'btn btn-secondary' } }
]);
// 应用自定义样式集
CKEDITOR.config.stylesSet = 'site_custom_styles';

2. 编辑人员插入普通链接后，直接在CKEditor的样式下拉框选中对应的按钮样式即可自动套用预设类名。

两种方案都可以满足需求，优先推荐第一种，编辑操作体验和现有流程完全一致，学习成本为0。

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