VueJS2集成CKEditor4-Vue时contentsCss不加载的问题求助

1. ckeditor4-vue 支持 contentsCss 配置吗？ #

是的，ckeditor4-vue 完全支持 contentsCss 配置——它是 CKEditor 4 的 Vue 封装，所有原生 CKEditor 4 的核心配置项都可直接使用。你的配置未生效，大概率是路径、模式冲突或缓存问题导致，而非不支持该配置。

2. 为什么 contentsCss 没加载？ #

可能的原因包括：

• 路径错误：Vue 2 中静态资源需放在 public 目录下，若 content.css 放在 src 目录，webpack 会处理路径，导致无法直接通过 /ckeditor/content.css 访问。
• fullPage: true 的影响：开启该模式后，编辑器会生成完整的 HTML 文档（含 <html>/<head>/<body>），contentsCss 的样式需正确作用于这个独立文档的 <body>。
• 浏览器缓存：旧样式缓存可能导致新样式无法加载。

3. 修复 contentsCss 加载问题的步骤 #

• 确认资源位置：将 content.css 放在项目根目录的 public/ckeditor/ 下，确保通过 localhost:8080/ckeditor/content.css 可直接访问。
• 使用绝对路径：避免路径解析问题，配置改为：

  contentsCss: [window.location.origin + '/ckeditor/content.css']
  

• 强制刷新缓存：在路径后添加版本号：

  contentsCss: ['/ckeditor/content.css?v=1.0']
  

• 适配 fullPage 模式：在 content.css 中明确针对 <body> 设置字体：

  body {
    font-family: 'Lato', sans-serif !important;
    margin: 0;
    padding: 10px;
  }
  

4. 其他无需依赖 contentsCss 的解决方案 #

方案一：全局样式覆盖 #

在 Vue 全局样式文件（如 App.vue 或 main.css）中，直接针对 CKEditor 编辑区域设置字体：

/* 覆盖 iframe 模式的编辑区域字体 */
.ck-editor__editable iframe {
  font-family: 'Lato', sans-serif !important;
}

/* 覆盖 inline 模式的编辑区域字体 */
.ck-editor__editable_inline {
  font-family: 'Lato', sans-serif !important;
}

方案二：配置字体插件默认值 #

利用 CKEditor 的 font 插件，直接设置默认字体为 Lato，并加入字体列表：

// 在 CKEditor 配置中添加以下项
font_defaultLabel: 'Lato',
font_names: 'Lato/Lato, sans-serif;' + CKEDITOR.config.font_names,
font_style: {
  element: 'span',
  styles: { 'font-family': 'Lato, sans-serif' },
  overrides: [ { element: 'font', attributes: { 'face': null } } ]
}

这样编辑器默认使用 Lato 字体，用户也能在字体下拉菜单中选择它。

方案三：通过 ready 事件动态注入样式 #

在编辑器的 ready 回调中，直接向编辑区域文档注入样式：

onReady(editor) {
  const editableDoc = editor.editable().getDocument().$;
  const styleTag = editableDoc.createElement('style');
  styleTag.textContent = `
    body {
      font-family: 'Lato', sans-serif;
    }
  `;
  editableDoc.head.appendChild(styleTag);
}

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