diff --git a/components/naive-ui-editor/src/NaiveUiEditor.vue b/components/naive-ui-editor/src/NaiveUiEditor.vue index 67b3026..ba17f25 100644 --- a/components/naive-ui-editor/src/NaiveUiEditor.vue +++ b/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' diff --git a/components/naive-ui-editor/src/styles/index.css b/components/naive-ui-editor/src/styles/index.css new file mode 100644 index 0000000..7eec870 --- /dev/null +++ b/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; +}