在vue項目中集成tinymce富文本編輯器并自定義其樣式
許多開發(fā)者在vue項目中使用TinyMCE編輯器時，常常會遇到引入自定義css樣式的問題。本文將針對如何在vue項目中成功引入TinyMCE編輯器的自定義CSS文件進行詳細解答。
問題描述中，開發(fā)者嘗試在content_css配置項中引入自定義的CSS文件，并嘗試了不同的路徑，但始終無法生效。代碼片段展示了其初始化配置，其中包含了多次嘗試引入CSS文件的代碼，以及其項目文件結(jié)構(gòu)的截圖。核心問題在于如何正確指定自定義CSS文件的路徑，使TinyMCE編輯器能夠正確加載并應(yīng)用這些樣式。
根據(jù)問題描述提供的截圖，我們可以推斷開發(fā)者使用的是Vue CLI構(gòu)建的項目。問題的關(guān)鍵在于content_css配置項中指定的路徑。答案直接指出問題所在： public目錄層級多余。 在Vue CLI項目中，public目錄下的文件會被直接復制到最終的構(gòu)建輸出目錄，因此在content_css中引用CSS文件時，不需要包含public路徑。
因此，正確的content_css配置應(yīng)該直接指向Static目錄下的CSS文件，或者項目根目錄下的src目錄（如果將CSS文件放置在src目錄下，需根據(jù)實際情況調(diào)整路徑）。 建議開發(fā)者移除content_css配置中的/public/部分，直接使用相對于項目根目錄的相對路徑或絕對路徑。 例如，如果你的CSS文件位于src/assets/tinymce/content.css，那么content_css應(yīng)該配置為content_css: ‘./assets/tinymce/content.css’。 如果你的CSS文件位于static/tinymce/content.css，那么content_css應(yīng)該配置為content_css: ‘/tinymce/content.css’。 修改后，TinyMCE編輯器就能正確加載并應(yīng)用自定義的CSS樣式了。
立即學習“前端免費學習筆記（深入）”；
