Vue.js中CKEditor 5自定义按钮引发Link/Table插件样式异常求助

我之前在Vue项目中从源码集成CKEditor5时也碰到过完全一样的问题——自定义按钮能正常输出日志，但Link、Table这类插件的弹窗直接跑到页面底部，完全没法正常使用。折腾好一阵才找到根源，下面是具体的解决方案：

核心原因 #

这个问题本质是CKEditor5的UI组件样式没有被正确加载。CKEditor5的弹窗（比如链接输入框）依赖于.ck-editor容器的相对定位规则，以及@ckeditor/ckeditor5-ui提供的全局样式来计算弹窗位置。当你引入自定义插件里的ButtonView时，触发了更多UI组件的初始化，但缺失的样式直接导致定位逻辑彻底失效。

分步解决方案 #

1. 安装默认主题依赖 #

你的package.json里没有列出官方默认主题，大概率是漏装了，先补上：

npm install @ckeditor/ckeditor5-theme-lark --save

2. 导入必要的CKEditor样式 #

在你的Vue组件（或项目入口文件main.js）中导入CKEditor的核心UI样式和经典编辑器样式：

// 在组件的script标签顶部添加
import '@ckeditor/ckeditor5-ui/theme/globals.css';
import '@ckeditor/ckeditor5-editor-classic/theme/classiceditor.css';

也可以通过CSS方式导入：

<style scoped>
@import '@ckeditor/ckeditor5-ui/theme/globals.css';
@import '@ckeditor/ckeditor5-editor-classic/theme/classiceditor.css';
/* 你的其他组件样式 */
</style>

3. 检查并修正vue.config.js配置 #

确保webpack正确处理CKEditor的样式和资源，以下是标准配置模板：

const CKEditorWebpackPlugin = require('@ckeditor/ckeditor5-dev-webpack-plugin');
const { styles } = require('@ckeditor/ckeditor5-dev-utils');

module.exports = {
  configureWebpack: {
    plugins: [
      // 处理CKEditor语言包和资源
      new CKEditorWebpackPlugin({
        language: 'zh-cn', // 替换成你需要的语言
        addMainLanguageTranslationsToAllAssets: true
      })
    ],
    module: {
      rules: [
        // 处理CKEditor的SVG图标
        {
          test: /ckeditor5-[^/]+\/theme\/icons\/[^/]+\.svg$/,
          use: ['raw-loader']
        },
        // 处理CKEditor的CSS样式，确保主题样式被正确注入
        {
          test: /ckeditor5-[^/]+\/theme\/.+\.css$/,
          use: [
            {
              loader: 'style-loader',
              options: {
                injectType: 'singletonStyleTag'
              }
            },
            {
              loader: 'postcss-loader',
              options: styles.getPostCssConfig({
                themeImporter: {
                  themePath: require.resolve('@ckeditor/ckeditor5-theme-lark')
                },
                minify: true
              })
            }
          ]
        }
      ]
    }
  }
};

如果项目里没有raw-loader，需要先安装：

npm install raw-loader --save-dev

4. 调整插件配置（可选） #

虽然你的extraPlugins写法没问题，但有时候把自定义插件直接放到plugins数组里能避免潜在的加载顺序问题，可以试试：

editorConfig: {
  plugins: [
    EssentialsPlugin,
    BoldPlugin,
    LinkPlugin,
    MyCustomPlugin // 直接加入plugins数组
  ],
  toolbar: {
    items: [
      'bold',
      'link',
      'myCustomPlugin'
    ]
  }
}

验证 #

完成以上步骤后重启开发服务器，测试Link插件的弹窗——应该会正常显示在编辑器上方的正确位置，自定义按钮的功能也不会受影响。

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