在vue项目中集成tinymce富文本编辑器并自定义其样式
许多开发者在Vue项目中使用TinyMCE编辑器时，常常会遇到引入自定义CSS样式的问题。本文将针对如何在Vue项目中成功引入TinyMCE编辑器的自定义CSS文件进行详细解答。
问题描述中，开发者尝试在content_css配置项中引入自定义的CSS文件，并尝试了不同的路径，但始终无法生效。代码片段展示了其初始化配置，其中包含了多次尝试引入CSS文件的代码，以及其项目文件结构的截图。核心问题在于如何正确指定自定义CSS文件的路径，使TinyMCE编辑器能够正确加载并应用这些样式。
根据问题描述提供的截图，我们可以推断开发者使用的是Vue CLI构建的项目。问题的关键在于content_css配置项中指定的路径。答案直接指出问题所在： public目录层级多余。 在Vue CLI项目中，public目录下的文件会被直接复制到最终的构建输出目录，因此在content_css中引用CSS文件时，不需要包含public路径。
因此，正确的content_css配置应该直接指向static目录下的CSS文件，或者项目根目录下的src目录（如果将CSS文件放置在src目录下，需根据实际情况调整路径）。 建议开发者移除content_css配置中的/public/部分，直接使用相对于项目根目录的相对路径或绝对路径。 例如，如果你的CSS文件位于src/assets/tinymce/content.css，那么content_css应该配置为content_css: './assets/tinymce/content.css'。 如果你的CSS文件位于static/tinymce/content.css，那么content_css应该配置为content_css: '/tinymce/content.css'。 修改后，TinyMCE编辑器就能正确加载并应用自定义的CSS样式了。
立即学习“前端免费学习笔记（深入）”；
