Nuxt.js+Vue2移动端CKEditor工具栏适配及横向滚动问题求助

针对Nuxt.js + Vue2项目中CKEditor工具栏无法适配移动端屏幕、下拉项触发横向滚动的问题，给出以下具体解决方法：

1. 优化工具栏自适应配置 #

修改editorConfig中的工具栏设置，开启自动分组折叠，让空间不足时溢出的按钮自动进入下拉菜单，避免横向滚动：

editorConfig: {
  toolbar: {
    items: [
      'undo', 'redo',
      '|', 'heading',
      '|', 'alignment',
      '|', 'fontsize', 'fontColor', 'fontBackgroundColor', 'bold', 'italic', 
      '|', 'numberedList', 'bulletedList', 'todoList', 'outdent', 'indent',
      '|', 'link', 'uploadImage', 'code',
    ],
    // 开启空间不足时的自动分组折叠
    shouldNotGroupWhenFull: true,
    // 可选：设置工具栏与视口顶部偏移，避免被导航栏遮挡
    viewportTopOffset: 50
  },
  // 其余配置保持不变...
}

2. 添加自定义CSS修复滚动与下拉菜单问题 #

在组件的<style>标签中添加以下样式，优化工具栏滚动体验并解决下拉菜单触发页面滚动的问题：

/* 限制工具栏容器横向滚动，隐藏滚动条优化体验 */
.ck-editor-box .ck-toolbar {
  overflow-x: auto;
  scrollbar-width: none; /* Firefox */
}
.ck-editor-box .ck-toolbar::-webkit-scrollbar {
  display: none; /* Chrome/Safari/Edge */
}

/* 强制下拉菜单在视口内显示，避免超出屏幕触发滚动 */
.ck-editor-box .ck-dropdown__panel {
  max-width: calc(100vw - 20px);
  /* 右侧下拉菜单向左弹出，避免溢出 */
  left: auto !important;
  right: 0 !important;
}

/* 确保CKEditor容器占满父元素宽度，避免挤压 */
.ck-editor-box .ck-editor {
  width: 100% !important;
}

3. 调整Vuetify布局容器 #

确保Vuetify的v-col没有设置固定宽度或额外padding，让CKEditor能获取足够可用空间：

• 检查:class="colInput"是否包含固定宽度类，若有则改为自适应宽度（如col-12）
• 移除v-col上可能存在的overflow-x限制，避免影响工具栏滚动

4. 验证插件版本兼容性 #

确保@blowstack/ckeditor-nuxt使用的CKEditor版本与官方示例一致，旧版本可能存在移动端适配bug，可尝试升级依赖：

npm update @blowstack/ckeditor-nuxt

内容的提问来源于stack exchange，提问作者Mai Trung Kiến