✨ feat(富文本样式): 处理与tailwindcss冲突

components/naive-ui-editor/src/NaiveUiEditor.vue

@@ -2,6 +2,7 @@
 import { NSpin } from 'naive-ui'
 
 import '@wangeditor/editor/dist/css/style.css'
+import './styles/index.css'
 import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
 
 import { useEditor } from './hooks'

components/naive-ui-editor/src/styles/index.css

@@ -0,0 +1,70 @@
+.w-e-full-screen-container {
+  z-index: 999;
+}
+
+.editor-content-view p,
+.editor-content-view li {
+  white-space: pre-wrap; /* 保留空格 */
+}
+
+.editor-content-view blockquote {
+  border-left: 8px solid #d0e5f2;
+  padding: 10px 10px;
+  margin: 10px 0;
+  background-color: #f1f1f1;
+}
+
+.editor-content-view code {
+  font-family: monospace;
+  background-color: #eee;
+  padding: 3px;
+  border-radius: 3px;
+}
+.editor-content-view pre>code {
+  display: block;
+  padding: 10px;
+}
+
+.editor-content-view table {
+  border-collapse: collapse;
+}
+.editor-content-view td,
+.editor-content-view th {
+  border: 1px solid #ccc;
+  min-width: 50px;
+  height: 20px;
+}
+.editor-content-view th {
+  background-color: #f1f1f1;
+}
+
+.editor-content-view ul,
+.editor-content-view ol {
+  padding-left: 20px;
+  list-style: disc;
+}
+
+.editor-content-view input[type="checkbox"] {
+  margin-right: 5px;
+}
+
+.editor-content-view h1 {
+  font-size: 32px;
+  font-weight: bold;
+}
+.editor-content-view h2 {
+  font-size: 24px;
+  font-weight: bold;
+}
+.editor-content-view h3 {
+  font-size: 18px;
+  font-weight: bold;
+}
+.editor-content-view h4 {
+  font-size: 16px;
+  font-weight: bold;
+}
+.editor-content-view h5 {
+  font-size: 13px;
+  font-weight: bold;
+}