解决markdown样式冲突

coderxixi · coderxixi · commit 71e6d1224865 · 2022-10-16T20:34:19.000+08:00
diff --git a/vue-admin/index.html b/vue-admin/index.html
@@ -5,13 +5,14 @@
     <link rel="icon" type="image/svg+xml" href="/vite.svg" />
     <link href="https://cdn.bootcdn.net/ajax/libs/animate.css/4.1.1/animate.min.css" rel="stylesheet">
     <link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/6.2.0/css/all.css" rel="stylesheet">
-    <link rel="stylesheet" href="https://uicdn.toast.com/editor/latest/toastui-editor.min.css" />
     <script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.4.0/echarts.common.min.js"></script>
     <script src="https://uicdn.toast.com/editor/latest/toastui-editor-all.min.js"></script>
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Vite + Vue + TS</title>
   </head>
   <body>
+    <link rel="stylesheet" href="https://uicdn.toast.com/editor/latest/toastui-editor.min.css" />
+
     <div id="app"></div>
     <script type="module" src="/src/main.ts"></script>
   </body>
diff --git a/vue-admin/src/components/markdowm/editor.vue b/vue-admin/src/components/markdowm/editor.vue
@@ -1,13 +1,20 @@
 <template>
   <div>
-asdfasf
+  <div id="editor"></div>
   </div>
 </template>
 
 <script setup lang="ts">
-
+import { nextTick } from "vue"
+import ToastEditor from "./toastEditor"
+nextTick(()=>{
+  new ToastEditor('#editor','500px','sdfsdfs')
+})
 </script>
 
-<style scoped>
+<style scoped lang="scss">
+#editor{
+  @apply bg-white
+}
 
 </style>
diff --git a/vue-admin/src/components/markdowm/toastEditor.ts b/vue-admin/src/components/markdowm/toastEditor.ts
@@ -0,0 +1,13 @@
+export default class {
+  editor:toastui.Editor
+  constructor(el:string,height:string,initialValue:string){
+    this.editor=new toastui.Editor({
+     el:  document.querySelector(el),
+     height:height,
+     initialValue: initialValue,
+     initialEditTYpe:"markdown",
+     previewStyle:"vertical",
+    })
+ 
+  }
+}
diff --git a/vue-admin/types/typings.d.ts b/vue-admin/types/typings.d.ts
@@ -0,0 +1,6 @@
+declare namespace toastui {
+  class Editor {
+    constructor(options:any)
+  }
+  // getMarkdown:()=>{},
+}
