feat: 开发中...

blog-frontend/src/views/BlogEditView.vue

@@ -1,33 +1,71 @@
 <script setup lang="ts">
-import { onMounted, ref } from 'vue';
-import router from '@/router';
+import { ref, shallowRef } from "vue";
+import { useRoute } from "vue-router";
 
-import type { BlogInfoResponseVO } from '@/swagger';
-import { api } from '@/api';
+import "@wangeditor/editor/dist/css/style.css";
+import { Editor, Toolbar } from "@wangeditor/editor-for-vue";
+import type {
+  IDomEditor,
+  IToolbarConfig,
+  IEditorConfig,
+} from "@wangeditor/editor";
 
-const blogInfo = ref<BlogInfoResponseVO>()
+import { api } from "@/api";
+import type { BlogInfoResponseVO } from "@/swagger";
 
-onMounted(() => {
-    const blogID = router.currentRoute.value.params?.id?.toString() || "1"
-    if (blogID) {
-        api.BlogController.getBlogInfo(parseInt(blogID))
-            .then(resp => {
-                const vo = resp.data
-                blogInfo.value = vo.data || {}
-            })
-    }
-})
+const editorRef = shallowRef();
+const toolbarConfig: IToolbarConfig = {};
+const editorConfig: IEditorConfig = {};
+const content = ref<string>("<p>hello</p>");
+
+const handleCreated = (editor: IDomEditor) => {
+  editorRef.value = editor; // 记录 editor 实例，重要！
+};
+const blogInfo = ref<BlogInfoResponseVO>();
+
+const blogID = useRoute().params.id.toString();
+if (blogID) {
+  api.BlogController.getBlogInfo(parseInt(blogID)).then((resp) => {
+    const vo = resp.data;
+    blogInfo.value = vo.content || {};
+  });
+}
 </script>
 
 <template>
-    <h1 class="blog-title">{{ blogInfo?.title }}</h1>
-    <div class="blog-content" v-html="blogInfo?.content"></div>
+  <el-form> </el-form>
+  <Toolbar
+    class="editor-toolbar"
+    :editor="editorRef"
+    :defaultConfig="toolbarConfig"
+    mode="default"
+  />
+  <div class="editor">
+    <Editor
+      v-model="content"
+      :defaultConfig="editorConfig"
+      mode="default"
+      @onCreated="handleCreated"
+    />
+  </div>
 </template>
 
 <style scoped>
-.blog-title {
-    text-align: center;
+.editor-div {
+  height: 100%;
+  border: 1px solid #ccc;
 }
 
-.blog-content {}
-</style>
+.editor-toolbar {
+  border-bottom: 1px solid #ccc;
+  height: auto;
+}
+
+.editor-scrollbar {
+  height: 100%;
+}
+
+.editor {
+  height: 80%;
+}
+</style>