Vue中TinyMCE编辑器如何正确引入自定义CSS文件？

针对在 vue 中使用 tinymce 编辑器引入自定义 css 文件的困扰

在使用 vue 中的 tinymce 编辑器时，引入自定义 css 文件可能会令人困惑。

初始化配置

以下是您提供的初始化配置：

return {
  // 初始化配置
  init: {
    select: "textarea",
    language: "zh_cn",
    skin_url: process.env.base_url + "tinymce/skins/ui/oxide",
    skin: "oxide",
    resize: false,
    content_style: "p {margin: 0;}",
    importcss_file_filter: "/public/",
    height: this.height,
  },
};

问题

您在 content_css 选项中尝试引用自定义 css 文件，但没有成功。您想知道如何正确引入自定义 css 文件。

答案

在 vue-cli 项目中，您需要从 public 文件夹中排除自定义 css 文件的路径。因此，您应该使用以下路径：

content_css: "/tinymce/skins/content/document/content.css",

提示：

• 确保您的自定义 css 文件位于 public/tinymce/skins/content/document/ 文件夹中。
• 移除 importcss_file_filter: "/public/", 选项，因为它已不再必要。