perf: 预览

src/views/editor/components/base.vue

@@ -2,30 +2,35 @@
 import "@wangeditor/editor/dist/css/style.css";
 import { IEditorConfig } from "@wangeditor/editor";
 import { Editor } from "@wangeditor/editor-for-vue";
-import { onMounted, onBeforeUnmount, shallowRef, ref } from "vue";
-import { type Generator } from "@/api/generator/generator";
+import {
+  onMounted,
+  onBeforeUnmount,
+  shallowRef,
+  defineProps,
+  defineEmits,
+  ref
+} from "vue";
 defineOptions({
   name: "BaseEditor"
 });
 
-const content = defineModel<Generator>("content");
-
+const content = defineProps({
+  content: {
+    type: String,
+    default: ""
+  }
+});
+const emits = defineEmits(["update:content"]);
 const mode = "default";
 // 编辑器实例，必须用 shallowRef
 const editorRef = shallowRef();
 
 // 内容 HTML
-const valueHtml = ref("");
 const editorConfig: Partial<IEditorConfig> = { MENU_CONF: {} };
 
-onMounted(() => {
-  console.log("content", content.value.content);
-  valueHtml.value =
-    '<pre><code class="language-java">' +
-    content.value.content +
-    "</code></pre>";
-  const editorConfig: Partial<IEditorConfig> = { MENU_CONF: {} };
-});
+console.log("content", content.content);
+const htmlText = ref(content.content);
+onMounted(() => {});
 const handleCreated = editor => {
   // 记录 editor 实例，重要！
   editorRef.value = editor;
@@ -40,12 +45,12 @@ onBeforeUnmount(() => {
 </script>
 
 <template>
-  <div class="wangeditor">
+  <div>
     <Editor
-      v-model="valueHtml"
+      v-model="htmlText"
       :defaultConfig="editorConfig"
       :mode="mode"
-      style="height: 500px; overflow-y: hidden"
+      style="height: 100%; overflow-y: hidden"
       @onCreated="handleCreated"
     />
   </div>