perf: 预览

src/views/editor/components/base.vue

@@ -0,0 +1,45 @@
+<script setup lang="ts">
+import "@wangeditor/editor/dist/css/style.css";
+import { IEditorConfig } from "@wangeditor/editor";
+import { Editor } from "@wangeditor/editor-for-vue";
+import { onBeforeUnmount, shallowRef } from "vue";
+defineOptions({
+  name: "BaseEditor"
+});
+
+const content = defineModel<string>("content");
+console.log("content", content);
+
+const mode = "default";
+// 编辑器实例，必须用 shallowRef
+const editorRef = shallowRef();
+
+// 内容 HTML
+const valueHtml =
+  '<pre><code class="language-java">' + content.value + "</code></pre>";
+const editorConfig: Partial<IEditorConfig> = { MENU_CONF: {} };
+
+const handleCreated = editor => {
+  // 记录 editor 实例，重要！
+  editorRef.value = editor;
+};
+
+// 组件销毁时，也及时销毁编辑器
+onBeforeUnmount(() => {
+  const editor = editorRef.value;
+  if (editor == null) return;
+  editor.destroy();
+});
+</script>
+
+<template>
+  <div class="wangeditor">
+    <Editor
+      v-model="valueHtml"
+      :defaultConfig="editorConfig"
+      :mode="mode"
+      style="height: 500px; overflow-y: hidden"
+      @onCreated="handleCreated"
+    />
+  </div>
+</template>

src/views/editor/components/index.ts

@@ -0,0 +1,5 @@
+import base from "./base.vue";
+
+const Base = base;
+
+export { Base };

src/views/editor/index.vue

@@ -0,0 +1,40 @@
+<script setup lang="ts">
+import { ref } from "vue";
+import { Base } from "./components";
+
+defineOptions({
+  name: "Editor"
+});
+
+const activeNames = ref("1");
+</script>
+
+<template>
+  <el-card shadow="never">
+    <template #header>
+      <div class="card-header">
+        <span class="font-medium">
+          编辑器组件，采用开源的
+          <el-link
+            href="https://www.wangeditor.com"
+            target="_blank"
+            style="margin: 0 4px 5px; font-size: 16px"
+          >
+            Wangeditor
+          </el-link>
+        </span>
+      </div>
+    </template>
+    <el-collapse v-model="activeNames" accordion>
+      <el-collapse-item title="基础用法" name="1">
+        <Base v-if="activeNames === '1'" />
+      </el-collapse-item>
+    </el-collapse>
+  </el-card>
+</template>
+
+<style lang="scss" scoped>
+:deep(.el-collapse-item__header) {
+  padding-left: 10px;
+}
+</style>