在vue项目中集成tinymce富文本编辑器并应用自定义css样式
许多开发者在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_css: process.env.base_url + "tinymce/skins/ui/oxide/content.css",
// content_css: process.env.base_url + "tinymce/skins/content/document/content.css",
content_css: "/public/tinymce/skins/content/document/content.css",
content_style: "p {margin: 0;}",
importcss_file_filter: "/public/",
height: this.height,
}
};该开发者尝试了多种content_css路径配置，但均未成功加载自定义css文件 /public/tinymce/skins/content/document/content.css。 图片显示了其项目文件结构，/public目录下确实存在相应的css文件。
问题解决：
立即学习“前端免费学习笔记（深入）”；
问题的关键在于content_css路径的设置。 由于该项目使用了vue cli，其静态资源文件路径与直接使用public目录有所不同。 解决方法是去除content_css路径中的/public部分，直接使用相对于项目根目录的路径。 正确的content_css配置应该类似于：
content_css: "tinymce/skins/content/document/content.css",
通过移除/public路径前缀，tinymce编辑器就能正确加载位于项目根目录下的tinymce/skins/content/document/content.css文件。 这样，自定义css样式就能成功应用于编辑器内容。
以上就是Vue项目中TinyMCE富文本编辑器自定义CSS样式如何生效？的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
广告Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
967
收藏
