perf: 代码预览

src/views/editor/components/base.vue

@@ -1,57 +0,0 @@
-<script setup lang="ts">
-import "@wangeditor/editor/dist/css/style.css";
-import { IEditorConfig } from "@wangeditor/editor";
-import { Editor } from "@wangeditor/editor-for-vue";
-import {
-  onMounted,
-  onBeforeUnmount,
-  shallowRef,
-  defineProps,
-  defineEmits,
-  ref
-} from "vue";
-defineOptions({
-  name: "BaseEditor"
-});
-
-const content = defineProps({
-  content: {
-    type: String,
-    default: ""
-  }
-});
-const emits = defineEmits(["update:content"]);
-const mode = "default";
-// 编辑器实例，必须用 shallowRef
-const editorRef = shallowRef();
-
-// 内容 HTML
-const editorConfig: Partial<IEditorConfig> = { MENU_CONF: {} };
-
-console.log("content", content.content);
-const htmlText = ref(content.content);
-onMounted(() => {});
-const handleCreated = editor => {
-  // 记录 editor 实例，重要！
-  editorRef.value = editor;
-};
-
-// 组件销毁时，也及时销毁编辑器
-onBeforeUnmount(() => {
-  const editor = editorRef.value;
-  if (editor == null) return;
-  editor.destroy();
-});
-</script>
-
-<template>
-  <div>
-    <Editor
-      v-model="htmlText"
-      :defaultConfig="editorConfig"
-      :mode="mode"
-      style="height: 100%; overflow-y: hidden"
-      @onCreated="handleCreated"
-    />
-  </div>
-</template>

src/views/editor/components/index.ts

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

src/views/editor/components/index.vue

@@ -0,0 +1,79 @@
+<template>
+  <codemirror
+    v-model="myCode"
+    placeholder="Code goes here..."
+    :style="{ height: '100%' }"
+    :autofocus="true"
+    :indent-with-tab="true"
+    :tab-size="2"
+    :extensions="extensions"
+    @ready="handleReady"
+  />
+</template>
+
+<script setup lang="ts">
+import { shallowRef, defineProps, defineEmits, ref, watch } from "vue";
+import { Codemirror } from "vue-codemirror";
+import { javascript } from "@codemirror/lang-javascript";
+import { java } from "@codemirror/lang-java";
+import { xml } from "@codemirror/lang-xml";
+import { html } from "@codemirror/lang-html";
+import { oneDark } from "@codemirror/theme-one-dark";
+
+defineOptions({
+  name: "Codemirror"
+});
+
+const code = defineProps({
+  code: {
+    type: String,
+    default: ""
+  },
+  type: {
+    type: String,
+    default: "java"
+  }
+});
+
+const emits = defineEmits(["update:code", "update:type"]);
+const extensions = ref([]);
+const myCode = ref(code.code);
+extensions.value = [java(), oneDark];
+watch(
+  () => code.type,
+  newValue => {
+    if (newValue === "javascript") {
+      extensions.value[0] = javascript();
+    } else if (newValue === "xml") {
+      extensions.value[0] = xml();
+    } else if (newValue === "html") {
+      extensions.value[0] = html();
+    } else {
+      extensions.value[0] = java();
+    }
+  }
+);
+watch(
+  () => code.code,
+  newValue => {
+    myCode.value = newValue;
+  }
+);
+// Codemirror EditorView instance ref
+const view = shallowRef();
+const handleReady = payload => {
+  view.value = payload.view;
+};
+
+// Status is available at all times via Codemirror EditorView
+const getCodemirrorStates = () => {
+  const state = view.value.state;
+  const ranges = state.selection.ranges;
+  const selected = ranges.reduce((r, range) => r + range.to - range.from, 0);
+  const cursor = ranges[0].anchor;
+  const length = state.doc.length;
+  const lines = state.doc.lines;
+  // more state info ...
+  // return ...
+};
+</script>

src/views/editor/index.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { ref } from "vue";
-import { Base } from "./components";
+import { Code } from "./components";
 
 defineOptions({
   name: "Editor"
@@ -27,7 +27,7 @@ const activeNames = ref("1");
     </template>
     <el-collapse v-model="activeNames" accordion>
       <el-collapse-item title="基础用法" name="1">
-        <Base v-if="activeNames === '1'" />
+        <Code v-if="activeNames === '1'" />
       </el-collapse-item>
     </el-collapse>
   </el-card>