章節連結
wangEditor 5 的繼任者 wangEditor-next 是基於 wangEditor 5 的維護版本,不過一旦搭配 Tailwindcss 就會有樣式衝突的問題。這邊筆記下解決方法。
內容
[ wangEditor-next ]:https://wangeditor-next.github.io/docs/
遇上 Tailwindcss 的預設 Preflight,便會使編輯器內的樣式受到影響。雖說 Tailwindcss 可透過關閉 preflight 來避免影響,但這又導致依賴 Tailwindcss 所撰寫的樣式跑版。
如何關閉 Preflight
Tailwindcss 3
https://v3.tailwindcss.com/docs/preflight#disabling-preflight 在 tailwind.config.js 中調整
Tailwindcss 4
https://tailwindcss.com/docs/preflight#disabling-preflight 不使用 @import “tailwindcss/preflight.css” layer(base);
避免樣式衝突
透過 AI 工具協助比對 Tailwindcss Preflight 和 wangEditor 的 css,並告知以 wangEditor 為主。以下會被影響到的 css,都被加上 !important
參考資料
1. wangEditor-next 开源 Web 富文本编辑器,开箱即用,配置简单
2. [v4] Cannot disable preflight styles