在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样式如何生效？的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1503530.html
微信扫一扫 
支付宝扫一扫 
