From 7e0b3b9682e7761092f5b1adf4f263dd5170f27c Mon Sep 17 00:00:00 2001
From: liuchen <2468216537@qq.com>
Date: Tue, 12 Nov 2024 22:39:42 +0800
Subject: [PATCH 1/2] complete rightclick menu

---
 .../src/components/ContentBase.vue            |   4 +-
 .../src/components/ContentShow.vue            |  72 --------
 .../src/components/FileFiled.vue              |  92 ++++++++++
 .../src/components/FileTitle.vue              |  43 +++++
 .../src/components/FolderFiled.vue            |  91 ++++++++++
 coeditor_frontend/src/components/NavBar.vue   |  37 +++-
 .../src/components/RightMenu.vue              | 130 ++++++++++++++
 coeditor_frontend/src/router/index.js         |  30 +++-
 coeditor_frontend/src/store/user.js           |  59 ++++++-
 coeditor_frontend/src/views/HomeView.vue      | 163 ++++++++++++++++--
 coeditor_frontend/src/views/LoginView.vue     |  73 ++++++++
 coeditor_frontend/src/views/NotFoundView.vue  |  19 ++
 coeditor_frontend/src/views/RegisterView.vue  |  96 +++++++++++
 .../src/views/UserProfileView.vue             |  29 ++++
 14 files changed, 842 insertions(+), 96 deletions(-)
 delete mode 100644 coeditor_frontend/src/components/ContentShow.vue
 create mode 100644 coeditor_frontend/src/components/FileFiled.vue
 create mode 100644 coeditor_frontend/src/components/FileTitle.vue
 create mode 100644 coeditor_frontend/src/components/FolderFiled.vue
 create mode 100644 coeditor_frontend/src/components/RightMenu.vue
 create mode 100644 coeditor_frontend/src/views/LoginView.vue
 create mode 100644 coeditor_frontend/src/views/NotFoundView.vue
 create mode 100644 coeditor_frontend/src/views/RegisterView.vue
 create mode 100644 coeditor_frontend/src/views/UserProfileView.vue

diff --git a/coeditor_frontend/src/components/ContentBase.vue b/coeditor_frontend/src/components/ContentBase.vue
index 179a7f8..277781e 100644
--- a/coeditor_frontend/src/components/ContentBase.vue
+++ b/coeditor_frontend/src/components/ContentBase.vue
@@ -1,12 +1,10 @@
 <template>
   <div class="home">
-    <div class="container">
-      <div class="card">
+      <div class="card col-md-10 offset-md-1">
         <div class="card-body">
           <slot></slot>
         </div>
       </div>
-    </div>
   </div>
 </template>
 
diff --git a/coeditor_frontend/src/components/ContentShow.vue b/coeditor_frontend/src/components/ContentShow.vue
deleted file mode 100644
index 359ad31..0000000
--- a/coeditor_frontend/src/components/ContentShow.vue
+++ /dev/null
@@ -1,72 +0,0 @@
-<template>
-    <ContentBase>
-        <div class="file-item" v-for="item in items" :key="item.name">
-            <div class="file-item">
-                <div @dblclick="handledouleclick(item.name,item.type)" class="file-item-icon">
-                    <img v-if="item.type==='folder'" src="@/assets/folder_icon.png" alt="">
-                    <img v-else src="@/assets/file_icon.png" alt="">
-                </div>
-                <div class="file-item-title">
-                    {{ item.name }}
-                </div>
-            </div>
-    </div> 
-    </ContentBase>
-</template>
-
-
-<script>
-import ContentBase from './ContentBase';
-
-export default {
-  name: 'ContentShow',
-  components:{
-      ContentBase,
-  },
-  props:{
-      items:{
-          type:Object,
-          required:true,
-      }
-  },
-  setup(props,context){
-      const handledouleclick = (name,type) => {
-          context.emit("handledoubleclick",name,type);
-      }
-      return {
-        handledouleclick,
-    }
-  },
-}
-</script>
-
-<style scoped>
-.file-item{
-    width: 8vw;
-    display: inline-block;
-}
-
-.file-item {
-    width: 8vw;
-    height: 8vw;
-    overflow: hidden;
-    display: inline-block;
-    margin: 0 0.1vw 1vw 0.1vw;
-    border: 0.1vh solid white;
-}
-
-.file-item-icon > img {
-    width: 6vw;
-    height: 6vw;
-}
-
-
-.file-item-title{
-    width: 6vw;
-    height: 4vw;
-    text-align: center;
-    overflow: hidden;
-    font-size: 1.2vw;
-    word-break: break-all;
-}
-</style>
diff --git a/coeditor_frontend/src/components/FileFiled.vue b/coeditor_frontend/src/components/FileFiled.vue
new file mode 100644
index 0000000..1fadfe9
--- /dev/null
+++ b/coeditor_frontend/src/components/FileFiled.vue
@@ -0,0 +1,92 @@
+<template>
+  <div @click="leftclick()" @dblclick="doubleclick()" @contextmenu.stop.prevent="rightclick($event)"
+  :class="{ 'file-item-selected' : is_selected }"
+  >
+    <div class="file-item-icon" >
+        <img src="@/assets/file_icon.png" alt="">
+    </div>
+    <FileTitle>
+        {{ item.name }}
+    </FileTitle>
+  </div>
+</template>
+
+
+<script>
+
+import FileTitle from './FileTitle.vue';
+import { ref } from 'vue';
+import { useStore } from 'vuex';
+
+export default {
+  name: 'FileFiled',
+  components:{
+      FileTitle,
+  },
+  props:{
+      item:{
+          type:Object,
+          required:true,
+      }
+  },
+  setup(props,context){
+    let store = useStore();
+    let is_selected = ref(false);
+    
+    const leftclick = () => {
+      is_selected.value = true;
+    }
+    
+    const rightclick = (event) => {
+      context.emit('filerightclick',{
+        item:props.item,
+        menuposition:{
+          top: event.clientY + 'px',  
+          left: event.clientX + 'px',
+        },
+      });
+    }
+
+    const doubleclick = () => {
+      store.commit('forwardPath',props.item.name + '/');
+    }
+    return {
+        leftclick,
+        rightclick,
+        doubleclick,
+        is_selected,
+    }
+  }
+}
+</script>
+
+<style scoped>
+.file-item {
+    width: 8vw;
+    height: 8vw;
+    overflow: hidden;
+    display: inline-block;
+    margin: 0 0.1vw 1vw 0.1vw;
+    border: 0.1vh solid white;
+}
+
+.file-item-icon > img {
+    width: 6vw;
+    height: 6vw;
+}
+
+
+.file-item-title{
+    width: 6vw;
+    height: 4vw;
+    text-align: center;
+    overflow: hidden;
+    font-size: 1.2vw;
+    word-break: break-all;
+}
+
+.file-item-selected {
+  border: 0.1vh solid #99d1ff;
+  background: #cce8ff;
+}
+</style>
diff --git a/coeditor_frontend/src/components/FileTitle.vue b/coeditor_frontend/src/components/FileTitle.vue
new file mode 100644
index 0000000..4f0ee8f
--- /dev/null
+++ b/coeditor_frontend/src/components/FileTitle.vue
@@ -0,0 +1,43 @@
+<template>
+    <div class="file-item-title">
+        <slot></slot>
+    </div>
+</template>
+
+
+<script>
+export default {
+  name: 'FileTitle',
+}
+</script>
+
+<style scoped>
+.file-item {
+    width: 8vw;
+    height: 8vw;
+    overflow: hidden;
+    display: inline-block;
+    margin: 0 0.1vw 1vw 0.1vw;
+    border: 0.1vh solid white;
+}
+
+.file-item-icon > img {
+    width: 6vw;
+    height: 6vw;
+}
+
+
+.file-item-title{
+    width: 6vw;
+    height: 4vw;
+    text-align: center;
+    overflow: hidden;
+    font-size: 1.2vw;
+    word-break: break-all;
+}
+
+.file-item-selected {
+  border: 0.1vh solid #99d1ff;
+  background: #cce8ff;
+}
+</style>
diff --git a/coeditor_frontend/src/components/FolderFiled.vue b/coeditor_frontend/src/components/FolderFiled.vue
new file mode 100644
index 0000000..67052cb
--- /dev/null
+++ b/coeditor_frontend/src/components/FolderFiled.vue
@@ -0,0 +1,91 @@
+<template>
+  <div @click="leftclick()" @dblclick="doubleclick()" @contextmenu.stop.prevent="rightclick($event)"
+  :class="{ 'file-item-selected' : is_selected }"
+  >
+    <div class="file-item-icon" >
+        <img src="@/assets/folder_icon.png" alt="">
+    </div>
+    <FileTitle>
+        {{ item.name }}
+    </FileTitle>
+  </div>
+</template>
+
+
+<script>
+import FileTitle from './FileTitle.vue';
+import { useStore } from 'vuex';
+import { ref } from 'vue';
+
+export default {
+  name: 'FolderFiled',
+  components:{
+      FileTitle,
+  },
+  props:{
+      item:{
+          type:Object,
+          required:true,
+      }
+  },
+  setup(props,context){
+    let store = useStore();
+    let is_selected = ref(false);
+    const leftclick = () => {
+      is_selected.value = true;
+    }
+    
+    const rightclick = (event) => {
+      context.emit('filerightclick',{
+        item:props.item,
+        menuposition:{
+          top: event.clientY + 'px',  
+          left: event.clientX + 'px',
+        },
+      })
+    }
+
+    const doubleclick = () => {
+      store.commit('forwardPath',props.item.name + '/');
+    }
+
+    return {
+        leftclick,
+        rightclick,
+        doubleclick,
+        is_selected,
+    }
+  }
+}
+</script>
+
+<style scoped>
+.file-item {
+    width: 8vw;
+    height: 8vw;
+    overflow: hidden;
+    display: inline-block;
+    margin: 0 0.1vw 1vw 0.1vw;
+    border: 0.1vh solid white;
+}
+
+.file-item-icon > img {
+    width: 6vw;
+    height: 6vw;
+}
+
+
+.file-item-title{
+    width: 6vw;
+    height: 4vw;
+    text-align: center;
+    overflow: hidden;
+    font-size: 1.2vw;
+    word-break: break-all;
+}
+
+.file-item-selected {
+  border: 0.1vh solid #99d1ff;
+  background: #cce8ff;
+}
+</style>
diff --git a/coeditor_frontend/src/components/NavBar.vue b/coeditor_frontend/src/components/NavBar.vue
index 88998df..471252e 100644
--- a/coeditor_frontend/src/components/NavBar.vue
+++ b/coeditor_frontend/src/components/NavBar.vue
@@ -1,5 +1,5 @@
 <template>
-<nav class="nav">
+<!-- <nav class="nav">
     <a class="nav-link" href="#">
       <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-arrow-left" viewBox="0 0 16 16">
     <path fill-rule="evenodd" d="M15 8a.5.5 0 0 0-.5-.5H2.707l3.147-3.146a.5.5 0 1 0-.708-.708l-4 4a.5.5 0 0 0 0 .708l4 4a.5.5 0 0 0 .708-.708L2.707 8.5H14.5A.5.5 0 0 0 15 8z"/>
@@ -10,12 +10,47 @@
     <path fill-rule="evenodd" d="M1 8a.5.5 0 0 1 .5-.5h11.793l-3.147-3.146a.5.5 0 0 1 .708-.708l4 4a.5.5 0 0 1 0 .708l-4 4a.5.5 0 0 1-.708-.708L13.293 8.5H1.5A.5.5 0 0 1 1 8z"/>
     </svg>
     </a>
+</nav> -->
+<nav class="navbar navbar-expand-lg navbar-light bg-light">
+  <div class="container">
+    <router-link class="navbar-brand" :to="{name: 'home'}">Coeditor</router-link>
+    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
+      <span class="navbar-toggler-icon"></span>
+    </button>
+    <div class="collapse navbar-collapse" id="navbarText">
+       <ul class="navbar-nav ms-auto" >
+        <li class="nav-item">
+          <router-link v-if="!$store.state.user.is_login" class="nav-link" :to="{name: 'login'}">登录</router-link>
+          <router-link v-else class="nav-link" :to="{name: 'userprofile',params:{userId: $store.state.user.id}}">{{ $store.state.user.username }}</router-link>
+        </li>
+        <li class="nav-item"> 
+          <router-link v-if="!$store.state.user.is_login" class="nav-link" :to="{name: 'register'}">注册</router-link>
+          <a v-else class="nav-link" style="cursor: pointer" @click="logout">退出</a>
+        </li>
+      </ul>
+    </div>
+  </div>
 </nav>
 </template>
 
 <script>
+import { useStore } from 'vuex';
+import router from '../router/index.js';
 
 export default ({
     name:"NavBar",
+    setup(){
+      const store = useStore();
+      // store.commit('dd');
+      const logout = () => {
+        store.commit('logout');
+        router.push('/');
+        location.reload();
+      }
+      return {
+        store,
+        logout,
+      }
+    }
 })
 </script>
diff --git a/coeditor_frontend/src/components/RightMenu.vue b/coeditor_frontend/src/components/RightMenu.vue
new file mode 100644
index 0000000..33be347
--- /dev/null
+++ b/coeditor_frontend/src/components/RightMenu.vue
@@ -0,0 +1,130 @@
+<template>
+    <div>
+        <ul v-if="menutype === 'filemenu'" class="file-menu" :style="{top:menuposition.top,left:menuposition.left}">
+            <li>
+                <div @click="open_file">
+                    打开
+                </div>
+            </li>
+            <li>
+                <div>
+                    复制
+                </div>
+            </li>
+            <li>
+                <div>
+                    粘贴
+                </div>
+            </li>
+            <li>
+                <div>
+                    重命名
+                </div>
+            </li>
+            <li>
+                <div>
+                    删除
+                </div>
+            </li>
+        </ul>
+        <ul v-else class="context-menu" :style="{top:menuposition.top,left:menuposition.left}">
+        <li>
+            <div>
+                新建
+            </div>
+        </li>
+        <li>
+            <div>
+                刷新
+            </div>
+        </li>
+        <li>
+            <div>
+                粘贴
+            </div>
+        </li>
+        <li @click="turn_back">
+            后退
+        </li>
+    </ul>
+    </div>
+</template>
+
+
+<script>
+
+// import { computed } from 'vue';
+
+export default {
+    name:"RightMenu",
+    props:{
+        menuposition:{
+            type:Object,
+            required:true,
+        },
+        menutype:{
+            type:String,
+            required:true,
+        }
+    },
+    setup(props,context){
+        const open_file = () => {
+            context.emit('open_file');
+        }
+
+        const turn_back = () => {
+            
+            context.emit('turn_back');
+        }
+
+        return {
+            open_file,
+            turn_back,
+        }
+    }
+}
+</script>
+
+<style scoped>
+.file-menu {  
+  /* 菜单样式 */    
+  background-color: pink;  
+  border: 1px solid #ccc;  
+  position: fixed;
+  padding: 0; /* 移除默认的内边距 */  
+    margin: 0;
+    list-style: none; 
+  /* 其他样式 */  
+} 
+
+.file-menu > li {
+    padding: 10px; /* 添加内边距以确保内容不紧贴边框 */  
+    text-align: left; /* 内容左对齐 */  
+    width: 100%; /* 列表项占据父容器的全部宽度 */  
+    box-sizing: border-box; /* 包含内边距和边框在内计算元素的总宽度 */  
+    background-color: #f9f9f9; /* 可选：为列表项添加背景色 */  
+    border-bottom: 1px solid #ddd; /* 可选：为列表项添加底部边框 */
+    cursor:pointer;
+}
+
+.context-menu {  
+  /* 菜单样式 */    
+  background-color: pink;  
+  border: 1px solid #ccc;  
+  position: fixed;
+  padding: 0; /* 移除默认的内边距 */  
+    margin: 0;
+    list-style: none; 
+  /* 其他样式 */  
+} 
+
+.context-menu > li {
+    padding: 10px; /* 添加内边距以确保内容不紧贴边框 */  
+    text-align: left; /* 内容左对齐 */  
+    width: 100%; /* 列表项占据父容器的全部宽度 */  
+    box-sizing: border-box; /* 包含内边距和边框在内计算元素的总宽度 */  
+    background-color: #f9f9f9; /* 可选：为列表项添加背景色 */  
+    border-bottom: 1px solid #ddd; /* 可选：为列表项添加底部边框 */
+    cursor:pointer;
+}
+</style>
diff --git a/coeditor_frontend/src/router/index.js b/coeditor_frontend/src/router/index.js
index 6b37cae..20c137c 100644
--- a/coeditor_frontend/src/router/index.js
+++ b/coeditor_frontend/src/router/index.js
@@ -1,11 +1,39 @@
 import { createRouter, createWebHistory } from 'vue-router'
 import HomeView from '../views/HomeView.vue'
+import LoginView from  '../views/LoginView'
+import RegisterView from '../views/RegisterView'
+import NotFoundView from '../views/NotFoundView'
+import UserProfileView from '../views/UserProfileView'
 
 const routes = [
   {
     path: '/',
     name: 'home',
-    component: HomeView
+    component: HomeView,
+  },
+  {
+    path: '/login/',
+    name: 'login',
+    component: LoginView,
+  },
+  {
+    path: '/register/',
+    name: 'register',
+    component: RegisterView,
+  },
+  {
+    path: '/userprofile/',
+    name:'userprofile',
+    component:UserProfileView,
+  },
+  {
+    path: '/404/',
+    name: '404',
+    component: NotFoundView
+  },
+  {
+    path: '/:catchAll(.*)',
+    redirect: '/404/',
   }
 ]
 
diff --git a/coeditor_frontend/src/store/user.js b/coeditor_frontend/src/store/user.js
index 1a62814..a96e356 100644
--- a/coeditor_frontend/src/store/user.js
+++ b/coeditor_frontend/src/store/user.js
@@ -1,20 +1,71 @@
-// import $ from 'jquery';
-// import { jwtDecode } from 'jwt-decode';
+import $ from 'jquery';
 
 const ModulerUser = {
     state: {
-        id:'',
         username:'',
-        photo:'',
         access: "",
         refresh: "",
         is_login: false,
+        path:['~/users/'],
     },
     getters: {
     },
     mutations: {
+        updateUser(state,user){
+          state.username = user.username,
+          state.access = user.access,
+          state.refresh = user.refresh,
+          state.is_login = user.is_login;
+        },
+        logout(state){
+          state.username = '',
+          state.access =  "",
+          state.refresh = "",
+          state.is_login = false,
+          state.path = ['~/users/']
+        },
+        forwardPath(state,item){
+          state.path.push(item);
+        },
+        backPath(state){
+          state.path.pop();
+        }
     },
     actions: {
+        login(context,data){
+            $.ajax({
+              url:'http://47.106.113.194:8000/token/',
+              type:'POST',
+              data:{
+                username:data.username,
+                password:data.password,
+              },
+              success:resp => {
+                const {access,refresh} = resp;
+                $.ajax({
+                    url:' http://47.106.113.194:8000/getinfo/',
+                    type:'GET',
+                    headers:{
+                        'Authorization': "Bearer " + access,
+                    },
+                    success(resp){
+                      context.commit('updateUser',{
+                        ...resp,
+                        access:access,
+                        refresh:refresh,
+                        is_login: true,
+                      });
+                      context.commit('forwardPath',resp.username + '/'
+                      );
+                      data.success();
+                    }
+                });
+              },
+              error(){
+                  data.error();
+              }
+            });
+          }
     },
     modules: {
     }
diff --git a/coeditor_frontend/src/views/HomeView.vue b/coeditor_frontend/src/views/HomeView.vue
index c7ad895..8fee7cc 100644
--- a/coeditor_frontend/src/views/HomeView.vue
+++ b/coeditor_frontend/src/views/HomeView.vue
@@ -1,49 +1,149 @@
 <template>
-    <ContentShow @handledoubleclick="handledoubleclick" :items="items"> 
-
-    </ContentShow>
+  <ContentBase @contextmenu.prevent="rightclick($event)">
+    <div v-for="item in items" :key="item.name" class="file-item">
+        <FolderFiled @filerightclick="filerightclick" @ls="ls" v-if="item.type==='folder'" :item="item" />
+        <FileFiled @filerightclick="filerightclick" v-if="item.type==='file'" :item="item" />
+    </div>
+    <RightMenu v-if="menuvisible"  @open_file="open_file" @turn_back="turn_back" :item="item" :menutype="menutype" :menuposition="menuposition" />
+  </ContentBase>
 </template>
 
 <script>
 import $ from 'jquery';
-import ContentShow from '@/components/ContentShow';
+import ContentBase from '../components/ContentBase';
+import FileFiled from '../components/FileFiled';
+import FolderFiled from '../components/FolderFiled';
+import RightMenu from '../components/RightMenu.vue';
 import { ref } from 'vue';
+import { useStore } from 'vuex';
+import router from '@/router/index.js';
+
 
 export default {
   name: 'HomeView',
   components:{
-    ContentShow,
+    ContentBase,
+    FileFiled,
+    FolderFiled,
+    RightMenu,
   },
 
   setup(){
+    let store = useStore();
     let items = ref([]);
-    let path = ['~/'];
+    let menuvisible = ref(false);
+    let menutype = ref('filemenu');
+    let menuposition = ref({
+      top:"",
+      left:"",
+    });
+    let item = null;
+    
     const ls = () => {
+      menuvisible.value = false;
       $.ajax({
-            url:'https://app7179.acapp.acwing.com.cn/filesystem/ls/',
+            url:' http://47.106.113.194:8000/operation/command/ls/',
             type:'get',
             data:{
-              'path':path.join(""),
+              'path':store.state.user.path.join(""),
             },
             success:resp => {
-              items.value = resp.items;
+              let tmp = [];
+              for (let i = 0;i < resp.items.length;i++) {
+                let item = resp.items[i];
+                item.is_selected = false;
+                tmp.push(item);
+              }          
+              items.value = tmp;
             }
         });
     }
-    ls();
-    const handledoubleclick = (name,type) => {
-      if (type === "folder"){
-        path.push(name + "/");
+
+    const select_item = (item) => {
+      let tmp = items.value;
+      for (let i = 0;i < tmp.length;i++){
+        if (tmp[i] === item){
+          tmp[i].is_selected = true;
+        }
+        else {
+          tmp[i].is_selected = false;
+        }
+      }
+      items.value = tmp;
+    }
+
+    const open_file = () => {
+      menuvisible.value = false;
+      menutype.value = "filemenu";
+      if (!item){
+        return;
+      }
+      if (item.type === 'folder'){
+        store.commit('forwardPath',item.name + '/'
+        );
         ls();
       }
       else {
-        console.log(name);
+        $.ajax({
+            url:' http://47.106.113.194:8000/operation/open/',
+            type:'get',
+            data:{
+              'path':store.state.user.path.join("") + item.name,
+            },
+            success:resp => {
+              console.log(resp);
+            }
+        });
       }
+      
+    }
+    
+    // const add_file = () => {
+
+    // }
+
+    const turn_back = () => {
+      console.log('turn_back',store.state.user.path.join(""));
+      store.commit('backPath');
+      ls();
+    }
+
+    const rightclick = (event) => {
+      menuvisible.value = true;
+      menutype.value = "contextmenu";
+      menuposition.value = {
+        top: event.clientY + 'px',  
+        left: event.clientX + 'px',
+      };
+
     }
+
+    const filerightclick = (data) => {
+      menutype.value = "filemenu";
+      menuposition.value = data.menuposition;
+      menuvisible.value = true;
+      item = data.item;
+      select_item(item);
+    }
+
+    if (store.state.user.is_login){
+      ls();
+    }
+    else {
+      router.push({name:'login'});
+    }
+
     return {
       items,
+      item,
       ls,
-      handledoubleclick,
+      filerightclick,
+      rightclick,
+      open_file,
+      turn_back,
+      menuvisible,
+      menuposition,
+      menutype,
     }
   },
 }
@@ -52,3 +152,36 @@ export default {
 
 <style scoped>
 </style>
+
+<style scoped>
+
+.file-item {
+    width: 8vw;
+    height: 8vw;
+    overflow: hidden;
+    display: inline-block;
+    margin: 0 0.1vw 1vw 0.1vw;
+    border: 0.1vh solid white;
+}
+
+.file-item-icon > img {
+    width: 6vw;
+    height: 6vw;
+}
+
+
+.file-item-title{
+    width: 6vw;
+    height: 4vw;
+    text-align: center;
+    overflow: hidden;
+    font-size: 1.2vw;
+    word-break: break-all;
+}
+
+.file-item-selected {
+  border: 0.1vh solid #99d1ff;
+  background: #cce8ff;
+}
+</style>
+
diff --git a/coeditor_frontend/src/views/LoginView.vue b/coeditor_frontend/src/views/LoginView.vue
new file mode 100644
index 0000000..6fe22c0
--- /dev/null
+++ b/coeditor_frontend/src/views/LoginView.vue
@@ -0,0 +1,73 @@
+<template>
+  <ContentBase>
+    <div class="row justify-content-md-center">
+      <div class="col-3">
+        <form @submit.prevent="login">
+          <div class="mb-3">
+            <label for="username" class="form-label">用户名</label>
+            <input  v-model="username" type="text" class="form-control" id="username">
+          </div>
+          <div class="mb-3">
+            <label for="password" class="form-label">密码</label>
+            <input  v-model="password" type="password" class="form-control" id="password">
+          </div>
+          <div class="error-message">{{ error_message }}</div>
+          <button type="submit" class="btn btn-primary">登录</button>
+        </form>
+      </div>
+    </div>
+  </ContentBase> 
+</template>
+
+<script>
+import ContentBase from  '../components/ContentBase';
+import { ref } from 'vue';
+import { useStore } from 'vuex';
+import router from '@/router/index.js';
+
+export default {
+  name: 'LoginView',
+  components: {
+    ContentBase,
+  },
+  setup(){
+    let store = useStore();
+    let username = ref('123');
+    let password = ref('123');
+    let error_message = ref('');
+
+    const login = () => {
+      // http://47.106.113.194:8000/token/
+      store.dispatch('login',{
+        username:username.value,
+        password:password.value,
+        success(){
+          error_message.value = '';
+          router.push({name:'home'});
+        },
+        error(){
+          error_message.value = "用户名或密码错误";
+        }
+        });
+
+    };
+    return {
+      username,
+      password,
+      error_message,
+      login,
+    }
+  }
+}
+</script>
+
+<style scoped>
+button {
+  width: 100%;
+}
+
+.error-message {
+  color: red;
+}
+</style>
+
diff --git a/coeditor_frontend/src/views/NotFoundView.vue b/coeditor_frontend/src/views/NotFoundView.vue
new file mode 100644
index 0000000..0345dc9
--- /dev/null
+++ b/coeditor_frontend/src/views/NotFoundView.vue
@@ -0,0 +1,19 @@
+<template>
+  <ContentBase>
+    404
+  </ContentBase> 
+</template>
+
+<script>
+import ContentBase from  '../components/ContentBase';
+
+export default {
+  name: 'NotFoundView',
+  components: {
+    ContentBase,
+  }
+}
+</script>
+
+<style scoped>
+</style>
diff --git a/coeditor_frontend/src/views/RegisterView.vue b/coeditor_frontend/src/views/RegisterView.vue
new file mode 100644
index 0000000..05e1446
--- /dev/null
+++ b/coeditor_frontend/src/views/RegisterView.vue
@@ -0,0 +1,96 @@
+<template>
+  <ContentBase>
+    <div class="row justify-content-md-center">
+      <div class="col-3">
+        <form @submit.prevent="register">
+          <div class="mb-3">
+            <label for="username" class="form-label">用户名</label>
+            <input v-model="username" type="text" class="form-control" id="username">
+          </div>
+          <div class="mb-3">
+            <label for="password" class="form-label">密码</label>
+            <input v-model="password" type="password" class="form-control" id="password">
+          </div>
+           <div class="mb-3">
+            <label for="password" class="form-label">确认密码</label>
+            <input v-model="password_confirm" type="password" class="form-control" id="password_confirm">
+          </div>
+          <div class="error-message">{{ error_message }}</div>
+          <button type="submit" class="btn btn-primary">注册</button>
+        </form>
+      </div>
+    </div>
+  </ContentBase> 
+</template>
+
+<script>
+import ContentBase from  '../components/ContentBase';
+import { ref } from 'vue';
+import { useStore } from 'vuex';
+import $ from 'jquery';
+import router from  '@/router/index.js';
+
+export default {
+  name: 'RegisterView',
+  components: {
+    ContentBase,
+  },
+  setup(){
+    let store = useStore();
+    let username = ref('');
+    let password = ref('');
+    let password_confirm = ref('');
+    let error_message = '';
+
+    const register = () => {
+      $.ajax({
+        url:'http://47.106.113.194:8000/register/',
+        type:'post',
+        data:{
+          username:username.value,
+          password:password.value,
+          password_confirm:password_confirm.value,
+        },
+        success(resp){
+          console.log(resp);
+          if (resp.result === 'success'){
+            store.dispatch('login',{
+              username:username.value,
+              password:password.value,
+              success(){
+                error_message = '';
+                router.push({name:'home'});
+              },
+              error(){
+                error_message = "系统异常";
+              }
+            });
+          }
+          else {
+            error_message = resp.result;
+          }
+        }
+      });
+
+    };
+    return {
+      username,
+      password,
+      password_confirm,
+      error_message,
+      register,
+    }
+  }
+}
+</script>
+
+<style scoped>
+button {
+  width: 100%;
+}
+
+.error-message {
+  color: red;
+}
+</style>
+
diff --git a/coeditor_frontend/src/views/UserProfileView.vue b/coeditor_frontend/src/views/UserProfileView.vue
new file mode 100644
index 0000000..f28f42b
--- /dev/null
+++ b/coeditor_frontend/src/views/UserProfileView.vue
@@ -0,0 +1,29 @@
+<template>
+  <ContentBase>
+      <div>
+          {{ $store.state.user.username }}
+      </div>
+  </ContentBase> 
+</template>
+
+<script>
+import ContentBase from  '../components/ContentBase';
+import { useStore } from 'vuex';
+
+export default {
+  name: 'UserProfileView',
+  components: {
+    ContentBase,
+  },
+  setup(){
+      let store = useStore();
+      return {
+          store,
+      }
+  }
+}
+</script>
+
+<style scoped>
+</style>
+

From 37ebd51a699da6b81c15e7ca9d56a03f3a96548a Mon Sep 17 00:00:00 2001
From: liuchen <2468216537@qq.com>
Date: Fri, 15 Nov 2024 15:38:29 +0800
Subject: [PATCH 2/2] complete open with ckeditor

---
 .gitignore                                    |    1 +
 ckeditor5/src/App.vue                         |    1 +
 coeditor_frontend/package-lock.json           | 1113 ++++++++++++++++-
 coeditor_frontend/package.json                |    5 +
 .../src/components/FileFiled.vue              |   14 +-
 .../src/components/FolderFiled.vue            |   11 +-
 coeditor_frontend/src/components/NavBar.vue   |   50 +-
 coeditor_frontend/src/components/PathBar.vue  |   37 +
 .../src/components/RightMenu.vue              |   10 -
 coeditor_frontend/src/components/plugins.js   |  212 ++++
 coeditor_frontend/src/components/utils.js     |  143 +++
 coeditor_frontend/src/main.js                 |    9 +-
 coeditor_frontend/src/public/favicon.ico      |  Bin 0 -> 4286 bytes
 coeditor_frontend/src/public/index.html       |   17 +
 coeditor_frontend/src/public/style.css        |  281 +++++
 coeditor_frontend/src/router/index.js         |    6 +
 coeditor_frontend/src/store/user.js           |   12 +-
 coeditor_frontend/src/views/CkeditorView.vue  |  803 ++++++++++++
 coeditor_frontend/src/views/HomeView.vue      |   42 +-
 .../src/views/UserProfileView.vue             |    4 +
 coeditor_frontend/vue.config.js               |   19 +-
 21 files changed, 2698 insertions(+), 92 deletions(-)
 create mode 100644 coeditor_frontend/src/components/PathBar.vue
 create mode 100644 coeditor_frontend/src/components/plugins.js
 create mode 100644 coeditor_frontend/src/components/utils.js
 create mode 100644 coeditor_frontend/src/public/favicon.ico
 create mode 100644 coeditor_frontend/src/public/index.html
 create mode 100644 coeditor_frontend/src/public/style.css
 create mode 100644 coeditor_frontend/src/views/CkeditorView.vue

diff --git a/.gitignore b/.gitignore
index 8930961..a7b15bb 100644
--- a/.gitignore
+++ b/.gitignore
@@ -8,3 +8,4 @@ GinSkeleton/.idea/
 ckeditor5/node_modules/*
 GinSkeleton/config/gorm_v2.yml
 GinSkeleton/public/storage
+node_modules/
diff --git a/ckeditor5/src/App.vue b/ckeditor5/src/App.vue
index 93d6775..29f7828 100644
--- a/ckeditor5/src/App.vue
+++ b/ckeditor5/src/App.vue
@@ -724,6 +724,7 @@ export default {
 			this.$refs.editorToolbarElement.appendChild(editor.ui.view.toolbar.element);
 			this.$refs.editorMenuBarElement.appendChild(editor.ui.view.menuBarView.element);
 			// 这里向后端获取要打开文件地内容
+			
 			const pageContent = '<h2>Congratulations on setting up CKEditor 5! 🎉</h2>\n<p>\n    You\'ve successfully created a CKEditor 5 project. This powerful text editor will enhance your application, enabling rich text editing\n    capabilities that are customizable and easy to use.\n</p>\n<h3>What\'s next?</h3>\n<ol>\n    <li>\n        <strong>Integrate into your app</strong>: time to bring the editing into your application. Take the code you created and add to your\n        application.\n    </li>\n    <li>\n        <strong>Explore features:</strong> Experiment with different plugins and toolbar options to discover what works best for your needs.\n    </li>\n    <li>\n        <strong>Customize your editor:</strong> Tailor the editor\'s configuration to match your application\'s style and requirements. Or even\n        write your plugin!\n    </li>\n</ol>\n<p>\n    Keep experimenting, and don\'t hesitate to push the boundaries of what you can achieve with CKEditor 5. Your feedback is invaluable to us\n    as we strive to improve and evolve. Happy editing!\n</p>\n<h3>Helpful resources</h3>\n<ul>\n    <li>📝 <a href="https://orders.ckeditor.com/trial/premium-features">Trial sign up</a>,</li>\n    <li>📕 <a href="https://ckeditor.com/docs/ckeditor5/latest/installation/index.html">Documentation</a>,</li>\n    <li>⭐️ <a href="https://github.com/ckeditor/ckeditor5">GitHub</a> (star us if you can!),</li>\n    <li>🏠 <a href="https://ckeditor.com">CKEditor Homepage</a>,</li>\n    <li>🧑‍💻 <a href="https://ckeditor.com/ckeditor-5/demo/">CKEditor 5 Demos</a>,</li>\n</ul>\n<h3>Need help?</h3>\n<p>\n    See this text, but the editor is not starting up? Check the browser\'s console for clues and guidance. It may be related to an incorrect\n    license key if you use premium features or another feature-related requirement. If you cannot make it work, file a GitHub issue, and we\n    will help as soon as possible!\n</p>\n';
 			// 打开已有文本就将pageContent替换
 			// TODO
diff --git a/coeditor_frontend/package-lock.json b/coeditor_frontend/package-lock.json
index 543c4d3..ca058a2 100644
--- a/coeditor_frontend/package-lock.json
+++ b/coeditor_frontend/package-lock.json
@@ -8,9 +8,14 @@
       "name": "coeditor_frontend",
       "version": "0.1.0",
       "dependencies": {
+        "@ckeditor/ckeditor5-vue": "^7.2.0",
         "@popperjs/core": "^2.11.8",
         "bootstrap": "^5.3.3",
+        "ckeditor5": "^43.3.1",
         "core-js": "^3.8.3",
+        "element-plus": "^2.8.7",
+        "file-saver": "^2.0.5",
+        "html-docx-js-typescript": "^0.1.5",
         "jquery": "^3.7.1",
         "jwt-decode": "^4.0.0",
         "vue": "^3.2.13",
@@ -1680,6 +1685,726 @@
         "node": ">=6.9.0"
       }
     },
+    "node_modules/@ckeditor/ckeditor5-adapter-ckfinder": {
+      "version": "43.3.1",
+      "resolved": "https://registry.npmmirror.com/@ckeditor/ckeditor5-adapter-ckfinder/-/ckeditor5-adapter-ckfinder-43.3.1.tgz",
+      "integrity": "sha512-fOnEq31euR9B/awWZCOc8KfgLwwG4ACtqBhSv7Hu6VOgHa5TKWyWAdhr9ILSiUp7NMfYJoTQStbxcXZIWPqQXQ==",
+      "dependencies": {
+        "@ckeditor/ckeditor5-core": "43.3.1",
+        "@ckeditor/ckeditor5-upload": "43.3.1",
+        "ckeditor5": "43.3.1"
+      }
+    },
+    "node_modules/@ckeditor/ckeditor5-alignment": {
+      "version": "43.3.1",
+      "resolved": "https://registry.npmmirror.com/@ckeditor/ckeditor5-alignment/-/ckeditor5-alignment-43.3.1.tgz",
+      "integrity": "sha512-E+04zNdNBFDNgQajrWl8iFQqA1sB29y/XDFFRK+bzhcUaWdMadr88yodjHHdcax8/zI+GzBElCvWGEGchyrL+Q==",
+      "dependencies": {
+        "@ckeditor/ckeditor5-core": "43.3.1",
+        "@ckeditor/ckeditor5-ui": "43.3.1",
+        "@ckeditor/ckeditor5-utils": "43.3.1",
+        "ckeditor5": "43.3.1"
+      }
+    },
+    "node_modules/@ckeditor/ckeditor5-autoformat": {
+      "version": "43.3.1",
+      "resolved": "https://registry.npmmirror.com/@ckeditor/ckeditor5-autoformat/-/ckeditor5-autoformat-43.3.1.tgz",
+      "integrity": "sha512-hSQxIXIObrMfxijMPmz8odOtz/wD5SwuGZWVoF5km3EtRQxZwAcQr1Vjy+VHHPo6PZ+o3YoLP+IHCaULtNobYg==",
+      "dependencies": {
+        "@ckeditor/ckeditor5-core": "43.3.1",
+        "@ckeditor/ckeditor5-engine": "43.3.1",
+        "@ckeditor/ckeditor5-typing": "43.3.1",
+        "@ckeditor/ckeditor5-utils": "43.3.1",
+        "ckeditor5": "43.3.1"
+      }
+    },
+    "node_modules/@ckeditor/ckeditor5-autosave": {
+      "version": "43.3.1",
+      "resolved": "https://registry.npmmirror.com/@ckeditor/ckeditor5-autosave/-/ckeditor5-autosave-43.3.1.tgz",
+      "integrity": "sha512-28667m7ea0wBZMb3uIzgipanB4DrDvKn4o+mRUDExlRT8M14vn1u/ILX8ZJy28Rihbg2wPcVh6rP3zoQjcucHw==",
+      "dependencies": {
+        "@ckeditor/ckeditor5-core": "43.3.1",
+        "@ckeditor/ckeditor5-utils": "43.3.1",
+        "ckeditor5": "43.3.1",
+        "lodash-es": "4.17.21"
+      }
+    },
+    "node_modules/@ckeditor/ckeditor5-basic-styles": {
+      "version": "43.3.1",
+      "resolved": "https://registry.npmmirror.com/@ckeditor/ckeditor5-basic-styles/-/ckeditor5-basic-styles-43.3.1.tgz",
+      "integrity": "sha512-1RBnPmgsIoxPL7wZhId2KsfPujITbEAfzHhi0c6m4kuWlkmcVXYldWvUvCvAUguAznx4LOxhKlp6RdFSPTFTbg==",
+      "dependencies": {
+        "@ckeditor/ckeditor5-core": "43.3.1",
+        "@ckeditor/ckeditor5-typing": "43.3.1",
+        "@ckeditor/ckeditor5-ui": "43.3.1",
+        "ckeditor5": "43.3.1"
+      }
+    },
+    "node_modules/@ckeditor/ckeditor5-block-quote": {
+      "version": "43.3.1",
+      "resolved": "https://registry.npmmirror.com/@ckeditor/ckeditor5-block-quote/-/ckeditor5-block-quote-43.3.1.tgz",
+      "integrity": "sha512-cgY4GKwMlIVLnhszPoc1ortp+T/s3TLowrwRFtWYxTKSsHWBGFlZUL6oMASPunpXvvJqHcgnKlCMxVSh2VMCkQ==",
+      "dependencies": {
+        "@ckeditor/ckeditor5-core": "43.3.1",
+        "@ckeditor/ckeditor5-enter": "43.3.1",
+        "@ckeditor/ckeditor5-typing": "43.3.1",
+        "@ckeditor/ckeditor5-ui": "43.3.1",
+        "@ckeditor/ckeditor5-utils": "43.3.1",
+        "ckeditor5": "43.3.1"
+      }
+    },
+    "node_modules/@ckeditor/ckeditor5-ckbox": {
+      "version": "43.3.1",
+      "resolved": "https://registry.npmmirror.com/@ckeditor/ckeditor5-ckbox/-/ckeditor5-ckbox-43.3.1.tgz",
+      "integrity": "sha512-KObL9w/QBWJi0lG2zfm+x124Kzd7aVt+UaJHJEwsAPwhZvqM0LCUeR6wwb0oCN6ph5qrCjXoj09z7z8Txk5IwA==",
+      "dependencies": {
+        "@ckeditor/ckeditor5-core": "43.3.1",
+        "@ckeditor/ckeditor5-engine": "43.3.1",
+        "@ckeditor/ckeditor5-ui": "43.3.1",
+        "@ckeditor/ckeditor5-upload": "43.3.1",
+        "@ckeditor/ckeditor5-utils": "43.3.1",
+        "blurhash": "2.0.5",
+        "ckeditor5": "43.3.1",
+        "lodash-es": "4.17.21"
+      }
+    },
+    "node_modules/@ckeditor/ckeditor5-ckfinder": {
+      "version": "43.3.1",
+      "resolved": "https://registry.npmmirror.com/@ckeditor/ckeditor5-ckfinder/-/ckeditor5-ckfinder-43.3.1.tgz",
+      "integrity": "sha512-Yji6c1/0H5fExDcT+NNyQQePx2cd8Ul1Xuko1UVmsLN2Vhi7VIDJjEkCFndJozd8VQqI62Obe1GTyjmapBV5+A==",
+      "dependencies": {
+        "@ckeditor/ckeditor5-core": "43.3.1",
+        "@ckeditor/ckeditor5-ui": "43.3.1",
+        "@ckeditor/ckeditor5-utils": "43.3.1",
+        "ckeditor5": "43.3.1"
+      }
+    },
+    "node_modules/@ckeditor/ckeditor5-clipboard": {
+      "version": "43.3.1",
+      "resolved": "https://registry.npmmirror.com/@ckeditor/ckeditor5-clipboard/-/ckeditor5-clipboard-43.3.1.tgz",
+      "integrity": "sha512-Ke6fVEy1fF3AWHMtKvF1pAoDYBVOG4q+gDHD8+dcV6KPK1uA/CR0mw6TZsslQQquT4jC79y05IWu2bq1Mxv01w==",
+      "dependencies": {
+        "@ckeditor/ckeditor5-core": "43.3.1",
+        "@ckeditor/ckeditor5-engine": "43.3.1",
+        "@ckeditor/ckeditor5-ui": "43.3.1",
+        "@ckeditor/ckeditor5-utils": "43.3.1",
+        "@ckeditor/ckeditor5-widget": "43.3.1",
+        "lodash-es": "4.17.21"
+      }
+    },
+    "node_modules/@ckeditor/ckeditor5-cloud-services": {
+      "version": "43.3.1",
+      "resolved": "https://registry.npmmirror.com/@ckeditor/ckeditor5-cloud-services/-/ckeditor5-cloud-services-43.3.1.tgz",
+      "integrity": "sha512-JppySF+uWedDXPTVZBsTfZCe3qedDAdWSgw0Ww/qi4/sPFcgf/MaQ0LBHbl2Ii7JlJjng82F1F2kv9Ny/Rkauw==",
+      "dependencies": {
+        "@ckeditor/ckeditor5-core": "43.3.1",
+        "@ckeditor/ckeditor5-utils": "43.3.1",
+        "ckeditor5": "43.3.1"
+      }
+    },
+    "node_modules/@ckeditor/ckeditor5-code-block": {
+      "version": "43.3.1",
+      "resolved": "https://registry.npmmirror.com/@ckeditor/ckeditor5-code-block/-/ckeditor5-code-block-43.3.1.tgz",
+      "integrity": "sha512-UGhGCPNfFXLua0TmszLSWX6BlkemaPULN1EZ+FBPsUZb757qWWWVWI9GKLmAc4jSPqOv+azU+JAZJzX9bE1oYA==",
+      "dependencies": {
+        "@ckeditor/ckeditor5-clipboard": "43.3.1",
+        "@ckeditor/ckeditor5-core": "43.3.1",
+        "@ckeditor/ckeditor5-engine": "43.3.1",
+        "@ckeditor/ckeditor5-enter": "43.3.1",
+        "@ckeditor/ckeditor5-ui": "43.3.1",
+        "@ckeditor/ckeditor5-utils": "43.3.1",
+        "ckeditor5": "43.3.1"
+      }
+    },
+    "node_modules/@ckeditor/ckeditor5-core": {
+      "version": "43.3.1",
+      "resolved": "https://registry.npmmirror.com/@ckeditor/ckeditor5-core/-/ckeditor5-core-43.3.1.tgz",
+      "integrity": "sha512-6pil2OF4auF3PKrg1Oa86CqC91ZYc+NuHih0ebM0JW/I06d+0smnJg5dw4yN7mKbghbJS8mNrusxA5cf6Hkh6w==",
+      "dependencies": {
+        "@ckeditor/ckeditor5-engine": "43.3.1",
+        "@ckeditor/ckeditor5-utils": "43.3.1",
+        "@ckeditor/ckeditor5-watchdog": "43.3.1",
+        "lodash-es": "4.17.21"
+      }
+    },
+    "node_modules/@ckeditor/ckeditor5-easy-image": {
+      "version": "43.3.1",
+      "resolved": "https://registry.npmmirror.com/@ckeditor/ckeditor5-easy-image/-/ckeditor5-easy-image-43.3.1.tgz",
+      "integrity": "sha512-Cd5NojL0Vfa1SQj6uzbP3oSHvQY5ys2hXF/2jNsYKLePTCybSvGkg5REv1JifM6kSNRH1VXdad7a2LkqvXnCnA==",
+      "dependencies": {
+        "@ckeditor/ckeditor5-core": "43.3.1",
+        "@ckeditor/ckeditor5-upload": "43.3.1",
+        "@ckeditor/ckeditor5-utils": "43.3.1",
+        "ckeditor5": "43.3.1"
+      }
+    },
+    "node_modules/@ckeditor/ckeditor5-editor-balloon": {
+      "version": "43.3.1",
+      "resolved": "https://registry.npmmirror.com/@ckeditor/ckeditor5-editor-balloon/-/ckeditor5-editor-balloon-43.3.1.tgz",
+      "integrity": "sha512-klS1FZG29nJE/XbfRXrXtwYU/9uCFdi7xGbYfaJnmyNt54h46aiquKacosbiffA87Tr5sT3Oqm3dBbNlsU158w==",
+      "dependencies": {
+        "@ckeditor/ckeditor5-core": "43.3.1",
+        "@ckeditor/ckeditor5-engine": "43.3.1",
+        "@ckeditor/ckeditor5-ui": "43.3.1",
+        "@ckeditor/ckeditor5-utils": "43.3.1",
+        "ckeditor5": "43.3.1",
+        "lodash-es": "4.17.21"
+      }
+    },
+    "node_modules/@ckeditor/ckeditor5-editor-classic": {
+      "version": "43.3.1",
+      "resolved": "https://registry.npmmirror.com/@ckeditor/ckeditor5-editor-classic/-/ckeditor5-editor-classic-43.3.1.tgz",
+      "integrity": "sha512-wjBeXUQBuvz6CmGlb5XncJ9cHE7tozU6eoorycfSTQCzqr5uE57LWTlKclU42w7MgS2ya5V2kLnncr0ZqrZ2Vw==",
+      "dependencies": {
+        "@ckeditor/ckeditor5-core": "43.3.1",
+        "@ckeditor/ckeditor5-engine": "43.3.1",
+        "@ckeditor/ckeditor5-ui": "43.3.1",
+        "@ckeditor/ckeditor5-utils": "43.3.1",
+        "ckeditor5": "43.3.1",
+        "lodash-es": "4.17.21"
+      }
+    },
+    "node_modules/@ckeditor/ckeditor5-editor-decoupled": {
+      "version": "43.3.1",
+      "resolved": "https://registry.npmmirror.com/@ckeditor/ckeditor5-editor-decoupled/-/ckeditor5-editor-decoupled-43.3.1.tgz",
+      "integrity": "sha512-aw2iZ+WCcCu9sUAnsHhsXZWLeVPyiLhZfpZDuEWjPlvsrCfT0RfSuwMcfx7l9PREA09VR8+6MTstm61EG8dmWQ==",
+      "dependencies": {
+        "@ckeditor/ckeditor5-core": "43.3.1",
+        "@ckeditor/ckeditor5-engine": "43.3.1",
+        "@ckeditor/ckeditor5-ui": "43.3.1",
+        "@ckeditor/ckeditor5-utils": "43.3.1",
+        "ckeditor5": "43.3.1",
+        "lodash-es": "4.17.21"
+      }
+    },
+    "node_modules/@ckeditor/ckeditor5-editor-inline": {
+      "version": "43.3.1",
+      "resolved": "https://registry.npmmirror.com/@ckeditor/ckeditor5-editor-inline/-/ckeditor5-editor-inline-43.3.1.tgz",
+      "integrity": "sha512-3iZiWl2aM1bCnS52NeBoAqCVowABhWrBlns27JEGKZ+LNPZroMie7uKuMX3YQGYE2awFnsyP6XofoJtu6CcKCA==",
+      "dependencies": {
+        "@ckeditor/ckeditor5-core": "43.3.1",
+        "@ckeditor/ckeditor5-engine": "43.3.1",
+        "@ckeditor/ckeditor5-ui": "43.3.1",
+        "@ckeditor/ckeditor5-utils": "43.3.1",
+        "ckeditor5": "43.3.1",
+        "lodash-es": "4.17.21"
+      }
+    },
+    "node_modules/@ckeditor/ckeditor5-editor-multi-root": {
+      "version": "43.3.1",
+      "resolved": "https://registry.npmmirror.com/@ckeditor/ckeditor5-editor-multi-root/-/ckeditor5-editor-multi-root-43.3.1.tgz",
+      "integrity": "sha512-HDgfTuotrHW91AZ+x+lumwo1tngRRZ87dnHT8kjSRFWAeXPSd2Kw986++Oj9K080+idZaYLF+IutAOqvCT32sw==",
+      "dependencies": {
+        "@ckeditor/ckeditor5-core": "43.3.1",
+        "@ckeditor/ckeditor5-engine": "43.3.1",
+        "@ckeditor/ckeditor5-ui": "43.3.1",
+        "@ckeditor/ckeditor5-utils": "43.3.1",
+        "ckeditor5": "43.3.1",
+        "lodash-es": "4.17.21"
+      }
+    },
+    "node_modules/@ckeditor/ckeditor5-engine": {
+      "version": "43.3.1",
+      "resolved": "https://registry.npmmirror.com/@ckeditor/ckeditor5-engine/-/ckeditor5-engine-43.3.1.tgz",
+      "integrity": "sha512-Fkv3ibQLDPVHFH0z4/+gA5wrkPVWOen+Cjv/NecNBeAszZUo+F2j9RwvQ1zHwtGb0RWj3+BWOPgo8jhSe7tFgA==",
+      "dependencies": {
+        "@ckeditor/ckeditor5-utils": "43.3.1",
+        "lodash-es": "4.17.21"
+      }
+    },
+    "node_modules/@ckeditor/ckeditor5-enter": {
+      "version": "43.3.1",
+      "resolved": "https://registry.npmmirror.com/@ckeditor/ckeditor5-enter/-/ckeditor5-enter-43.3.1.tgz",
+      "integrity": "sha512-xaHnU2RbfYi8ilfN260pB3YDvJ9lE4SfiFQusyRdWkeBo5gDAGBbQY+qCC/hmxkr/yftNZfK+d7Ow93xXtqEwg==",
+      "dependencies": {
+        "@ckeditor/ckeditor5-core": "43.3.1",
+        "@ckeditor/ckeditor5-engine": "43.3.1",
+        "@ckeditor/ckeditor5-utils": "43.3.1"
+      }
+    },
+    "node_modules/@ckeditor/ckeditor5-essentials": {
+      "version": "43.3.1",
+      "resolved": "https://registry.npmmirror.com/@ckeditor/ckeditor5-essentials/-/ckeditor5-essentials-43.3.1.tgz",
+      "integrity": "sha512-bZtzXhmBz8XF9J4eUxOjURmw0HJPKIqo18a6vNxg07W8z3ouHMb9ke//4z4FF9N/1dbtA7a2+jIACO6WvXrX4A==",
+      "dependencies": {
+        "@ckeditor/ckeditor5-clipboard": "43.3.1",
+        "@ckeditor/ckeditor5-core": "43.3.1",
+        "@ckeditor/ckeditor5-enter": "43.3.1",
+        "@ckeditor/ckeditor5-select-all": "43.3.1",
+        "@ckeditor/ckeditor5-typing": "43.3.1",
+        "@ckeditor/ckeditor5-ui": "43.3.1",
+        "@ckeditor/ckeditor5-undo": "43.3.1",
+        "ckeditor5": "43.3.1"
+      }
+    },
+    "node_modules/@ckeditor/ckeditor5-find-and-replace": {
+      "version": "43.3.1",
+      "resolved": "https://registry.npmmirror.com/@ckeditor/ckeditor5-find-and-replace/-/ckeditor5-find-and-replace-43.3.1.tgz",
+      "integrity": "sha512-U9dyK8yQgxGTUphRbqdUJbvfi5v7zzijCo3Kj51NxyWwOFh7SGReQxHDGn44DmSRold6lg4F1sbXeFdwu1o+WA==",
+      "dependencies": {
+        "@ckeditor/ckeditor5-core": "43.3.1",
+        "@ckeditor/ckeditor5-ui": "43.3.1",
+        "@ckeditor/ckeditor5-utils": "43.3.1",
+        "ckeditor5": "43.3.1",
+        "lodash-es": "4.17.21"
+      }
+    },
+    "node_modules/@ckeditor/ckeditor5-font": {
+      "version": "43.3.1",
+      "resolved": "https://registry.npmmirror.com/@ckeditor/ckeditor5-font/-/ckeditor5-font-43.3.1.tgz",
+      "integrity": "sha512-NOeBtScqMuBLVWFPuW0snleh7rMFkNb006yzDIG6JApnF3Vxi0JLQXub/lPHPgw5srqJ3z159DWT++exoyz/mQ==",
+      "dependencies": {
+        "@ckeditor/ckeditor5-core": "43.3.1",
+        "@ckeditor/ckeditor5-engine": "43.3.1",
+        "@ckeditor/ckeditor5-ui": "43.3.1",
+        "@ckeditor/ckeditor5-utils": "43.3.1",
+        "ckeditor5": "43.3.1"
+      }
+    },
+    "node_modules/@ckeditor/ckeditor5-heading": {
+      "version": "43.3.1",
+      "resolved": "https://registry.npmmirror.com/@ckeditor/ckeditor5-heading/-/ckeditor5-heading-43.3.1.tgz",
+      "integrity": "sha512-cc8H027Y2OwvYDGMTbBSzE+oZaiLMZtlUnkgiolMw/OQ59ysONYi+KqyMzBMTuaXrkP3CLM57ZbsVGASQ3IQmQ==",
+      "dependencies": {
+        "@ckeditor/ckeditor5-core": "43.3.1",
+        "@ckeditor/ckeditor5-engine": "43.3.1",
+        "@ckeditor/ckeditor5-paragraph": "43.3.1",
+        "@ckeditor/ckeditor5-ui": "43.3.1",
+        "@ckeditor/ckeditor5-utils": "43.3.1",
+        "ckeditor5": "43.3.1"
+      }
+    },
+    "node_modules/@ckeditor/ckeditor5-highlight": {
+      "version": "43.3.1",
+      "resolved": "https://registry.npmmirror.com/@ckeditor/ckeditor5-highlight/-/ckeditor5-highlight-43.3.1.tgz",
+      "integrity": "sha512-XVJq1YP4IAaWQBAyY1xlKOfzkpnclUH8zTUPaW3TZUGK5t6W/vFT+KAzYfUp7PdBb+PP8/O47FwKTvIQBkbqFw==",
+      "dependencies": {
+        "@ckeditor/ckeditor5-core": "43.3.1",
+        "@ckeditor/ckeditor5-ui": "43.3.1",
+        "ckeditor5": "43.3.1"
+      }
+    },
+    "node_modules/@ckeditor/ckeditor5-horizontal-line": {
+      "version": "43.3.1",
+      "resolved": "https://registry.npmmirror.com/@ckeditor/ckeditor5-horizontal-line/-/ckeditor5-horizontal-line-43.3.1.tgz",
+      "integrity": "sha512-zkKe0S9gBXwveBUzUuCBPWyrzHQor/zcMCCX9YQk1StUxtRRsURNvWOoFeoG+Vf5jMGSA2gpnBgIo70WrX4A3A==",
+      "dependencies": {
+        "@ckeditor/ckeditor5-core": "43.3.1",
+        "@ckeditor/ckeditor5-ui": "43.3.1",
+        "@ckeditor/ckeditor5-widget": "43.3.1",
+        "ckeditor5": "43.3.1"
+      }
+    },
+    "node_modules/@ckeditor/ckeditor5-html-embed": {
+      "version": "43.3.1",
+      "resolved": "https://registry.npmmirror.com/@ckeditor/ckeditor5-html-embed/-/ckeditor5-html-embed-43.3.1.tgz",
+      "integrity": "sha512-VqIhhPwMgAzmPqjvQUQYaFmCFglkg203W+LSVCwrvgVZ9mVtKbkhwCHBJnLhG7qatar7Gg93bObfAFdAjsaR2A==",
+      "dependencies": {
+        "@ckeditor/ckeditor5-core": "43.3.1",
+        "@ckeditor/ckeditor5-ui": "43.3.1",
+        "@ckeditor/ckeditor5-utils": "43.3.1",
+        "@ckeditor/ckeditor5-widget": "43.3.1",
+        "ckeditor5": "43.3.1"
+      }
+    },
+    "node_modules/@ckeditor/ckeditor5-html-support": {
+      "version": "43.3.1",
+      "resolved": "https://registry.npmmirror.com/@ckeditor/ckeditor5-html-support/-/ckeditor5-html-support-43.3.1.tgz",
+      "integrity": "sha512-cnQ+kCPYH5GiSe5S+13Fr0vuS7DzT4Onx11fvOkssUujtAJ1e/C7hNf5Ehd+SOAgr5IzevutA/+OeR2KHGjIag==",
+      "dependencies": {
+        "@ckeditor/ckeditor5-core": "43.3.1",
+        "@ckeditor/ckeditor5-engine": "43.3.1",
+        "@ckeditor/ckeditor5-enter": "43.3.1",
+        "@ckeditor/ckeditor5-utils": "43.3.1",
+        "@ckeditor/ckeditor5-widget": "43.3.1",
+        "ckeditor5": "43.3.1",
+        "lodash-es": "4.17.21"
+      }
+    },
+    "node_modules/@ckeditor/ckeditor5-image": {
+      "version": "43.3.1",
+      "resolved": "https://registry.npmmirror.com/@ckeditor/ckeditor5-image/-/ckeditor5-image-43.3.1.tgz",
+      "integrity": "sha512-QgHxZtWpclzQ5SUrh1oMsGFCvjykxge5IKe96iKUyAVrhyQp60RhW8DdAElHnPUg3wwILMYE7cKMphknCxcVkQ==",
+      "dependencies": {
+        "@ckeditor/ckeditor5-clipboard": "43.3.1",
+        "@ckeditor/ckeditor5-core": "43.3.1",
+        "@ckeditor/ckeditor5-engine": "43.3.1",
+        "@ckeditor/ckeditor5-typing": "43.3.1",
+        "@ckeditor/ckeditor5-ui": "43.3.1",
+        "@ckeditor/ckeditor5-undo": "43.3.1",
+        "@ckeditor/ckeditor5-upload": "43.3.1",
+        "@ckeditor/ckeditor5-utils": "43.3.1",
+        "@ckeditor/ckeditor5-widget": "43.3.1",
+        "ckeditor5": "43.3.1",
+        "lodash-es": "4.17.21"
+      }
+    },
+    "node_modules/@ckeditor/ckeditor5-indent": {
+      "version": "43.3.1",
+      "resolved": "https://registry.npmmirror.com/@ckeditor/ckeditor5-indent/-/ckeditor5-indent-43.3.1.tgz",
+      "integrity": "sha512-CPU50tumKH7rJ6f9QEB/LHSyzKul9xP/43F1IesvOBWnOkAxQ2QI51oORT5WdKn4B0Z56ojAm48Q/ZUtsef+3w==",
+      "dependencies": {
+        "@ckeditor/ckeditor5-core": "43.3.1",
+        "@ckeditor/ckeditor5-engine": "43.3.1",
+        "@ckeditor/ckeditor5-ui": "43.3.1",
+        "@ckeditor/ckeditor5-utils": "43.3.1",
+        "ckeditor5": "43.3.1"
+      }
+    },
+    "node_modules/@ckeditor/ckeditor5-integrations-common": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmmirror.com/@ckeditor/ckeditor5-integrations-common/-/ckeditor5-integrations-common-2.2.0.tgz",
+      "integrity": "sha512-qH68tqgyMibuejo+VAJ+iSH3ZmZweqBEzaawv9hZb4zzSMkBityWBjSc2hKXMtmJgCNsbSK84cyHpa5J/MNyLg==",
+      "engines": {
+        "node": ">=18.0.0"
+      },
+      "peerDependencies": {
+        "ckeditor5": ">=42.0.0 || ^0.0.0-nightly"
+      }
+    },
+    "node_modules/@ckeditor/ckeditor5-language": {
+      "version": "43.3.1",
+      "resolved": "https://registry.npmmirror.com/@ckeditor/ckeditor5-language/-/ckeditor5-language-43.3.1.tgz",
+      "integrity": "sha512-M7npJRhLoZksnvjZ0fS+6hbAN4RebgZCE2bT9b3Z8Df2Alfy0GJEwJL5aQsYpr+78QFeytTpqzjxXLNLjOyEqA==",
+      "dependencies": {
+        "@ckeditor/ckeditor5-core": "43.3.1",
+        "@ckeditor/ckeditor5-ui": "43.3.1",
+        "@ckeditor/ckeditor5-utils": "43.3.1",
+        "ckeditor5": "43.3.1"
+      }
+    },
+    "node_modules/@ckeditor/ckeditor5-link": {
+      "version": "43.3.1",
+      "resolved": "https://registry.npmmirror.com/@ckeditor/ckeditor5-link/-/ckeditor5-link-43.3.1.tgz",
+      "integrity": "sha512-duTA7harmvZPZ2LbJ8tHnOrhx5lGk6AGavbDzK2xuicMncivm+amrkl/b771uA3Rr6gclHY77ZPcOuVaK+dp/g==",
+      "dependencies": {
+        "@ckeditor/ckeditor5-clipboard": "43.3.1",
+        "@ckeditor/ckeditor5-core": "43.3.1",
+        "@ckeditor/ckeditor5-engine": "43.3.1",
+        "@ckeditor/ckeditor5-typing": "43.3.1",
+        "@ckeditor/ckeditor5-ui": "43.3.1",
+        "@ckeditor/ckeditor5-utils": "43.3.1",
+        "@ckeditor/ckeditor5-widget": "43.3.1",
+        "ckeditor5": "43.3.1",
+        "lodash-es": "4.17.21"
+      }
+    },
+    "node_modules/@ckeditor/ckeditor5-list": {
+      "version": "43.3.1",
+      "resolved": "https://registry.npmmirror.com/@ckeditor/ckeditor5-list/-/ckeditor5-list-43.3.1.tgz",
+      "integrity": "sha512-PuR6uJ/SKvaXIgqTO3MUnX+00/xB/TalStiVqZqqG0xlYg47/eb6hul+4fmTPV7ahlJaon6Y3nO49TsPbbhApQ==",
+      "dependencies": {
+        "@ckeditor/ckeditor5-clipboard": "43.3.1",
+        "@ckeditor/ckeditor5-core": "43.3.1",
+        "@ckeditor/ckeditor5-engine": "43.3.1",
+        "@ckeditor/ckeditor5-enter": "43.3.1",
+        "@ckeditor/ckeditor5-typing": "43.3.1",
+        "@ckeditor/ckeditor5-ui": "43.3.1",
+        "@ckeditor/ckeditor5-utils": "43.3.1",
+        "ckeditor5": "43.3.1"
+      }
+    },
+    "node_modules/@ckeditor/ckeditor5-markdown-gfm": {
+      "version": "43.3.1",
+      "resolved": "https://registry.npmmirror.com/@ckeditor/ckeditor5-markdown-gfm/-/ckeditor5-markdown-gfm-43.3.1.tgz",
+      "integrity": "sha512-aVP2FqQP7okSAorQoItcYRbOd0J2O1ubGjtvGGzl3uC5TuKAtlWYWcBfiVTHKxCCtxywPRiEgBxwoGuB5mlwhA==",
+      "dependencies": {
+        "@ckeditor/ckeditor5-clipboard": "43.3.1",
+        "@ckeditor/ckeditor5-core": "43.3.1",
+        "@ckeditor/ckeditor5-engine": "43.3.1",
+        "ckeditor5": "43.3.1",
+        "marked": "4.0.12",
+        "turndown": "7.2.0",
+        "turndown-plugin-gfm": "1.0.2"
+      }
+    },
+    "node_modules/@ckeditor/ckeditor5-media-embed": {
+      "version": "43.3.1",
+      "resolved": "https://registry.npmmirror.com/@ckeditor/ckeditor5-media-embed/-/ckeditor5-media-embed-43.3.1.tgz",
+      "integrity": "sha512-3xMIaH/NTNEKv+lu1cRIIPGgDJgYI1DB+5NMXNVL3UGQkXdqW7PtgFDsOnhQwTAbyKpy+fHDngLb3eZuRdDkKw==",
+      "dependencies": {
+        "@ckeditor/ckeditor5-clipboard": "43.3.1",
+        "@ckeditor/ckeditor5-core": "43.3.1",
+        "@ckeditor/ckeditor5-engine": "43.3.1",
+        "@ckeditor/ckeditor5-typing": "43.3.1",
+        "@ckeditor/ckeditor5-ui": "43.3.1",
+        "@ckeditor/ckeditor5-undo": "43.3.1",
+        "@ckeditor/ckeditor5-utils": "43.3.1",
+        "@ckeditor/ckeditor5-widget": "43.3.1",
+        "ckeditor5": "43.3.1"
+      }
+    },
+    "node_modules/@ckeditor/ckeditor5-mention": {
+      "version": "43.3.1",
+      "resolved": "https://registry.npmmirror.com/@ckeditor/ckeditor5-mention/-/ckeditor5-mention-43.3.1.tgz",
+      "integrity": "sha512-yrOdynVNOS72RjTjhFHzv3Ofbm0eTBKFhuibxdKFfHtTR0QIqSVB5jU+aW1+Jq5LG73E+9eYtip5paSjkqJMWQ==",
+      "dependencies": {
+        "@ckeditor/ckeditor5-core": "43.3.1",
+        "@ckeditor/ckeditor5-typing": "43.3.1",
+        "@ckeditor/ckeditor5-ui": "43.3.1",
+        "@ckeditor/ckeditor5-utils": "43.3.1",
+        "ckeditor5": "43.3.1",
+        "lodash-es": "4.17.21"
+      }
+    },
+    "node_modules/@ckeditor/ckeditor5-minimap": {
+      "version": "43.3.1",
+      "resolved": "https://registry.npmmirror.com/@ckeditor/ckeditor5-minimap/-/ckeditor5-minimap-43.3.1.tgz",
+      "integrity": "sha512-2b0b4mZtRIHAvN/MFAVeqiGt58TZI7ixLcgJo0MHNesYlIk6v13opDWhQ9oefNe8OwJMkD3fAHMlAcg+fUqA9g==",
+      "dependencies": {
+        "@ckeditor/ckeditor5-core": "43.3.1",
+        "@ckeditor/ckeditor5-engine": "43.3.1",
+        "@ckeditor/ckeditor5-ui": "43.3.1",
+        "@ckeditor/ckeditor5-utils": "43.3.1",
+        "ckeditor5": "43.3.1"
+      }
+    },
+    "node_modules/@ckeditor/ckeditor5-page-break": {
+      "version": "43.3.1",
+      "resolved": "https://registry.npmmirror.com/@ckeditor/ckeditor5-page-break/-/ckeditor5-page-break-43.3.1.tgz",
+      "integrity": "sha512-6AI2GGJveEm/2GESUY01wSPM7AeqHqVuX4Hon20uCAXHYCQkDubOHJ0yV3oFXl7iHeO6Ue2DdlSLayIUXCLoEQ==",
+      "dependencies": {
+        "@ckeditor/ckeditor5-core": "43.3.1",
+        "@ckeditor/ckeditor5-ui": "43.3.1",
+        "@ckeditor/ckeditor5-widget": "43.3.1",
+        "ckeditor5": "43.3.1"
+      }
+    },
+    "node_modules/@ckeditor/ckeditor5-paragraph": {
+      "version": "43.3.1",
+      "resolved": "https://registry.npmmirror.com/@ckeditor/ckeditor5-paragraph/-/ckeditor5-paragraph-43.3.1.tgz",
+      "integrity": "sha512-16ry56X+uXuZEzGZwLS8zpX2DtWN/CHHu5pSz0r2VDZ1zUGLsq/MXutotZfzMMjgdED3x4mJRQE+WgiyRrlKDg==",
+      "dependencies": {
+        "@ckeditor/ckeditor5-core": "43.3.1",
+        "@ckeditor/ckeditor5-ui": "43.3.1",
+        "@ckeditor/ckeditor5-utils": "43.3.1"
+      }
+    },
+    "node_modules/@ckeditor/ckeditor5-paste-from-office": {
+      "version": "43.3.1",
+      "resolved": "https://registry.npmmirror.com/@ckeditor/ckeditor5-paste-from-office/-/ckeditor5-paste-from-office-43.3.1.tgz",
+      "integrity": "sha512-LLf1KB11jeYLDpQPq0d2QVPxQxp9kEibPAF4rGD4stPpRx9d+DbwmE59Y5wVASKvYJo+yNpR9CGWsE4ZgjwTWw==",
+      "dependencies": {
+        "@ckeditor/ckeditor5-clipboard": "43.3.1",
+        "@ckeditor/ckeditor5-core": "43.3.1",
+        "@ckeditor/ckeditor5-engine": "43.3.1",
+        "ckeditor5": "43.3.1"
+      }
+    },
+    "node_modules/@ckeditor/ckeditor5-remove-format": {
+      "version": "43.3.1",
+      "resolved": "https://registry.npmmirror.com/@ckeditor/ckeditor5-remove-format/-/ckeditor5-remove-format-43.3.1.tgz",
+      "integrity": "sha512-m7zvvYzHN/HExT0NoILXauVFI/AKQyuzPqqCI/VO1Ft5mLswXGuK6vmO1U10SmGz85etYZjEipKuouf2Anyqxg==",
+      "dependencies": {
+        "@ckeditor/ckeditor5-core": "43.3.1",
+        "@ckeditor/ckeditor5-ui": "43.3.1",
+        "@ckeditor/ckeditor5-utils": "43.3.1",
+        "ckeditor5": "43.3.1"
+      }
+    },
+    "node_modules/@ckeditor/ckeditor5-restricted-editing": {
+      "version": "43.3.1",
+      "resolved": "https://registry.npmmirror.com/@ckeditor/ckeditor5-restricted-editing/-/ckeditor5-restricted-editing-43.3.1.tgz",
+      "integrity": "sha512-L6sA6UrUPy4Q3AzF8yQGsgEadO1IcZv53Ijevk9KuD7dwLF4f9x4ukUFLlGRpoYHPAW/+RpADp2PPegjKHo9QQ==",
+      "dependencies": {
+        "@ckeditor/ckeditor5-core": "43.3.1",
+        "@ckeditor/ckeditor5-engine": "43.3.1",
+        "@ckeditor/ckeditor5-ui": "43.3.1",
+        "@ckeditor/ckeditor5-utils": "43.3.1",
+        "ckeditor5": "43.3.1"
+      }
+    },
+    "node_modules/@ckeditor/ckeditor5-select-all": {
+      "version": "43.3.1",
+      "resolved": "https://registry.npmmirror.com/@ckeditor/ckeditor5-select-all/-/ckeditor5-select-all-43.3.1.tgz",
+      "integrity": "sha512-oYQ8uF6hmlX7OefpJ0FflvKddAkEffg3fKMT2FAINwqxhX+O7h9RQZ79AiOkTab7HUTIkbhM5AlhFJIXiX0Z7Q==",
+      "dependencies": {
+        "@ckeditor/ckeditor5-core": "43.3.1",
+        "@ckeditor/ckeditor5-ui": "43.3.1",
+        "@ckeditor/ckeditor5-utils": "43.3.1"
+      }
+    },
+    "node_modules/@ckeditor/ckeditor5-show-blocks": {
+      "version": "43.3.1",
+      "resolved": "https://registry.npmmirror.com/@ckeditor/ckeditor5-show-blocks/-/ckeditor5-show-blocks-43.3.1.tgz",
+      "integrity": "sha512-o+IhZnjMmoF2qd4l1GqQqroeIEA29QAIOYfvrdMKZGrzVGmjbvwyNkbJRyZlAYhZqX8tLDPaPGn0tl+onhWtzw==",
+      "dependencies": {
+        "@ckeditor/ckeditor5-core": "43.3.1",
+        "@ckeditor/ckeditor5-ui": "43.3.1",
+        "ckeditor5": "43.3.1"
+      }
+    },
+    "node_modules/@ckeditor/ckeditor5-source-editing": {
+      "version": "43.3.1",
+      "resolved": "https://registry.npmmirror.com/@ckeditor/ckeditor5-source-editing/-/ckeditor5-source-editing-43.3.1.tgz",
+      "integrity": "sha512-Pq7WthQAiKa3A3q82bHqNRjQ/xlOpSX9kZHLm+CDH8XACxZbBF6Unz4JPR9zJRuQxkoFs314DM/PG6pPZQgXXA==",
+      "dependencies": {
+        "@ckeditor/ckeditor5-core": "43.3.1",
+        "@ckeditor/ckeditor5-theme-lark": "43.3.1",
+        "@ckeditor/ckeditor5-ui": "43.3.1",
+        "@ckeditor/ckeditor5-utils": "43.3.1",
+        "ckeditor5": "43.3.1"
+      }
+    },
+    "node_modules/@ckeditor/ckeditor5-special-characters": {
+      "version": "43.3.1",
+      "resolved": "https://registry.npmmirror.com/@ckeditor/ckeditor5-special-characters/-/ckeditor5-special-characters-43.3.1.tgz",
+      "integrity": "sha512-3iwrtISndl5hc+/LuSXht69xqkEv95zg8Qxv+ovREA3pvtgt5u9O0t7ELcmUeTTEs/hJkF2FDplIYQj5zIvO+g==",
+      "dependencies": {
+        "@ckeditor/ckeditor5-core": "43.3.1",
+        "@ckeditor/ckeditor5-typing": "43.3.1",
+        "@ckeditor/ckeditor5-ui": "43.3.1",
+        "@ckeditor/ckeditor5-utils": "43.3.1",
+        "ckeditor5": "43.3.1"
+      }
+    },
+    "node_modules/@ckeditor/ckeditor5-style": {
+      "version": "43.3.1",
+      "resolved": "https://registry.npmmirror.com/@ckeditor/ckeditor5-style/-/ckeditor5-style-43.3.1.tgz",
+      "integrity": "sha512-2+ATPa5y4ZUkak5xFTTDeUPhuCAYB4OPNt/QjMvrQjpEwXoWDJ4f8GqR9oFFsqEGMm65GrUp/xIQW8WRH43Kng==",
+      "dependencies": {
+        "@ckeditor/ckeditor5-core": "43.3.1",
+        "@ckeditor/ckeditor5-typing": "43.3.1",
+        "@ckeditor/ckeditor5-ui": "43.3.1",
+        "@ckeditor/ckeditor5-utils": "43.3.1",
+        "ckeditor5": "43.3.1",
+        "lodash-es": "4.17.21"
+      }
+    },
+    "node_modules/@ckeditor/ckeditor5-table": {
+      "version": "43.3.1",
+      "resolved": "https://registry.npmmirror.com/@ckeditor/ckeditor5-table/-/ckeditor5-table-43.3.1.tgz",
+      "integrity": "sha512-Qr3GkKELnG1EY7Bu9dGQBkGTqhVnygeHKDCTEG9m218shYsI5L6jFftGUzWmJzMpm3hNFkyYv+1YWaIoqfRzIQ==",
+      "dependencies": {
+        "@ckeditor/ckeditor5-clipboard": "43.3.1",
+        "@ckeditor/ckeditor5-core": "43.3.1",
+        "@ckeditor/ckeditor5-engine": "43.3.1",
+        "@ckeditor/ckeditor5-ui": "43.3.1",
+        "@ckeditor/ckeditor5-utils": "43.3.1",
+        "@ckeditor/ckeditor5-widget": "43.3.1",
+        "ckeditor5": "43.3.1",
+        "lodash-es": "4.17.21"
+      }
+    },
+    "node_modules/@ckeditor/ckeditor5-theme-lark": {
+      "version": "43.3.1",
+      "resolved": "https://registry.npmmirror.com/@ckeditor/ckeditor5-theme-lark/-/ckeditor5-theme-lark-43.3.1.tgz",
+      "integrity": "sha512-kAgeGx66jT31FFYwAoc43oX5ehQtiYE57OJWlPTXrDXxyq0Y+LYFW2/bp4UVYdZK+OKv9dp1Do3VQfxJoGzFjg==",
+      "dependencies": {
+        "@ckeditor/ckeditor5-ui": "43.3.1"
+      }
+    },
+    "node_modules/@ckeditor/ckeditor5-typing": {
+      "version": "43.3.1",
+      "resolved": "https://registry.npmmirror.com/@ckeditor/ckeditor5-typing/-/ckeditor5-typing-43.3.1.tgz",
+      "integrity": "sha512-sK45GlrOHqWOphVnzDKe3kofVJGhSRk34UQJnyXgMN+35QJqypnJeBYBnnHWL8+nK0S4zk9oQO3PuiRH6gg/WQ==",
+      "dependencies": {
+        "@ckeditor/ckeditor5-core": "43.3.1",
+        "@ckeditor/ckeditor5-engine": "43.3.1",
+        "@ckeditor/ckeditor5-utils": "43.3.1",
+        "lodash-es": "4.17.21"
+      }
+    },
+    "node_modules/@ckeditor/ckeditor5-ui": {
+      "version": "43.3.1",
+      "resolved": "https://registry.npmmirror.com/@ckeditor/ckeditor5-ui/-/ckeditor5-ui-43.3.1.tgz",
+      "integrity": "sha512-dbR4FK6mCkI89h4Joyf1PZt0Xsq0N+sZg05Z6BpYz6GS9U35C7J9bHxN469dvaIc8bJws4eYJ5x+St3LcvlduQ==",
+      "dependencies": {
+        "@ckeditor/ckeditor5-core": "43.3.1",
+        "@ckeditor/ckeditor5-engine": "43.3.1",
+        "@ckeditor/ckeditor5-utils": "43.3.1",
+        "color-convert": "2.0.1",
+        "color-parse": "1.4.2",
+        "lodash-es": "4.17.21",
+        "vanilla-colorful": "0.7.2"
+      }
+    },
+    "node_modules/@ckeditor/ckeditor5-undo": {
+      "version": "43.3.1",
+      "resolved": "https://registry.npmmirror.com/@ckeditor/ckeditor5-undo/-/ckeditor5-undo-43.3.1.tgz",
+      "integrity": "sha512-UxrWPlHzL/DKuxp4R5mlQvy995Ozehh5hQxY5yvL285Dzv6PY5pk627Wv/qS8AyfLMyVNiFO9bDWBIcT9igQRA==",
+      "dependencies": {
+        "@ckeditor/ckeditor5-core": "43.3.1",
+        "@ckeditor/ckeditor5-engine": "43.3.1",
+        "@ckeditor/ckeditor5-ui": "43.3.1"
+      }
+    },
+    "node_modules/@ckeditor/ckeditor5-upload": {
+      "version": "43.3.1",
+      "resolved": "https://registry.npmmirror.com/@ckeditor/ckeditor5-upload/-/ckeditor5-upload-43.3.1.tgz",
+      "integrity": "sha512-uOEhCgqgiK4V/CnbnuwHU/NUOG4ioQE5KUUtVmRG2xjQKg5C1uIT2dig+wnKw8vOdwVTMD2hVt7/OC/whQuheQ==",
+      "dependencies": {
+        "@ckeditor/ckeditor5-core": "43.3.1",
+        "@ckeditor/ckeditor5-utils": "43.3.1"
+      }
+    },
+    "node_modules/@ckeditor/ckeditor5-utils": {
+      "version": "43.3.1",
+      "resolved": "https://registry.npmmirror.com/@ckeditor/ckeditor5-utils/-/ckeditor5-utils-43.3.1.tgz",
+      "integrity": "sha512-4CyM3AP+DcfuPuw+zceI3UTh3HcusnvFVeRPPw6j3Qe29/jadZYsdvkdo9KsDaiwgx0ctooKCuY9SfAcd/CZNQ==",
+      "dependencies": {
+        "@ckeditor/ckeditor5-ui": "43.3.1",
+        "lodash-es": "4.17.21"
+      }
+    },
+    "node_modules/@ckeditor/ckeditor5-vue": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmmirror.com/@ckeditor/ckeditor5-vue/-/ckeditor5-vue-7.2.0.tgz",
+      "integrity": "sha512-Q0BG7ie2YAH3ZhTK2rCGCGR1aeZGBzpoq1gl8Omp6o8b6qqvEt0T03Pps2N/+fa1OihR9Uf1NAWE0l8Zp9vOLg==",
+      "dependencies": {
+        "@ckeditor/ckeditor5-integrations-common": "^2.1.0",
+        "lodash-es": "^4.17.21"
+      },
+      "engines": {
+        "node": ">=18.0.0"
+      },
+      "peerDependencies": {
+        "ckeditor5": ">=42.0.0 || ^0.0.0-nightly",
+        "vue": "^3.4.0"
+      }
+    },
+    "node_modules/@ckeditor/ckeditor5-watchdog": {
+      "version": "43.3.1",
+      "resolved": "https://registry.npmmirror.com/@ckeditor/ckeditor5-watchdog/-/ckeditor5-watchdog-43.3.1.tgz",
+      "integrity": "sha512-d9gh0QIrrImIe2SFLo/IBLdpgC9REVkvUTv//qLbUaM2ffBboMnpJYPAB/hgl8ev4lkDvCrivlGjc/80COfGTQ==",
+      "dependencies": {
+        "lodash-es": "4.17.21"
+      }
+    },
+    "node_modules/@ckeditor/ckeditor5-widget": {
+      "version": "43.3.1",
+      "resolved": "https://registry.npmmirror.com/@ckeditor/ckeditor5-widget/-/ckeditor5-widget-43.3.1.tgz",
+      "integrity": "sha512-0naXUVC6BFLnuj3lu5aTfRxmqV6py9+zqGHdJJZ0x8uSg9qcfUCLEQvA59bqzNteRya/lZeZhYKj8IcGnbB1oA==",
+      "dependencies": {
+        "@ckeditor/ckeditor5-core": "43.3.1",
+        "@ckeditor/ckeditor5-engine": "43.3.1",
+        "@ckeditor/ckeditor5-enter": "43.3.1",
+        "@ckeditor/ckeditor5-typing": "43.3.1",
+        "@ckeditor/ckeditor5-ui": "43.3.1",
+        "@ckeditor/ckeditor5-utils": "43.3.1",
+        "lodash-es": "4.17.21"
+      }
+    },
+    "node_modules/@ckeditor/ckeditor5-word-count": {
+      "version": "43.3.1",
+      "resolved": "https://registry.npmmirror.com/@ckeditor/ckeditor5-word-count/-/ckeditor5-word-count-43.3.1.tgz",
+      "integrity": "sha512-W0Ic7y4/ePVqW22pHuXv5HRAbaDJFO13rUqyTZqU2H2ExZdMbJN6eT/UVhnO1XvKs/+jdKGO3LGWXt9QmmtkhA==",
+      "dependencies": {
+        "@ckeditor/ckeditor5-core": "43.3.1",
+        "@ckeditor/ckeditor5-ui": "43.3.1",
+        "@ckeditor/ckeditor5-utils": "43.3.1",
+        "ckeditor5": "43.3.1",
+        "lodash-es": "4.17.21"
+      }
+    },
+    "node_modules/@ctrl/tinycolor": {
+      "version": "3.6.1",
+      "resolved": "https://registry.npmmirror.com/@ctrl/tinycolor/-/tinycolor-3.6.1.tgz",
+      "integrity": "sha512-SITSV6aIXsuVNV3f3O0f2n/cgyEDWoSqtZMYiAmcsYHydcKrOz3gUxB/iXd/Qf08+IZX4KpgNbvUdMBmWz+kcA==",
+      "engines": {
+        "node": ">=10"
+      }
+    },
     "node_modules/@discoveryjs/json-ext": {
       "version": "0.5.7",
       "resolved": "https://registry.npmmirror.com/@discoveryjs/json-ext/-/json-ext-0.5.7.tgz",
@@ -1689,6 +2414,14 @@
         "node": ">=10.0.0"
       }
     },
+    "node_modules/@element-plus/icons-vue": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmmirror.com/@element-plus/icons-vue/-/icons-vue-2.3.1.tgz",
+      "integrity": "sha512-XxVUZv48RZAd87ucGS48jPf6pKu0yV5UCg9f4FFwtrYxXOwWuVJo6wOvSLKEoMQKjv8GsX/mhP6UsC1lRwbUWg==",
+      "peerDependencies": {
+        "vue": "^3.2.0"
+      }
+    },
     "node_modules/@eslint/eslintrc": {
       "version": "0.4.3",
       "resolved": "https://registry.npmmirror.com/@eslint/eslintrc/-/eslintrc-0.4.3.tgz",
@@ -1745,6 +2478,28 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/@floating-ui/core": {
+      "version": "1.6.8",
+      "resolved": "https://registry.npmmirror.com/@floating-ui/core/-/core-1.6.8.tgz",
+      "integrity": "sha512-7XJ9cPU+yI2QeLS+FCSlqNFZJq8arvswefkZrYI1yQBbftw6FyrZOxYSh+9S7z7TpeWlRt9zJ5IhM1WIL334jA==",
+      "dependencies": {
+        "@floating-ui/utils": "^0.2.8"
+      }
+    },
+    "node_modules/@floating-ui/dom": {
+      "version": "1.6.12",
+      "resolved": "https://registry.npmmirror.com/@floating-ui/dom/-/dom-1.6.12.tgz",
+      "integrity": "sha512-NP83c0HjokcGVEMeoStg317VD9W7eDlGK7457dMBANbKA6GJZdc7rjujdgqzTaz93jkGgc5P/jeWbaCHnMNc+w==",
+      "dependencies": {
+        "@floating-ui/core": "^1.6.0",
+        "@floating-ui/utils": "^0.2.8"
+      }
+    },
+    "node_modules/@floating-ui/utils": {
+      "version": "0.2.8",
+      "resolved": "https://registry.npmmirror.com/@floating-ui/utils/-/utils-0.2.8.tgz",
+      "integrity": "sha512-kym7SodPp8/wloecOpcmSnWJsK7M0E5Wg8UcFA+uO4B9s5d0ywXOEro/8HM9x0rW+TljRzul/14UYz3TleT3ig=="
+    },
     "node_modules/@hapi/hoek": {
       "version": "9.3.0",
       "resolved": "https://registry.npmmirror.com/@hapi/hoek/-/hoek-9.3.0.tgz",
@@ -1845,6 +2600,11 @@
       "integrity": "sha512-Vo+PSpZG2/fmgmiNzYK9qWRh8h/CHrwD0mo1h1DzL4yzHNSfWYujGTYsWGreD000gcgmZ7K4Ys6Tx9TxtsKdDw==",
       "dev": true
     },
+    "node_modules/@mixmark-io/domino": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmmirror.com/@mixmark-io/domino/-/domino-2.2.0.tgz",
+      "integrity": "sha512-Y28PR25bHXUg88kCV7nivXrP2Nj2RueZ3/l/jdx6J9f8J4nsEGcgX0Qe6lt7Pa+J79+kPiJU3LguR6O/6zrLOw=="
+    },
     "node_modules/@nicolo-ribaudo/eslint-scope-5-internals": {
       "version": "5.1.1-v1",
       "resolved": "https://registry.npmmirror.com/@nicolo-ribaudo/eslint-scope-5-internals/-/eslint-scope-5-internals-5.1.1-v1.tgz",
@@ -2087,6 +2847,19 @@
       "integrity": "sha512-5+fP8P8MFNC+AyZCDxrB2pkZFPGzqQWUzpSeuuVLvm8VMcorNYavBqoFcxK8bQz4Qsbn4oUEEem4wDLfcysGHA==",
       "dev": true
     },
+    "node_modules/@types/lodash": {
+      "version": "4.17.13",
+      "resolved": "https://registry.npmmirror.com/@types/lodash/-/lodash-4.17.13.tgz",
+      "integrity": "sha512-lfx+dftrEZcdBPczf9d0Qv0x+j/rfNCMuC6OcfXmO8gkfeNAY88PgKUbvG56whcN23gc27yenwF6oJZXGFpYxg=="
+    },
+    "node_modules/@types/lodash-es": {
+      "version": "4.17.12",
+      "resolved": "https://registry.npmmirror.com/@types/lodash-es/-/lodash-es-4.17.12.tgz",
+      "integrity": "sha512-0NgftHUcV4v34VhXm8QBSftKVXtbkBG3ViCjs6+eJ5a6y6Mi/jiFGPc1sC7QK+9BFhWrURE3EOggmWaSxL9OzQ==",
+      "dependencies": {
+        "@types/lodash": "*"
+      }
+    },
     "node_modules/@types/mime": {
       "version": "1.3.5",
       "resolved": "https://registry.npmmirror.com/@types/mime/-/mime-1.3.5.tgz",
@@ -2186,6 +2959,11 @@
         "@types/node": "*"
       }
     },
+    "node_modules/@types/web-bluetooth": {
+      "version": "0.0.16",
+      "resolved": "https://registry.npmmirror.com/@types/web-bluetooth/-/web-bluetooth-0.0.16.tgz",
+      "integrity": "sha512-oh8q2Zc32S6gd/j50GowEjKLoOVOwHP/bWVjKJInBwQqdOYMdPrf1oVlelTlyfFK3CKxL1uahMDAr+vy8T7yMQ=="
+    },
     "node_modules/@types/ws": {
       "version": "8.5.12",
       "resolved": "https://registry.npmmirror.com/@types/ws/-/ws-8.5.12.tgz",
@@ -2864,6 +3642,39 @@
       "integrity": "sha512-Iu8Tbg3f+emIIMmI2ycSI8QcEuAUgPTgHwesDU1eKMLE4YC/c/sFbGc70QgMq31ijRftV0R7vCm9co6rldCeOA==",
       "dev": true
     },
+    "node_modules/@vueuse/core": {
+      "version": "9.13.0",
+      "resolved": "https://registry.npmmirror.com/@vueuse/core/-/core-9.13.0.tgz",
+      "integrity": "sha512-pujnclbeHWxxPRqXWmdkKV5OX4Wk4YeK7wusHqRwU0Q7EFusHoqNA/aPhB6KCh9hEqJkLAJo7bb0Lh9b+OIVzw==",
+      "dependencies": {
+        "@types/web-bluetooth": "^0.0.16",
+        "@vueuse/metadata": "9.13.0",
+        "@vueuse/shared": "9.13.0",
+        "vue-demi": "*"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      }
+    },
+    "node_modules/@vueuse/metadata": {
+      "version": "9.13.0",
+      "resolved": "https://registry.npmmirror.com/@vueuse/metadata/-/metadata-9.13.0.tgz",
+      "integrity": "sha512-gdU7TKNAUVlXXLbaF+ZCfte8BjRJQWPCa2J55+7/h+yDtzw3vOoGQDRXzI6pyKyo6bXFT5/QoPE4hAknExjRLQ==",
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      }
+    },
+    "node_modules/@vueuse/shared": {
+      "version": "9.13.0",
+      "resolved": "https://registry.npmmirror.com/@vueuse/shared/-/shared-9.13.0.tgz",
+      "integrity": "sha512-UrnhU+Cnufu4S6JLCPZnkWh0WwZGUp72ktOF2DFptMlOs3TOdVv8xJN53zhHGARmVOsz5KqOls09+J1NR6sBKw==",
+      "dependencies": {
+        "vue-demi": "*"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      }
+    },
     "node_modules/@webassemblyjs/ast": {
       "version": "1.12.1",
       "resolved": "https://registry.npmmirror.com/@webassemblyjs/ast/-/ast-1.12.1.tgz",
@@ -3285,6 +4096,11 @@
         "lodash": "^4.17.14"
       }
     },
+    "node_modules/async-validator": {
+      "version": "4.2.5",
+      "resolved": "https://registry.npmmirror.com/async-validator/-/async-validator-4.2.5.tgz",
+      "integrity": "sha512-7HhHjtERjqlNbZtqNqy2rckN/SpOOlmDliet+lP7k+eKZEjPk3DgyeU9lIXLdeLz0uBbbVp+9Qdow9wJWgwwfg=="
+    },
     "node_modules/at-least-node": {
       "version": "1.0.0",
       "resolved": "https://registry.npmmirror.com/at-least-node/-/at-least-node-1.0.0.tgz",
@@ -3482,6 +4298,11 @@
       "integrity": "sha512-XpNj6GDQzdfW+r2Wnn7xiSAd7TM3jzkxGXBGTtWKuSXv1xUV+azxAm8jdWZN06QTQk+2N2XB9jRDkvbmQmcRtg==",
       "dev": true
     },
+    "node_modules/blurhash": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmmirror.com/blurhash/-/blurhash-2.0.5.tgz",
+      "integrity": "sha512-cRygWd7kGBQO3VEhPiTgq4Wc43ctsM+o46urrmPOiuAe+07fzlSB9OJVdpgDL0jPqXUVQ9ht7aq7kxOeJHRK+w=="
+    },
     "node_modules/body-parser": {
       "version": "1.20.3",
       "resolved": "https://registry.npmmirror.com/body-parser/-/body-parser-1.20.3.tgz",
@@ -3586,6 +4407,11 @@
         "node": ">=8"
       }
     },
+    "node_modules/browser-or-node": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmmirror.com/browser-or-node/-/browser-or-node-1.3.0.tgz",
+      "integrity": "sha512-0F2z/VSnLbmEeBcUrSuDH5l0HxTXdQQzLjkmBR4cYfvg1zJrKSlmIZFqyFR8oX0NrwPhy3c3HQ6i3OxMbew4Tg=="
+    },
     "node_modules/browserslist": {
       "version": "4.24.2",
       "resolved": "https://registry.npmmirror.com/browserslist/-/browserslist-4.24.2.tgz",
@@ -3809,6 +4635,70 @@
       "integrity": "sha512-vsGdkwSCDpWmP80ncATX7iea5DWQemg1UgCW5J8tqjU3lYw4FBYuj89J0CTVomA7BEfvSZd84GmHko+MxFQU2A==",
       "dev": true
     },
+    "node_modules/ckeditor5": {
+      "version": "43.3.1",
+      "resolved": "https://registry.npmmirror.com/ckeditor5/-/ckeditor5-43.3.1.tgz",
+      "integrity": "sha512-ZZ6nIdlr9rCCp21o9d5/mVUeVPwpQKEVxkeq1MU/Jax1w8U6rnMiQWxB954Ky/HNjhZ1v1ll2+VRzb7XA+1emA==",
+      "dependencies": {
+        "@ckeditor/ckeditor5-adapter-ckfinder": "43.3.1",
+        "@ckeditor/ckeditor5-alignment": "43.3.1",
+        "@ckeditor/ckeditor5-autoformat": "43.3.1",
+        "@ckeditor/ckeditor5-autosave": "43.3.1",
+        "@ckeditor/ckeditor5-basic-styles": "43.3.1",
+        "@ckeditor/ckeditor5-block-quote": "43.3.1",
+        "@ckeditor/ckeditor5-ckbox": "43.3.1",
+        "@ckeditor/ckeditor5-ckfinder": "43.3.1",
+        "@ckeditor/ckeditor5-clipboard": "43.3.1",
+        "@ckeditor/ckeditor5-cloud-services": "43.3.1",
+        "@ckeditor/ckeditor5-code-block": "43.3.1",
+        "@ckeditor/ckeditor5-core": "43.3.1",
+        "@ckeditor/ckeditor5-easy-image": "43.3.1",
+        "@ckeditor/ckeditor5-editor-balloon": "43.3.1",
+        "@ckeditor/ckeditor5-editor-classic": "43.3.1",
+        "@ckeditor/ckeditor5-editor-decoupled": "43.3.1",
+        "@ckeditor/ckeditor5-editor-inline": "43.3.1",
+        "@ckeditor/ckeditor5-editor-multi-root": "43.3.1",
+        "@ckeditor/ckeditor5-engine": "43.3.1",
+        "@ckeditor/ckeditor5-enter": "43.3.1",
+        "@ckeditor/ckeditor5-essentials": "43.3.1",
+        "@ckeditor/ckeditor5-find-and-replace": "43.3.1",
+        "@ckeditor/ckeditor5-font": "43.3.1",
+        "@ckeditor/ckeditor5-heading": "43.3.1",
+        "@ckeditor/ckeditor5-highlight": "43.3.1",
+        "@ckeditor/ckeditor5-horizontal-line": "43.3.1",
+        "@ckeditor/ckeditor5-html-embed": "43.3.1",
+        "@ckeditor/ckeditor5-html-support": "43.3.1",
+        "@ckeditor/ckeditor5-image": "43.3.1",
+        "@ckeditor/ckeditor5-indent": "43.3.1",
+        "@ckeditor/ckeditor5-language": "43.3.1",
+        "@ckeditor/ckeditor5-link": "43.3.1",
+        "@ckeditor/ckeditor5-list": "43.3.1",
+        "@ckeditor/ckeditor5-markdown-gfm": "43.3.1",
+        "@ckeditor/ckeditor5-media-embed": "43.3.1",
+        "@ckeditor/ckeditor5-mention": "43.3.1",
+        "@ckeditor/ckeditor5-minimap": "43.3.1",
+        "@ckeditor/ckeditor5-page-break": "43.3.1",
+        "@ckeditor/ckeditor5-paragraph": "43.3.1",
+        "@ckeditor/ckeditor5-paste-from-office": "43.3.1",
+        "@ckeditor/ckeditor5-remove-format": "43.3.1",
+        "@ckeditor/ckeditor5-restricted-editing": "43.3.1",
+        "@ckeditor/ckeditor5-select-all": "43.3.1",
+        "@ckeditor/ckeditor5-show-blocks": "43.3.1",
+        "@ckeditor/ckeditor5-source-editing": "43.3.1",
+        "@ckeditor/ckeditor5-special-characters": "43.3.1",
+        "@ckeditor/ckeditor5-style": "43.3.1",
+        "@ckeditor/ckeditor5-table": "43.3.1",
+        "@ckeditor/ckeditor5-theme-lark": "43.3.1",
+        "@ckeditor/ckeditor5-typing": "43.3.1",
+        "@ckeditor/ckeditor5-ui": "43.3.1",
+        "@ckeditor/ckeditor5-undo": "43.3.1",
+        "@ckeditor/ckeditor5-upload": "43.3.1",
+        "@ckeditor/ckeditor5-utils": "43.3.1",
+        "@ckeditor/ckeditor5-watchdog": "43.3.1",
+        "@ckeditor/ckeditor5-widget": "43.3.1",
+        "@ckeditor/ckeditor5-word-count": "43.3.1"
+      }
+    },
     "node_modules/clean-css": {
       "version": "5.3.3",
       "resolved": "https://registry.npmmirror.com/clean-css/-/clean-css-5.3.3.tgz",
@@ -3934,7 +4824,6 @@
       "version": "2.0.1",
       "resolved": "https://registry.npmmirror.com/color-convert/-/color-convert-2.0.1.tgz",
       "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
-      "dev": true,
       "dependencies": {
         "color-name": "~1.1.4"
       },
@@ -3945,8 +4834,15 @@
     "node_modules/color-name": {
       "version": "1.1.4",
       "resolved": "https://registry.npmmirror.com/color-name/-/color-name-1.1.4.tgz",
-      "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
-      "dev": true
+      "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA=="
+    },
+    "node_modules/color-parse": {
+      "version": "1.4.2",
+      "resolved": "https://registry.npmmirror.com/color-parse/-/color-parse-1.4.2.tgz",
+      "integrity": "sha512-RI7s49/8yqDj3fECFZjUI1Yi0z/Gq1py43oNJivAIIDSyJiOZLfYCRQEgn8HEVAj++PcRe8AnL2XF0fRJ3BTnA==",
+      "dependencies": {
+        "color-name": "^1.0.0"
+      }
     },
     "node_modules/colord": {
       "version": "2.9.3",
@@ -4164,8 +5060,7 @@
     "node_modules/core-util-is": {
       "version": "1.0.3",
       "resolved": "https://registry.npmmirror.com/core-util-is/-/core-util-is-1.0.3.tgz",
-      "integrity": "sha512-ZQBvi1DcpJ4GDqanjucZ2Hj3wEO5pZDS89BWbkcrvdxksJorwUDDZamX9ldFkp9aw2lmBDLgkObEA4DWNJ9FYQ==",
-      "dev": true
+      "integrity": "sha512-ZQBvi1DcpJ4GDqanjucZ2Hj3wEO5pZDS89BWbkcrvdxksJorwUDDZamX9ldFkp9aw2lmBDLgkObEA4DWNJ9FYQ=="
     },
     "node_modules/cosmiconfig": {
       "version": "7.1.0",
@@ -4504,6 +5399,11 @@
       "resolved": "https://registry.npmmirror.com/csstype/-/csstype-3.1.3.tgz",
       "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw=="
     },
+    "node_modules/dayjs": {
+      "version": "1.11.13",
+      "resolved": "https://registry.npmmirror.com/dayjs/-/dayjs-1.11.13.tgz",
+      "integrity": "sha512-oaMBel6gjolK862uaPQOVTA7q3TZhuSvuMQAAglQDOWYO9A91IrAOUJEyKVlqJlHE0vq5p5UXxzdPfMH/x6xNg=="
+    },
     "node_modules/debounce": {
       "version": "1.2.1",
       "resolved": "https://registry.npmmirror.com/debounce/-/debounce-1.2.1.tgz",
@@ -4913,6 +5813,31 @@
       "integrity": "sha512-vOzZS6uZwhhbkZbcRyiy99Wg+pYFV5hk+5YaECvx0+Z31NR3Tt5zS6dze2OepT6PCTzVzT0dIJItti+uAW5zmw==",
       "dev": true
     },
+    "node_modules/element-plus": {
+      "version": "2.8.7",
+      "resolved": "https://registry.npmmirror.com/element-plus/-/element-plus-2.8.7.tgz",
+      "integrity": "sha512-oGQyFRufFOgjd872tZc+T4xQAYLlX4hj6d3ixeY13L4fFNUuc1N49JHAqJGPda0tdx3qCnjceZoh1kqqj2+tXQ==",
+      "dependencies": {
+        "@ctrl/tinycolor": "^3.4.1",
+        "@element-plus/icons-vue": "^2.3.1",
+        "@floating-ui/dom": "^1.0.1",
+        "@popperjs/core": "npm:@sxzz/popperjs-es@^2.11.7",
+        "@types/lodash": "^4.14.182",
+        "@types/lodash-es": "^4.17.6",
+        "@vueuse/core": "^9.1.0",
+        "async-validator": "^4.2.5",
+        "dayjs": "^1.11.3",
+        "escape-html": "^1.0.3",
+        "lodash": "^4.17.21",
+        "lodash-es": "^4.17.21",
+        "lodash-unified": "^1.0.2",
+        "memoize-one": "^6.0.0",
+        "normalize-wheel-es": "^1.2.0"
+      },
+      "peerDependencies": {
+        "vue": "^3.2.0"
+      }
+    },
     "node_modules/emoji-regex": {
       "version": "8.0.0",
       "resolved": "https://registry.npmmirror.com/emoji-regex/-/emoji-regex-8.0.0.tgz",
@@ -5040,8 +5965,7 @@
     "node_modules/escape-html": {
       "version": "1.0.3",
       "resolved": "https://registry.npmmirror.com/escape-html/-/escape-html-1.0.3.tgz",
-      "integrity": "sha512-NiSupZ4OeuGwr68lGIeym/ksIZMJodUGOSCZ/FSnTxcrekbvqrgdUxlJOMpijaKZVjAJrWrGs/6Jy8OMuyj9ow==",
-      "dev": true
+      "integrity": "sha512-NiSupZ4OeuGwr68lGIeym/ksIZMJodUGOSCZ/FSnTxcrekbvqrgdUxlJOMpijaKZVjAJrWrGs/6Jy8OMuyj9ow=="
     },
     "node_modules/escape-string-regexp": {
       "version": "1.0.5",
@@ -5786,6 +6710,11 @@
         "node": "^10.12.0 || >=12.0.0"
       }
     },
+    "node_modules/file-saver": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmmirror.com/file-saver/-/file-saver-2.0.5.tgz",
+      "integrity": "sha512-P9bmyZ3h/PRG+Nzga+rbdI4OEpNDzAVyy74uVO9ATgzLK6VtAsYybF/+TOCvrc0MO793d6+42lLyZTw7/ArVzA=="
+    },
     "node_modules/fill-range": {
       "version": "7.1.1",
       "resolved": "https://registry.npmmirror.com/fill-range/-/fill-range-7.1.1.tgz",
@@ -6282,6 +7211,21 @@
         "safe-buffer": "~5.1.0"
       }
     },
+    "node_modules/html-docx-js-typescript": {
+      "version": "0.1.5",
+      "resolved": "https://registry.npmmirror.com/html-docx-js-typescript/-/html-docx-js-typescript-0.1.5.tgz",
+      "integrity": "sha512-GNojWFDYbpHSIgKml6/0oAom8mtHrHRTWKMyLRdeJQHO/CyeM6H39DYgzYvPp4OhBp2Ti8dxMKFq0/FkpYD4bg==",
+      "dependencies": {
+        "browser-or-node": "^1.2.1",
+        "jszip": "^3.4.0",
+        "tslib": "^1.13.0"
+      }
+    },
+    "node_modules/html-docx-js-typescript/node_modules/tslib": {
+      "version": "1.14.1",
+      "resolved": "https://registry.npmmirror.com/tslib/-/tslib-1.14.1.tgz",
+      "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg=="
+    },
     "node_modules/html-entities": {
       "version": "2.5.2",
       "resolved": "https://registry.npmmirror.com/html-entities/-/html-entities-2.5.2.tgz",
@@ -6525,6 +7469,11 @@
         "node": ">= 4"
       }
     },
+    "node_modules/immediate": {
+      "version": "3.0.6",
+      "resolved": "https://registry.npmmirror.com/immediate/-/immediate-3.0.6.tgz",
+      "integrity": "sha512-XXOFtyqDjNDAQxVfYxuF7g9Il/IbWmmlQg2MYKOH8ExIT1qg6xc4zyS3HaEEATgs1btfzxq15ciUiY7gjSXRGQ=="
+    },
     "node_modules/import-fresh": {
       "version": "3.3.0",
       "resolved": "https://registry.npmmirror.com/import-fresh/-/import-fresh-3.3.0.tgz",
@@ -6564,8 +7513,7 @@
     "node_modules/inherits": {
       "version": "2.0.4",
       "resolved": "https://registry.npmmirror.com/inherits/-/inherits-2.0.4.tgz",
-      "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==",
-      "dev": true
+      "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ=="
     },
     "node_modules/ipaddr.js": {
       "version": "2.2.0",
@@ -6753,8 +7701,7 @@
     "node_modules/isarray": {
       "version": "1.0.0",
       "resolved": "https://registry.npmmirror.com/isarray/-/isarray-1.0.0.tgz",
-      "integrity": "sha512-VLghIWNM6ELQzo7zwmcg0NmTVyWKYjvIeM83yjp0wRDTmUnrM678fQbcKBo6n2CJEF0szoG//ytg+TKla89ALQ==",
-      "dev": true
+      "integrity": "sha512-VLghIWNM6ELQzo7zwmcg0NmTVyWKYjvIeM83yjp0wRDTmUnrM678fQbcKBo6n2CJEF0szoG//ytg+TKla89ALQ=="
     },
     "node_modules/isexe": {
       "version": "2.0.0",
@@ -6918,6 +7865,44 @@
         "graceful-fs": "^4.1.6"
       }
     },
+    "node_modules/jszip": {
+      "version": "3.10.1",
+      "resolved": "https://registry.npmmirror.com/jszip/-/jszip-3.10.1.tgz",
+      "integrity": "sha512-xXDvecyTpGLrqFrvkrUSoxxfJI5AH7U8zxxtVclpsUtMCq4JQ290LY8AW5c7Ggnr/Y/oK+bQMbqK2qmtk3pN4g==",
+      "dependencies": {
+        "lie": "~3.3.0",
+        "pako": "~1.0.2",
+        "readable-stream": "~2.3.6",
+        "setimmediate": "^1.0.5"
+      }
+    },
+    "node_modules/jszip/node_modules/readable-stream": {
+      "version": "2.3.8",
+      "resolved": "https://registry.npmmirror.com/readable-stream/-/readable-stream-2.3.8.tgz",
+      "integrity": "sha512-8p0AUk4XODgIewSi0l8Epjs+EVnWiK7NoDIEGU0HhE7+ZyY8D1IMY7odu5lRrFXGg71L15KG8QrPmum45RTtdA==",
+      "dependencies": {
+        "core-util-is": "~1.0.0",
+        "inherits": "~2.0.3",
+        "isarray": "~1.0.0",
+        "process-nextick-args": "~2.0.0",
+        "safe-buffer": "~5.1.1",
+        "string_decoder": "~1.1.1",
+        "util-deprecate": "~1.0.1"
+      }
+    },
+    "node_modules/jszip/node_modules/safe-buffer": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmmirror.com/safe-buffer/-/safe-buffer-5.1.2.tgz",
+      "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g=="
+    },
+    "node_modules/jszip/node_modules/string_decoder": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmmirror.com/string_decoder/-/string_decoder-1.1.1.tgz",
+      "integrity": "sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==",
+      "dependencies": {
+        "safe-buffer": "~5.1.0"
+      }
+    },
     "node_modules/jwt-decode": {
       "version": "4.0.0",
       "resolved": "https://registry.npmmirror.com/jwt-decode/-/jwt-decode-4.0.0.tgz",
@@ -6985,6 +7970,14 @@
         "node": ">= 0.8.0"
       }
     },
+    "node_modules/lie": {
+      "version": "3.3.0",
+      "resolved": "https://registry.npmmirror.com/lie/-/lie-3.3.0.tgz",
+      "integrity": "sha512-UaiMJzeWRlEujzAuw5LokY1L5ecNQYZKfmyZ9L7wDHb/p5etKaxXhohBcrw0EYby+G/NA52vRSN4N39dxHAIwQ==",
+      "dependencies": {
+        "immediate": "~3.0.5"
+      }
+    },
     "node_modules/lilconfig": {
       "version": "2.1.0",
       "resolved": "https://registry.npmmirror.com/lilconfig/-/lilconfig-2.1.0.tgz",
@@ -7050,8 +8043,22 @@
     "node_modules/lodash": {
       "version": "4.17.21",
       "resolved": "https://registry.npmmirror.com/lodash/-/lodash-4.17.21.tgz",
-      "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==",
-      "dev": true
+      "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg=="
+    },
+    "node_modules/lodash-es": {
+      "version": "4.17.21",
+      "resolved": "https://registry.npmmirror.com/lodash-es/-/lodash-es-4.17.21.tgz",
+      "integrity": "sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw=="
+    },
+    "node_modules/lodash-unified": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmmirror.com/lodash-unified/-/lodash-unified-1.0.3.tgz",
+      "integrity": "sha512-WK9qSozxXOD7ZJQlpSqOT+om2ZfcT4yO+03FuzAHD0wF6S0l0090LRPDx3vhTTLZ8cFKpBn+IOcVXK6qOcIlfQ==",
+      "peerDependencies": {
+        "@types/lodash-es": "*",
+        "lodash": "*",
+        "lodash-es": "*"
+      }
     },
     "node_modules/lodash.debounce": {
       "version": "4.0.8",
@@ -7290,6 +8297,17 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/marked": {
+      "version": "4.0.12",
+      "resolved": "https://registry.npmmirror.com/marked/-/marked-4.0.12.tgz",
+      "integrity": "sha512-hgibXWrEDNBWgGiK18j/4lkS6ihTe9sxtV4Q1OQppb/0zzyPSzoFANBa5MfsG/zgsWklmNnhm0XACZOH/0HBiQ==",
+      "bin": {
+        "marked": "bin/marked.js"
+      },
+      "engines": {
+        "node": ">= 12"
+      }
+    },
     "node_modules/mdn-data": {
       "version": "2.0.14",
       "resolved": "https://registry.npmmirror.com/mdn-data/-/mdn-data-2.0.14.tgz",
@@ -7317,6 +8335,11 @@
         "node": ">= 4.0.0"
       }
     },
+    "node_modules/memoize-one": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmmirror.com/memoize-one/-/memoize-one-6.0.0.tgz",
+      "integrity": "sha512-rkpe71W0N0c0Xz6QD0eJETuWAJGnJ9afsl1srmwPrI+yBCkge5EycXXbYRyvL29zZVUWQCY7InPRCv3GDXuZNw=="
+    },
     "node_modules/merge-descriptors": {
       "version": "1.0.3",
       "resolved": "https://registry.npmmirror.com/merge-descriptors/-/merge-descriptors-1.0.3.tgz",
@@ -7729,6 +8752,11 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/normalize-wheel-es": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmmirror.com/normalize-wheel-es/-/normalize-wheel-es-1.2.0.tgz",
+      "integrity": "sha512-Wj7+EJQ8mSuXr2iWfnujrimU35R2W4FAErEyTmJoJ7ucwTn2hOUSsRehMb5RSYkxXGTM7Y9QpvPmp++w5ftoJw=="
+    },
     "node_modules/npm-run-path": {
       "version": "2.0.2",
       "resolved": "https://registry.npmmirror.com/npm-run-path/-/npm-run-path-2.0.2.tgz",
@@ -7992,6 +9020,11 @@
         "node": ">=6"
       }
     },
+    "node_modules/pako": {
+      "version": "1.0.11",
+      "resolved": "https://registry.npmmirror.com/pako/-/pako-1.0.11.tgz",
+      "integrity": "sha512-4hLB8Py4zZce5s4yd9XzopqwVv/yGNhV1Bl8NTmCq1763HeK2+EwVTv+leGeL13Dnh2wfbqowVPXCIO0z4taYw=="
+    },
     "node_modules/param-case": {
       "version": "3.0.4",
       "resolved": "https://registry.npmmirror.com/param-case/-/param-case-3.0.4.tgz",
@@ -8754,8 +9787,7 @@
     "node_modules/process-nextick-args": {
       "version": "2.0.1",
       "resolved": "https://registry.npmmirror.com/process-nextick-args/-/process-nextick-args-2.0.1.tgz",
-      "integrity": "sha512-3ouUOpQhtgrbOa17J7+uxOTpITYWaGP7/AhoR3+A+/1e9skrzelGi/dXzEYyvbxubEF6Wn2ypscTKiKJFFn1ag==",
-      "dev": true
+      "integrity": "sha512-3ouUOpQhtgrbOa17J7+uxOTpITYWaGP7/AhoR3+A+/1e9skrzelGi/dXzEYyvbxubEF6Wn2ypscTKiKJFFn1ag=="
     },
     "node_modules/progress": {
       "version": "2.0.3",
@@ -9498,6 +10530,11 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/setimmediate": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmmirror.com/setimmediate/-/setimmediate-1.0.5.tgz",
+      "integrity": "sha512-MATJdZp8sLqDl/68LfQmbP8zKPLQNV6BIZoIgrscFDQ+RsvK/BxeDQOgyxKKoh0y/8h3BqVFnCqQ/gd+reiIXA=="
+    },
     "node_modules/setprototypeof": {
       "version": "1.2.0",
       "resolved": "https://registry.npmmirror.com/setprototypeof/-/setprototypeof-1.2.0.tgz",
@@ -10153,6 +11190,19 @@
       "integrity": "sha512-jWVzBLplnCmoaTr13V9dYbiQ99wvZRd0vNWaDRg+aVYRcjDF3nDksxFDE/+fkXnKhpnUUkmx5pK/v8mCtLVqZA==",
       "dev": true
     },
+    "node_modules/turndown": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmmirror.com/turndown/-/turndown-7.2.0.tgz",
+      "integrity": "sha512-eCZGBN4nNNqM9Owkv9HAtWRYfLA4h909E/WGAWWBpmB275ehNhZyk87/Tpvjbp0jjNl9XwCsbe6bm6CqFsgD+A==",
+      "dependencies": {
+        "@mixmark-io/domino": "^2.2.0"
+      }
+    },
+    "node_modules/turndown-plugin-gfm": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmmirror.com/turndown-plugin-gfm/-/turndown-plugin-gfm-1.0.2.tgz",
+      "integrity": "sha512-vwz9tfvF7XN/jE0dGoBei3FXWuvll78ohzCZQuOb+ZjWrs3a0XhQVomJEb2Qh4VHTPNRO4GPZh0V7VRbiWwkRg=="
+    },
     "node_modules/type-check": {
       "version": "0.4.0",
       "resolved": "https://registry.npmmirror.com/type-check/-/type-check-0.4.0.tgz",
@@ -10293,8 +11343,7 @@
     "node_modules/util-deprecate": {
       "version": "1.0.2",
       "resolved": "https://registry.npmmirror.com/util-deprecate/-/util-deprecate-1.0.2.tgz",
-      "integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==",
-      "dev": true
+      "integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw=="
     },
     "node_modules/utila": {
       "version": "0.4.0",
@@ -10336,6 +11385,11 @@
         "spdx-expression-parse": "^3.0.0"
       }
     },
+    "node_modules/vanilla-colorful": {
+      "version": "0.7.2",
+      "resolved": "https://registry.npmmirror.com/vanilla-colorful/-/vanilla-colorful-0.7.2.tgz",
+      "integrity": "sha512-z2YZusTFC6KnLERx1cgoIRX2CjPRP0W75N+3CC6gbvdX5Ch47rZkEMGO2Xnf+IEmi3RiFLxS18gayMA27iU7Kg=="
+    },
     "node_modules/vary": {
       "version": "1.1.2",
       "resolved": "https://registry.npmmirror.com/vary/-/vary-1.1.2.tgz",
@@ -10365,6 +11419,31 @@
         }
       }
     },
+    "node_modules/vue-demi": {
+      "version": "0.14.10",
+      "resolved": "https://registry.npmmirror.com/vue-demi/-/vue-demi-0.14.10.tgz",
+      "integrity": "sha512-nMZBOwuzabUO0nLgIcc6rycZEebF6eeUfaiQx9+WSk8e29IbLvPU9feI6tqW4kTo3hvoYAJkMh8n8D0fuISphg==",
+      "hasInstallScript": true,
+      "bin": {
+        "vue-demi-fix": "bin/vue-demi-fix.js",
+        "vue-demi-switch": "bin/vue-demi-switch.js"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      },
+      "peerDependencies": {
+        "@vue/composition-api": "^1.0.0-rc.1",
+        "vue": "^3.0.0-0 || ^2.6.0"
+      },
+      "peerDependenciesMeta": {
+        "@vue/composition-api": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/vue-eslint-parser": {
       "version": "8.3.0",
       "resolved": "https://registry.npmmirror.com/vue-eslint-parser/-/vue-eslint-parser-8.3.0.tgz",
diff --git a/coeditor_frontend/package.json b/coeditor_frontend/package.json
index 2149c5f..b9c1f7c 100644
--- a/coeditor_frontend/package.json
+++ b/coeditor_frontend/package.json
@@ -8,9 +8,14 @@
     "lint": "vue-cli-service lint"
   },
   "dependencies": {
+    "@ckeditor/ckeditor5-vue": "^7.2.0",
     "@popperjs/core": "^2.11.8",
     "bootstrap": "^5.3.3",
+    "ckeditor5": "^43.3.1",
     "core-js": "^3.8.3",
+    "element-plus": "^2.8.7",
+    "file-saver": "^2.0.5",
+    "html-docx-js-typescript": "^0.1.5",
     "jquery": "^3.7.1",
     "jwt-decode": "^4.0.0",
     "vue": "^3.2.13",
diff --git a/coeditor_frontend/src/components/FileFiled.vue b/coeditor_frontend/src/components/FileFiled.vue
index 1fadfe9..4ab2b44 100644
--- a/coeditor_frontend/src/components/FileFiled.vue
+++ b/coeditor_frontend/src/components/FileFiled.vue
@@ -1,6 +1,6 @@
 <template>
-  <div @click="leftclick()" @dblclick="doubleclick()" @contextmenu.stop.prevent="rightclick($event)"
-  :class="{ 'file-item-selected' : is_selected }"
+  <div @click.stop="leftclick()" @dblclick="doubleclick()" @contextmenu.stop.prevent="rightclick($event)"
+  :class="{ 'file-item-selected' : item.is_selected }"
   >
     <div class="file-item-icon" >
         <img src="@/assets/file_icon.png" alt="">
@@ -15,8 +15,6 @@
 <script>
 
 import FileTitle from './FileTitle.vue';
-import { ref } from 'vue';
-import { useStore } from 'vuex';
 
 export default {
   name: 'FileFiled',
@@ -30,11 +28,8 @@ export default {
       }
   },
   setup(props,context){
-    let store = useStore();
-    let is_selected = ref(false);
-    
     const leftclick = () => {
-      is_selected.value = true;
+      context.emit('fileleftclick',props.item);
     }
     
     const rightclick = (event) => {
@@ -48,13 +43,12 @@ export default {
     }
 
     const doubleclick = () => {
-      store.commit('forwardPath',props.item.name + '/');
+      context.emit('open_file');
     }
     return {
         leftclick,
         rightclick,
         doubleclick,
-        is_selected,
     }
   }
 }
diff --git a/coeditor_frontend/src/components/FolderFiled.vue b/coeditor_frontend/src/components/FolderFiled.vue
index 67052cb..506c12f 100644
--- a/coeditor_frontend/src/components/FolderFiled.vue
+++ b/coeditor_frontend/src/components/FolderFiled.vue
@@ -1,6 +1,6 @@
 <template>
-  <div @click="leftclick()" @dblclick="doubleclick()" @contextmenu.stop.prevent="rightclick($event)"
-  :class="{ 'file-item-selected' : is_selected }"
+  <div @click.stop="leftclick()" @dblclick="doubleclick()" @contextmenu.stop.prevent="rightclick($event)"
+  :class="{ 'file-item-selected' : item.is_selected }"
   >
     <div class="file-item-icon" >
         <img src="@/assets/folder_icon.png" alt="">
@@ -15,7 +15,6 @@
 <script>
 import FileTitle from './FileTitle.vue';
 import { useStore } from 'vuex';
-import { ref } from 'vue';
 
 export default {
   name: 'FolderFiled',
@@ -30,9 +29,9 @@ export default {
   },
   setup(props,context){
     let store = useStore();
-    let is_selected = ref(false);
+
     const leftclick = () => {
-      is_selected.value = true;
+      context.emit('fileleftclick',props.item);
     }
     
     const rightclick = (event) => {
@@ -47,13 +46,13 @@ export default {
 
     const doubleclick = () => {
       store.commit('forwardPath',props.item.name + '/');
+      context.emit('ls');
     }
 
     return {
         leftclick,
         rightclick,
         doubleclick,
-        is_selected,
     }
   }
 }
diff --git a/coeditor_frontend/src/components/NavBar.vue b/coeditor_frontend/src/components/NavBar.vue
index 471252e..c368a31 100644
--- a/coeditor_frontend/src/components/NavBar.vue
+++ b/coeditor_frontend/src/components/NavBar.vue
@@ -1,36 +1,24 @@
 <template>
-<!-- <nav class="nav">
-    <a class="nav-link" href="#">
-      <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-arrow-left" viewBox="0 0 16 16">
-    <path fill-rule="evenodd" d="M15 8a.5.5 0 0 0-.5-.5H2.707l3.147-3.146a.5.5 0 1 0-.708-.708l-4 4a.5.5 0 0 0 0 .708l4 4a.5.5 0 0 0 .708-.708L2.707 8.5H14.5A.5.5 0 0 0 15 8z"/>
-    </svg>
-    </a>
-    <a class="nav-link" href="#">
-      <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-arrow-right" viewBox="0 0 16 16">
-    <path fill-rule="evenodd" d="M1 8a.5.5 0 0 1 .5-.5h11.793l-3.147-3.146a.5.5 0 0 1 .708-.708l4 4a.5.5 0 0 1 0 .708l-4 4a.5.5 0 0 1-.708-.708L13.293 8.5H1.5A.5.5 0 0 1 1 8z"/>
-    </svg>
-    </a>
-</nav> -->
-<nav class="navbar navbar-expand-lg navbar-light bg-light">
-  <div class="container">
-    <router-link class="navbar-brand" :to="{name: 'home'}">Coeditor</router-link>
-    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
-      <span class="navbar-toggler-icon"></span>
-    </button>
-    <div class="collapse navbar-collapse" id="navbarText">
-       <ul class="navbar-nav ms-auto" >
-        <li class="nav-item">
-          <router-link v-if="!$store.state.user.is_login" class="nav-link" :to="{name: 'login'}">登录</router-link>
-          <router-link v-else class="nav-link" :to="{name: 'userprofile',params:{userId: $store.state.user.id}}">{{ $store.state.user.username }}</router-link>
-        </li>
-        <li class="nav-item"> 
-          <router-link v-if="!$store.state.user.is_login" class="nav-link" :to="{name: 'register'}">注册</router-link>
-          <a v-else class="nav-link" style="cursor: pointer" @click="logout">退出</a>
-        </li>
-      </ul>
+  <nav class="navbar navbar-expand-lg navbar-light bg-light">
+    <div class="container">
+      <router-link class="navbar-brand" :to="{name: 'home'}">Coeditor</router-link>
+      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
+        <span class="navbar-toggler-icon"></span>
+      </button>
+      <div class="collapse navbar-collapse" id="navbarText">
+        <ul class="navbar-nav ms-auto" >
+          <li class="nav-item">
+            <router-link v-if="!$store.state.user.is_login" class="nav-link" :to="{name: 'login'}">登录</router-link>
+            <router-link v-else class="nav-link" :to="{name: 'userprofile',params:{userId: $store.state.user.id}}">{{ $store.state.user.username }}</router-link>
+          </li>
+          <li class="nav-item"> 
+            <router-link v-if="!$store.state.user.is_login" class="nav-link" :to="{name: 'register'}">注册</router-link>
+            <a v-else class="nav-link" style="cursor: pointer" @click="logout">退出</a>
+          </li>
+        </ul>
+      </div>
     </div>
-  </div>
-</nav>
+  </nav>
 </template>
 
 <script>
diff --git a/coeditor_frontend/src/components/PathBar.vue b/coeditor_frontend/src/components/PathBar.vue
new file mode 100644
index 0000000..3f4d441
--- /dev/null
+++ b/coeditor_frontend/src/components/PathBar.vue
@@ -0,0 +1,37 @@
+<template>
+  <nav class="navbar navbar-expand-lg bg-body-tertiary">
+    <div class="container-fluid">
+        <div class="collapse navbar-collapse" id="navbarNav">
+            <ul class="navbar-nav col-md-10 offset-md-1">
+                <li v-for="(path,index) in $store.state.user.path" :key="index" @click="jump(index)" class="nav-item">
+                    <a class="nav-link" href="#">{{ path }}</a>
+                </li>    
+            </ul>
+        </div>
+    </div>
+    </nav>
+</template>
+
+
+<script>
+import { useStore } from 'vuex'
+
+export default {
+  name: 'PathBar',
+  setup(props,context){
+      let store = useStore();
+
+      const jump = (index) => {
+        while (store.state.user.path.length > index + 1) {
+            store.commit('backPath');
+        }
+        context.emit('ls');
+      }
+
+      return {
+          store,
+          jump,
+      }
+  }
+}
+</script>
diff --git a/coeditor_frontend/src/components/RightMenu.vue b/coeditor_frontend/src/components/RightMenu.vue
index 33be347..1d0925d 100644
--- a/coeditor_frontend/src/components/RightMenu.vue
+++ b/coeditor_frontend/src/components/RightMenu.vue
@@ -43,9 +43,6 @@
                 粘贴
             </div>
         </li>
-        <li @click="turn_back">
-            后退
-        </li>
     </ul>
     </div>
 </template>
@@ -71,15 +68,8 @@ export default {
         const open_file = () => {
             context.emit('open_file');
         }
-
-        const turn_back = () => {
-            
-            context.emit('turn_back');
-        }
-
         return {
             open_file,
-            turn_back,
         }
     }
 }
diff --git a/coeditor_frontend/src/components/plugins.js b/coeditor_frontend/src/components/plugins.js
new file mode 100644
index 0000000..5980994
--- /dev/null
+++ b/coeditor_frontend/src/components/plugins.js
@@ -0,0 +1,212 @@
+import {
+    Plugin,
+    ButtonView,
+	createDropdown,
+	Collection,
+	addListToDropdown,
+} from 'ckeditor5';
+import { asBlob } from 'html-docx-js-typescript'
+import { saveAs } from 'file-saver';
+import {
+    getStyle,
+    getPageContent
+} from './utils';
+
+// 导出为docx插件
+class Export2Word extends Plugin {
+	init() {
+		const editor = this.editor;
+
+		editor.ui.componentFactory.add('ExportToWord', () => {
+			// The button will be an instance of ButtonView.
+			const button = new ButtonView();
+
+			button.set({
+				label: '导出为docx',
+				// withText: true
+				tooltip: true,
+
+				// 图标 直接插入svg文件
+				icon: '<svg t="1730216969869" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2612" width="200" height="200"><path d="M576 832H224c-17.6 0-32-14.4-32-32V192h608c17.6 0 32 14.4 32 32v288c0 17.7 14.3 32 32 32s32-14.3 32-32V224c0-52.9-43.1-96-96-96H160c-17.7 0-32 14.3-32 32v640c0 52.9 43.1 96 96 96h352c17.7 0 32-14.3 32-32s-14.3-32-32-32z" p-id="2613"></path><path d="M951.7 757.5c0.2-0.2 0.4-0.5 0.6-0.7 0.1-0.2 0.3-0.3 0.4-0.5 0.2-0.3 0.4-0.6 0.7-0.8 0.1-0.1 0.2-0.3 0.3-0.4l0.6-0.9c0.1-0.1 0.2-0.2 0.3-0.4l0.6-0.9c0.1-0.1 0.2-0.3 0.2-0.4 0.2-0.3 0.4-0.6 0.5-0.9 0.1-0.1 0.2-0.3 0.3-0.4 0.2-0.3 0.3-0.6 0.4-0.9 0.1-0.2 0.2-0.4 0.3-0.5 0.1-0.3 0.2-0.5 0.4-0.8 0.1-0.2 0.2-0.4 0.3-0.7 0.1-0.2 0.2-0.5 0.3-0.7 0.1-0.3 0.2-0.5 0.3-0.8 0.1-0.2 0.1-0.4 0.2-0.6l0.3-0.9c0.1-0.2 0.1-0.4 0.2-0.6 0.1-0.3 0.2-0.6 0.3-1 0-0.2 0.1-0.3 0.1-0.5 0.1-0.3 0.2-0.7 0.2-1 0-0.2 0.1-0.4 0.1-0.5 0.1-0.3 0.1-0.7 0.2-1 0-0.2 0.1-0.4 0.1-0.6 0-0.3 0.1-0.6 0.1-0.9 0-0.3 0-0.5 0.1-0.8 0-0.2 0-0.5 0.1-0.7 0.1-1.1 0.1-2.1 0-3.2 0-0.3 0-0.5-0.1-0.7 0-0.3 0-0.5-0.1-0.8 0-0.3-0.1-0.6-0.1-0.9 0-0.2 0-0.4-0.1-0.6 0-0.3-0.1-0.7-0.2-1 0-0.2-0.1-0.4-0.1-0.5-0.1-0.3-0.1-0.7-0.2-1 0-0.2-0.1-0.3-0.1-0.5-0.1-0.3-0.2-0.6-0.3-1-0.1-0.2-0.1-0.4-0.2-0.6l-0.3-0.9c-0.1-0.2-0.1-0.4-0.2-0.6-0.1-0.3-0.2-0.5-0.3-0.8-0.1-0.2-0.2-0.5-0.3-0.7-0.1-0.2-0.2-0.4-0.3-0.7-0.1-0.3-0.2-0.5-0.4-0.8-0.1-0.2-0.2-0.4-0.3-0.5-0.1-0.3-0.3-0.6-0.4-0.9-0.1-0.2-0.2-0.3-0.3-0.4-0.2-0.3-0.3-0.6-0.5-0.9-0.1-0.1-0.2-0.3-0.2-0.4l-0.6-0.9c-0.1-0.1-0.2-0.2-0.3-0.4l-0.6-0.9c-0.1-0.1-0.2-0.3-0.3-0.4-0.2-0.3-0.4-0.6-0.7-0.8-0.1-0.2-0.3-0.3-0.4-0.5-0.2-0.2-0.4-0.5-0.6-0.7-0.2-0.2-0.4-0.5-0.7-0.7l-0.4-0.4-128-128c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l73.4 73.4H592c-17.7 0-32 14.3-32 32s14.3 32 32 32h258.7l-73.4 73.4c-12.5 12.5-12.5 32.8 0 45.3 6.2 6.2 14.4 9.4 22.6 9.4s16.4-3.1 22.6-9.4l128-128 0.4-0.4c0.4-0.6 0.6-0.9 0.8-1.1z" p-id="2614"></path><path d="M709.3 320.4c-17.4-2.9-33.9 8.9-36.8 26.3l-42.8 256.9-87.3-261.8c-4.4-13-16.6-21.8-30.4-21.8-13.8 0-26 8.8-30.4 21.9l-87.3 261.8-42.8-256.9c-2.9-17.4-19.4-29.2-36.8-26.3-17.4 2.9-29.2 19.4-26.3 36.8l64 384c2.4 14.5 14.4 25.5 29.1 26.6 14.7 1.1 28.2-7.8 32.9-21.8L512 453.2l66.4 199.1c3.9 11.8 15 19.8 27.4 19.8h52.9c14.1 0 26.2-10.2 28.5-24.1l48.4-290.6c2.9-17.6-8.9-34.1-26.3-37z" p-id="2615"></path></svg>'
+
+			});
+
+			// Execute a callback function when the button is clicked
+			button.on('execute', () => {
+				const pageContent = getPageContent();
+				const style = getStyle();
+				const page = '<!DOCTYPE html><html><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><style>@media print{@page{size:A4 portrait;margin:0cm 3cm}@page:left{margin-left:2.5cm;margin-right:2.7cm;}@page:right{margin-left:2.7cm;margin-right:2.5cm;}}</style>' + style + '</head><body>' + pageContent + '</body></html>'
+
+				// console.log(page);
+				asBlob(page).then(data => {
+					saveAs(data, 'file.docx') // save as docx file
+				}); // asBlob() return Promise<Blob|Buffer>
+			});
+
+			return button;
+		});
+
+		// 增加菜单栏？ 不显示按钮
+		// editor.ui.extendMenuBar({
+		// 	menu: {
+		// 		menuId: 'export',
+		// 		label: '导出',
+		// 		groups: [
+		// 			{
+		// 				groupId: 'export',
+		// 				items: [
+		// 					'ExportToWord'
+		// 				]
+		// 			}
+		// 		]
+		// 	},
+		// 	position: 'after:help'
+		// }
+		// );
+
+	}
+}
+// 导出为PDF插件
+class Export2PDF extends Plugin {
+	init() {
+		const editor = this.editor;
+
+		editor.ui.componentFactory.add('ExportToPDF', () => {
+			// The button will be an instance of ButtonView.
+			const button = new ButtonView();
+
+			button.set({
+				label: '导出为PDF',
+				// withText: true
+				tooltip: true,
+
+				// 图标 直接插入svg文件
+				icon: '<svg t="1730309942693" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2589" width="200" height="200"><path d="M576 832H224c-17.6 0-32-14.4-32-32V192h608c17.6 0 32 14.4 32 32v288c0 17.7 14.3 32 32 32s32-14.3 32-32V224c0-52.9-43.1-96-96-96H160c-17.7 0-32 14.3-32 32v640c0 52.9 43.1 96 96 96h352c17.7 0 32-14.3 32-32s-14.3-32-32-32z" p-id="2590"></path><path d="M960 734.4c0-0.3 0-0.5-0.1-0.7 0-0.3 0-0.5-0.1-0.8 0-0.3-0.1-0.6-0.1-0.9 0-0.2 0-0.4-0.1-0.6 0-0.3-0.1-0.7-0.2-1 0-0.2-0.1-0.4-0.1-0.5-0.1-0.3-0.1-0.7-0.2-1 0-0.2-0.1-0.3-0.1-0.5-0.1-0.3-0.2-0.6-0.3-1-0.1-0.2-0.1-0.4-0.2-0.6l-0.3-0.9c-0.1-0.2-0.1-0.4-0.2-0.6-0.1-0.3-0.2-0.5-0.3-0.8-0.1-0.2-0.2-0.5-0.3-0.7-0.1-0.2-0.2-0.4-0.3-0.7-0.1-0.3-0.2-0.5-0.4-0.8-0.1-0.2-0.2-0.4-0.3-0.5-0.1-0.3-0.3-0.6-0.4-0.9-0.1-0.2-0.2-0.3-0.3-0.4-0.2-0.3-0.3-0.6-0.5-0.9-0.1-0.1-0.2-0.3-0.2-0.4l-0.6-0.9c-0.1-0.1-0.2-0.2-0.3-0.4l-0.6-0.9c-0.1-0.1-0.2-0.3-0.3-0.4-0.2-0.3-0.4-0.6-0.7-0.8-0.1-0.2-0.3-0.3-0.4-0.5-0.2-0.2-0.4-0.5-0.6-0.7-0.2-0.2-0.4-0.5-0.7-0.7l-0.4-0.4-128-128c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l73.4 73.4H592c-17.7 0-32 14.3-32 32s14.3 32 32 32h258.7l-73.4 73.4c-12.5 12.5-12.5 32.8 0 45.3 6.2 6.2 14.4 9.4 22.6 9.4s16.4-3.1 22.6-9.4l128-128 0.4-0.4 0.7-0.7c0.2-0.2 0.4-0.5 0.6-0.7 0.1-0.2 0.3-0.3 0.4-0.5 0.2-0.3 0.4-0.6 0.7-0.8 0.1-0.1 0.2-0.3 0.3-0.4l0.6-0.9c0.1-0.1 0.2-0.2 0.3-0.4l0.6-0.9c0.1-0.1 0.2-0.3 0.2-0.4 0.2-0.3 0.4-0.6 0.5-0.9 0.1-0.1 0.2-0.3 0.3-0.4 0.2-0.3 0.3-0.6 0.4-0.9 0.1-0.2 0.2-0.4 0.3-0.5 0.1-0.3 0.2-0.5 0.4-0.8 0.1-0.2 0.2-0.4 0.3-0.7 0.1-0.2 0.2-0.5 0.3-0.7 0.1-0.3 0.2-0.5 0.3-0.8 0.1-0.2 0.1-0.4 0.2-0.6l0.3-0.9c0.1-0.2 0.1-0.4 0.2-0.6 0.1-0.3 0.2-0.6 0.3-1 0-0.2 0.1-0.3 0.1-0.5 0.1-0.3 0.2-0.7 0.2-1 0-0.2 0.1-0.4 0.1-0.5 0.1-0.3 0.1-0.7 0.2-1 0-0.2 0.1-0.4 0.1-0.6 0-0.3 0.1-0.6 0.1-0.9 0-0.3 0-0.5 0.1-0.8 0-0.2 0-0.5 0.1-0.7-0.1-1.5-0.1-2.5-0.1-3.6zM352 320c-17.7 0-32 14.3-32 32v384c0 17.7 14.3 32 32 32s32-14.3 32-32V576h192c70.6 0 128-57.4 128-128s-57.4-128-128-128H352z m288 128c0 35.3-28.7 64-64 64H384V384h192c35.3 0 64 28.7 64 64z" p-id="2591"></path></svg>'
+
+			});
+
+			// Execute a callback function when the button is clicked
+			button.on('execute', () => {
+				const pageContent = getPageContent();
+				console.log(pageContent);
+				const style = getStyle();
+				// 去掉element中的 ck-focused ck-weight_selected消除页面和图片的蓝边
+				const page = '<!DOCTYPE html><html><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><style>@media print{@page{size:A4 portrait;margin:0cm 3cm}@page:left{margin-left:2.5cm;margin-right:2.7cm;}@page:right{margin-left:2.7cm;margin-right:2.5cm;}}</style>' + style + '</head><body>' + pageContent.replaceAll('ck-focused', 'ck-blurred').replaceAll('ck-weight_selected', '') + '</body></html>'
+				const newWindow = window.open('', 'PrintDocument', 'height=600,width=700,top=50,left=50');
+				newWindow.document.write(page);
+				newWindow.document.close();
+				newWindow.print();
+				newWindow.onafterprint = function () {
+					newWindow.close();
+				}
+			});
+
+			return button;
+		});
+	}
+}
+// 智能润色插件
+class Translation extends Plugin {
+	init() {
+		// console.log('Translation initialized!');
+
+		this.editor.ui.componentFactory.add('translate', (locale) => {
+			const dropdownView = createDropdown(locale);
+			dropdownView.buttonView.set({
+				label: '智能助手',
+				withText: true,
+			});
+
+			const items = new Collection();
+			items.add({
+				type: 'button',
+				model: {
+					id: 'summary',
+					withText: true,
+					label: '摘要',
+				}
+			});
+			items.add({
+				type: 'button',
+				model: {
+					id: 'decoration',
+					withText: true,
+					label: '润色'
+				}
+			});
+			items.add({
+				type: 'button',
+				model: {
+					id: 'extension',
+					withText: true,
+					label: '续写'
+				}
+			});
+			items.add({
+				type: 'button',
+				model: {
+					id: 'correction',
+					withText: true,
+					label: '修改'
+				}
+			});
+			items.add({
+				type: 'button',
+				model: {
+					id: 'translation',
+					withText: true,
+					label: '翻译'
+				}
+			});
+			addListToDropdown(dropdownView, items);
+
+			dropdownView.on('execute', (eventInfo) => {
+				const { id, label } = eventInfo.source;
+				// 获取选中的文本，用来进行后续操作
+				const selectionText = window.getSelection().toString();
+				if (id === 'summary') {
+					// this.editor.execute('ExportToWord');
+					console.log('Object (en):', label, selectionText);
+				}
+			});
+
+			return dropdownView;
+		});
+	}
+}
+// 侧边栏
+class ToggleSideBar extends Plugin{
+	// constructor(toggleSidebar) {
+	// 	super();
+	// 	this.toggleSidebar = toggleSidebar;
+	// }
+	init() {
+		const editor = this.editor;
+
+		editor.ui.componentFactory.add('SideBar', () => {
+			// The button will be an instance of ButtonView.
+			const button = new ButtonView();
+
+			button.set({
+				label: '侧边栏',
+				// withText: true
+				tooltip: true,
+				// 图标 直接插入svg文件
+				icon: '<svg t="1730903613822" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2614" width="200" height="200"><path d="M849.92 981.333333H175.658667A132.736 132.736 0 0 1 42.666667 848.597333V175.36A132.736 132.736 0 0 1 175.658667 42.666667H849.92C921.898667 42.666667 981.333333 102.016 981.333333 175.402667v673.152C981.333333 922.026667 921.898667 981.333333 849.92 981.333333zM175.658667 136.362667a38.698667 38.698667 0 0 0-39.125334 39.04v673.152c0 21.888 17.194667 39.082667 39.125334 39.082666H849.92a38.698667 38.698667 0 0 0 39.125333-39.04V175.36c-1.578667-21.845333-18.773333-39.04-39.125333-39.04H175.658667z" fill="#172B4D" p-id="2615"></path><path d="M374.314667 957.866667a46.08 46.08 0 0 1-46.933334-46.805334V111.36a46.08 46.08 0 0 1 46.933334-46.890667c26.624 0 46.933333 20.309333 46.933333 46.890667v799.658667a46.08 46.08 0 0 1-46.933333 46.848z" fill="#172B4D" p-id="2616"></path></svg>'
+
+			});
+
+			// Execute a callback function when the button is clicked
+			button.on('execute', () => {
+				// 打开sidebar
+				const bt = document.getElementById("toggleSidebarButton");
+				console.log(bt);
+				bt.click();
+			});
+
+			return button;
+		});
+	}
+}
+
+export { Export2Word, Export2PDF, Translation, ToggleSideBar };
\ No newline at end of file
diff --git a/coeditor_frontend/src/components/utils.js b/coeditor_frontend/src/components/utils.js
new file mode 100644
index 0000000..1b1bacb
--- /dev/null
+++ b/coeditor_frontend/src/components/utils.js
@@ -0,0 +1,143 @@
+// utils.js
+
+// 获取用户配置
+export function getUserConfigFromBackend() {
+    // TODO 请求用户配置
+    const options = {};
+    // 字体、字号、样式
+    // TODO
+    const {
+        fontFamilyOptions = [
+            'default',
+            '宋体',
+            '新宋体',
+            '仿宋',
+            '楷体',
+            '微软雅黑',
+            '黑体',
+            '华文仿宋',
+            '华文楷体',
+            '华文隶书',
+            '华文宋体',
+            '华文细黑',
+            '华文新魏',
+            '华文行楷',
+            '华文中宋',
+            '隶书',
+            '苹方 常规',
+            '幼圆',
+            'Times New Roman'
+        ],
+        // 五号，小四，四号，小三，三号，小二，二号
+        fontSizeOptions = [14, 'default', 16,18.6,20, 21.3,24,29.3],
+        styleDefinitions = [
+            {
+                name: 'Article category',
+                element: 'h3',
+                classes: ['category']
+            },
+            {
+                name: 'Title',
+                element: 'h2',
+                classes: ['document-title']
+            },
+            {
+                name: 'Subtitle',
+                element: 'h3',
+                classes: ['document-subtitle']
+            },
+            {
+                name: 'Info box',
+                element: 'p',
+                classes: ['info-box']
+            },
+            {
+                name: 'Side quote',
+                element: 'blockquote',
+                classes: ['side-quote']
+            },
+            {
+                name: 'Marker',
+                element: 'span',
+                classes: ['marker']
+            },
+            {
+                name: 'Spoiler',
+                element: 'span',
+                classes: ['spoiler']
+            },
+            {
+                name: 'Code (dark)',
+                element: 'pre',
+                classes: ['fancy-code', 'fancy-code-dark']
+            },
+            {
+                name: 'Code (bright)',
+                element: 'pre',
+                classes: ['fancy-code', 'fancy-code-bright']
+            },
+            {
+                name: 'GradientBorder',
+                element: 'p',
+                classes: ['gradientborder']
+            }
+        ]
+    } = options;
+    // 如果传入的options没有对应项，使用默认值
+    return {
+        fontFamily: {
+            options: fontFamilyOptions
+        },
+        fontSize: {
+            options: fontSizeOptions
+        },
+        style: {
+            definitions: styleDefinitions
+        }
+    };
+}
+
+// 实现自动保存saveData方法，将编辑内容发送至后端
+export function saveData(data) {
+    // return new Promise( resolve => {
+    //     setTimeout( () => {
+    //         console.log( 'Saved', data );
+
+    //         resolve();
+    //     }, HTTP_SERVER_LAG );
+    // } );
+    console.log(data);
+}
+
+
+// 将当前页面的样式转为内联
+export function getStyle() {
+    let str = '<head><meta charset="utf-8"></meta>';
+    const styles = document.querySelectorAll('style');
+    for (let i = 0; i < styles.length; i++) {
+        str += styles[i].outerHTML;
+    }
+    str += "<style>.results{width:100%!important;} .result .title{width:100%;}</style>";
+    str += "<style>table{border-collapse: collapse;table-layout: fixed}</style>"
+    // str += "<style>table thead tr{ background-color: #f3f4f9;}</style>"
+    str += "<style>table td,th{ font-size: 14px;padding: 1px 1px;border-width: 1px;border-style: solid;border-color: #d0d0d0;word-break: keep-all;white-space: nowrap;}</style>"
+    return str;
+}
+
+// 获取用户编辑的内容 <html>
+export function getPageContent() {
+    // const pageContent = document.querySelector("#app > div > div > div > div.editor-container__editor-wrapper > div > div > div.ck.ck-reset.ck-editor.ck-rounded-corners > div.ck.ck-editor__main > div");
+    const pageContent = document.querySelector("#app > div > div > div > div.editor-container__editor-wrapper > div > div > div");
+    return pageContent.innerHTML;
+}
+
+// 获取并应用用户定义的样式
+export function getAndApplyUserStyles() {
+    // 模拟从后端获取用户定义的样式
+    const response = fetch('/api/user-styles');
+    const styles = response.json();
+    const styleElement = document.createElement('style');
+    styleElement.innerHTML = styles;
+    document.head.appendChild(styleElement);
+    return styles;
+}
\ No newline at end of file
diff --git a/coeditor_frontend/src/main.js b/coeditor_frontend/src/main.js
index 165a6cf..5546580 100644
--- a/coeditor_frontend/src/main.js
+++ b/coeditor_frontend/src/main.js
@@ -1,6 +1,13 @@
 import { createApp } from 'vue'
+import './public/style.css';
 import App from './App.vue'
 import store from './store'
 import router from './router'
+import { CkeditorPlugin } from '@ckeditor/ckeditor5-vue';
 
-createApp(App).use(router).use(store).mount('#app')
+const app = createApp(App);
+
+app.use(router);
+app.use(store);
+app.use(CkeditorPlugin);
+app.mount('#app');
\ No newline at end of file
diff --git a/coeditor_frontend/src/public/favicon.ico b/coeditor_frontend/src/public/favicon.ico
new file mode 100644
index 0000000000000000000000000000000000000000..df36fcfb72584e00488330b560ebcf34a41c64c2
GIT binary patch
literal 4286
zcmds*O-Phc6o&64GDVCEQHxsW(p4>LW*W<827=Unuo8sGpRux(DN@jWP-e29Wl%wj
zY84_aq9}^Am9-cWTD5GGEo#+5Fi2wX_P*bo+xO!)p*7B;iKlbFd(U~_d(U?#hLj56
zPhFkj-|A6~Qk#@g^#D^U0XT1cu=c-vu1+SElX9NR;kzAUV(q0|dl0|%h|dI$%VICy
zJnu2^L*Te9JrJMGh%-P79CL0}dq92RGU6gI{v2~|)p}sG5x0U*z<8U;Ij*hB9z?ei
z@g6Xq-pDoPl=MANPiR7%172VA%r)kev<ISBgE$F{SFy+(=9Z)f)De0Se}ZDZW}Z3B
zElCeVrw;K0Fdl_Cg=gZOFXXc3pL)Q05CAuT+XucQ<8g~3dteP~|7s7c6QYP;fy;mF
zMN;>tV-_5H*QJKFmd;8yA$98zCxBZYXTNZ#QFk2(TX0;Y2dt&WitL#$96|gJY=3xX
zpCoi|YNzgO3R`f@IiEeSmKrPSf#h#Qd<$%Ej^RIeeYfsxhPMOG`S`Pz8q``=511zm
zAm)MX5AV^5xIWPyEu7u>qYs?pn$I4nL9J!=K=SGlKLXpE<5x+2cDTXq?brj?n6sp=
zphe9;_JHf40^9~}9i08r{XM$7HB!`{Ys~TK0kx<}ZQng`UPvH*11|q7&l9?@FQz;8
zx!=3<4seY*%=OlbCbcae?<QnEgvj4i?s}Yk=qA2z`-^*<eK3c)MS4JOdbsTQEOa0)
z0NWqlna2rzs>5^V_}*K>Uo6ZWV8mTyE^B=DKy7-sdLYkR5Z?paTgK-zyIkKjIcpyO
z{+uIt&YSa_$QnN_@t~L014dyK(fOOo+W*MIxbA6Ndgr=Y!f#Tokqv}n<7-9qfHkc3
z=>a|HWqcX8fzQCT=dqVbogRq!-S>H%yA{1w#2Pn;=e>JiEj7Hl;zdt-2f+j2%DeVD
zsW0Ab)ZK@0cIW%W7<X*Er!BfRbvU93$DH%#v6dRt^6HBxz1xBNHx=$&_Gv<&J}Ljk
zJN<Fzx(`Oe@KgQ0F$<14=XV#WK`o#6Ku>z}H{&~yGhn~D;aiP4=;m-HCo`BEI+Kd6
z={Xwx{T<?%b6i9IjI)Ls)S{-*mq<@~R{?$}ZKjf;^k75i_}(2MXt}^SEBVg7AI@28
zo_uPg2V)_e-`2Ois=PYoe%9u*n9({PFR)OnHJPi{dNx>Kx<YG`4QQ>D#iCLfl2<BD
h7L=-;Q>vQGDitKtN>z|-AdCN|$jTFDg0m3O`WLD4_s#$S

literal 0
HcmV?d00001

diff --git a/coeditor_frontend/src/public/index.html b/coeditor_frontend/src/public/index.html
new file mode 100644
index 0000000..3e5a139
--- /dev/null
+++ b/coeditor_frontend/src/public/index.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html lang="">
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width,initial-scale=1.0">
+    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
+    <title><%= htmlWebpackPlugin.options.title %></title>
+  </head>
+  <body>
+    <noscript>
+      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
+    </noscript>
+    <div id="app"></div>
+    <!-- built files will be auto injected -->
+  </body>
+</html>
diff --git a/coeditor_frontend/src/public/style.css b/coeditor_frontend/src/public/style.css
new file mode 100644
index 0000000..c14ed8f
--- /dev/null
+++ b/coeditor_frontend/src/public/style.css
@@ -0,0 +1,281 @@
+@import url('https://fonts.googleapis.com/css2?family=Oswald&family=PT+Serif:ital,wght@0,400;0,700;1,400&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,400;0,700;1,400;1,700&display=swap');
+
+@media print {
+	body {
+		margin: 0 !important;
+	}
+}
+
+.main-container {
+	--ckeditor5-preview-height: 650px;
+	position: relative;
+	font-family: '宋体';
+	width: fit-content;
+	height: 100%;
+	margin-left: auto;
+	margin-right: auto;
+}
+
+.ck-content {
+	font-family: '宋体';
+	font-size: 16px;
+	line-height: 1.6;
+	word-break: break-word;
+}
+
+.editor-container__editor-wrapper {
+	display: flex;
+	width: fit-content;
+}
+
+.editor-container_document-editor {
+	border: 1px solid var(--ck-color-base-border);
+}
+
+.editor-container_document-editor .editor-container__toolbar {
+	display: flex;
+	position: relative;
+	box-shadow: 0 2px 3px hsla(0, 0%, 0%, 0.078);
+}
+
+.editor-container_document-editor .editor-container__toolbar>.ck.ck-toolbar {
+	flex-grow: 1;
+	width: 0;
+	border-bottom-right-radius: 0;
+	border-bottom-left-radius: 0;
+	border-top: 0;
+	border-left: 0;
+	border-right: 0;
+}
+
+.editor-container_document-editor .editor-container__menu-bar>.ck.ck-menu-bar {
+	border-bottom-right-radius: 0;
+	border-bottom-left-radius: 0;
+	border-top: 0;
+	border-left: 0;
+	border-right: 0;
+}
+
+.editor-container_document-editor .editor-container__editor-wrapper {
+	max-height: var(--ckeditor5-preview-height);
+	min-height: var(--ckeditor5-preview-height);
+	overflow-y: scroll;
+	background: var(--ck-color-base-foreground);
+}
+
+.editor-container_document-editor .editor-container__editor {
+	margin-top: 28px;
+	margin-bottom: 28px;
+	height: 100%;
+}
+
+.editor-container_document-editor .editor-container__editor .ck.ck-editor__editable {
+	box-sizing: border-box;
+	min-width: calc(210mm + 2px);
+	max-width: calc(210mm + 2px);
+	min-height: 297mm;
+	height: fit-content;
+	padding: 20mm 12mm;
+	border: 1px hsl(0, 0%, 82.7%) solid;
+	background: hsl(0, 0%, 100%);
+	box-shadow: 0 2px 3px hsla(0, 0%, 0%, 0.078);
+	flex: 1 1 auto;
+	margin-left: 72px;
+	margin-right: 72px;
+}
+
+/*侧边栏出现时其他右移*/
+.main-container.sidebar-open .editor-container__menu-bar,
+.main-container.sidebar-open .editor-container__toolbar,
+.main-container.sidebar-open .editor-container__editor-wrapper {
+	transition: margin-left 0.3s ease;
+	margin-left: 350px;
+}
+
+/*用户定义的style插件样式*/
+.ck-content h3.category {
+	font-family: 'Oswald';
+	font-size: 20px;
+	font-weight: bold;
+	color: #555;
+	letter-spacing: 10px;
+	margin: 0;
+	padding: 0;
+}
+
+.ck-content h2.document-title {
+	font-family: 'Oswald';
+	font-size: 50px;
+	font-weight: bold;
+	margin: 0;
+	padding: 0;
+	border: 0;
+}
+
+.ck-content h3.document-subtitle {
+	font-family: 'Oswald';
+	font-size: 20px;
+	color: #555;
+	margin: 0 0 1em;
+	font-weight: bold;
+	padding: 0;
+}
+
+.ck-content p.info-box {
+	--background-size: 30px;
+	--background-color: #e91e63;
+	padding: 1.2em 2em;
+	border: 1px solid var(--background-color);
+	background: linear-gradient(135deg,
+			var(--background-color) 0%,
+			var(--background-color) var(--background-size),
+			transparent var(--background-size)),
+		linear-gradient(135deg,
+			transparent calc(100% - var(--background-size)),
+			var(--background-color) calc(100% - var(--background-size)),
+			var(--background-color));
+	border-radius: 10px;
+	margin: 1.5em 2em;
+	box-shadow: 5px 5px 0 #ffe6ef;
+}
+
+.ck-content blockquote.side-quote {
+	font-family: 'Oswald';
+	font-style: normal;
+	float: right;
+	width: 35%;
+	position: relative;
+	border: 0;
+	overflow: visible;
+	z-index: 1;
+	margin-left: 1em;
+}
+
+.ck-content blockquote.side-quote::before {
+	content: '“';
+	position: absolute;
+	top: -37px;
+	left: -10px;
+	display: block;
+	font-size: 200px;
+	color: #e7e7e7;
+	z-index: -1;
+	line-height: 1;
+}
+
+.ck-content blockquote.side-quote p {
+	font-size: 2em;
+	line-height: 1;
+}
+
+.ck-content blockquote.side-quote p:last-child:not(:first-child) {
+	font-size: 1.3em;
+	text-align: right;
+	color: #555;
+}
+
+.ck-content span.marker {
+	background: yellow;
+}
+
+.ck-content span.spoiler {
+	background: #000;
+	color: #000;
+}
+
+.ck-content span.spoiler:hover {
+	background: #000;
+	color: #fff;
+}
+
+.ck-content pre.fancy-code {
+	border: 0;
+	margin-left: 2em;
+	margin-right: 2em;
+	border-radius: 10px;
+}
+
+.ck-content pre.fancy-code::before {
+	content: '';
+	display: block;
+	height: 13px;
+	background: url(data:image/svg+xml;base64,PHN2ZyBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1NCAxMyI+CiAgPGNpcmNsZSBjeD0iNi41IiBjeT0iNi41IiByPSI2LjUiIGZpbGw9IiNGMzZCNUMiLz4KICA8Y2lyY2xlIGN4PSIyNi41IiBjeT0iNi41IiByPSI2LjUiIGZpbGw9IiNGOUJFNEQiLz4KICA8Y2lyY2xlIGN4PSI0Ny41IiBjeT0iNi41IiByPSI2LjUiIGZpbGw9IiM1NkM0NTMiLz4KPC9zdmc+Cg==);
+	margin-bottom: 8px;
+	background-repeat: no-repeat;
+}
+
+.ck-content pre.fancy-code-dark {
+	background: #272822;
+	color: #fff;
+	box-shadow: 5px 5px 0 #0000001f;
+}
+
+.ck-content pre.fancy-code-bright {
+	background: #dddfe0;
+	color: #000;
+	box-shadow: 5px 5px 0 #b3b3b3;
+}
+
+.ck-content p.gradientborder {
+	--borderWidth: 12px;
+	--bRadius: 5px;
+	width: 60%;
+	height: 60%;
+	position: relative;
+	z-index: 0;
+	overflow: hidden;
+	padding: 2rem;
+	z-index: 0;
+	border-radius: --bRadius;
+
+	&::after,
+	&::before {
+		box-sizing: border-box;
+	}
+
+	&::before {
+		content: '';
+		position: absolute;
+		left: -50%;
+		top: -50%;
+		width: 200%;
+		height: 200%;
+		z-index: -2;
+		background-repeat: no-repeat;
+		background-size: 50% 50%, 50% 50%;
+		background-position: 0 0, 100% 0, 100% 100%, 0 100%;
+		background-image: linear-gradient(#399953, #399953), linear-gradient(#fbb300, #fbb300), linear-gradient(#d53e33, #d53e33), linear-gradient(#377af5, #377af5);
+		animation: rotate 4s linear infinite;
+
+		@keyframes rotate {
+			100% {
+				transform: rotate(1turn);
+			}
+		}
+	}
+
+	&::after {
+		content: '';
+		position: absolute;
+		z-index: -1;
+		left: calc(var(--borderWidth) / 2);
+		top: calc(var(--borderWidth) / 2);
+		width: calc(100% - var(--borderWidth));
+		height: calc(100% - var(--borderWidth));
+		background: white;
+		border-radius: --bRadius;
+		/*  这一行是为了方便查看原来的样子的 */
+		animation: opacityChange 3s infinite alternate;
+	}
+
+	@keyframes opacityChange {
+		50% {
+			opacity: 1;
+		}
+
+		100% {
+			opacity: .5;
+		}
+	}
+}
\ No newline at end of file
diff --git a/coeditor_frontend/src/router/index.js b/coeditor_frontend/src/router/index.js
index 20c137c..464c2d6 100644
--- a/coeditor_frontend/src/router/index.js
+++ b/coeditor_frontend/src/router/index.js
@@ -4,6 +4,7 @@ import LoginView from  '../views/LoginView'
 import RegisterView from '../views/RegisterView'
 import NotFoundView from '../views/NotFoundView'
 import UserProfileView from '../views/UserProfileView'
+import CkeditorView from '../views/CkeditorView'
 
 const routes = [
   {
@@ -31,6 +32,11 @@ const routes = [
     name: '404',
     component: NotFoundView
   },
+  {
+    path: '/ckeditor/',
+    name: 'ckeditor',
+    component: CkeditorView,
+  },
   {
     path: '/:catchAll(.*)',
     redirect: '/404/',
diff --git a/coeditor_frontend/src/store/user.js b/coeditor_frontend/src/store/user.js
index a96e356..38a0837 100644
--- a/coeditor_frontend/src/store/user.js
+++ b/coeditor_frontend/src/store/user.js
@@ -6,7 +6,8 @@ const ModulerUser = {
         access: "",
         refresh: "",
         is_login: false,
-        path:['~/users/'],
+        path:[],
+        filecontent:'',
     },
     getters: {
     },
@@ -22,14 +23,17 @@ const ModulerUser = {
           state.access =  "",
           state.refresh = "",
           state.is_login = false,
-          state.path = ['~/users/']
+          state.path = []
         },
         forwardPath(state,item){
           state.path.push(item);
         },
         backPath(state){
           state.path.pop();
-        }
+        },
+        updateFileContent(state,content){
+          state.filecontent = content;
+        },
     },
     actions: {
         login(context,data){
@@ -55,7 +59,7 @@ const ModulerUser = {
                         refresh:refresh,
                         is_login: true,
                       });
-                      context.commit('forwardPath',resp.username + '/'
+                      context.commit('forwardPath',"~/users/" + resp.username + '/'
                       );
                       data.success();
                     }
diff --git a/coeditor_frontend/src/views/CkeditorView.vue b/coeditor_frontend/src/views/CkeditorView.vue
new file mode 100644
index 0000000..39b4e9d
--- /dev/null
+++ b/coeditor_frontend/src/views/CkeditorView.vue
@@ -0,0 +1,803 @@
+<template>
+	<div>
+		<div :class="['main-container', { 'sidebar-open': isSidebarOpen }]">
+			<div class="editor-container editor-container_document-editor editor-container_include-style"
+				ref="editorContainerElement">
+				<div class="editor-container__menu-bar" ref="editorMenuBarElement"></div>
+				<div class="editor-container__toolbar" ref="editorToolbarElement"></div>
+				<div class="editor-container__editor-wrapper">
+					<div class="editor-container__editor">
+						<div ref="editorElement">
+							<ckeditor v-if="isLayoutReady" v-model="config.initialData" :editor="editor"
+								:config="config" @ready="onReady" />
+						</div>
+					</div>
+				</div>
+			</div>
+			<el-button type="primary" @click="toggleSidebar()" style="display:none"
+				id="toggleSidebarButton">打开/关闭侧边栏</el-button>
+			<div class="sidebar" :class="{ 'active': isSidebarOpen }">
+				<!-- 侧边栏内容 -->
+				<el-menu class="sidebar-menu" :class="{ 'active': isNavbarOpen }">
+					<el-sub-menu index="1">
+						<template #title>智能助手</template>
+						<el-menu-item index="1-1" @click="showContent('polish')">润色</el-menu-item>
+						<el-menu-item index="1-2" @click="showContent('rewrite')">改写</el-menu-item>
+						<el-menu-item index="1-3" @click="showContent('summary')">摘要</el-menu-item>
+						<el-menu-item index="1-4" @click="showContent('edit')">修改</el-menu-item>
+						<el-menu-item index="1-5" @click="showContent('translate')">翻译</el-menu-item>
+					</el-sub-menu>
+					<el-sub-menu index="2">
+						<template #title>图文转换</template>
+						<el-menu-item index="2-1" @click="showContent('ocr')">OCR</el-menu-item>
+						<el-menu-item index="2-2" @click="showContent('mindmap')">脑图生成</el-menu-item>
+					</el-sub-menu>
+					<el-sub-menu index="3">
+						<template #title>样式生成</template>
+						<el-menu-item index="3-1" @click="showContent('manual')">手动生成</el-menu-item>
+						<el-menu-item index="3-2" @click="showContent('ai')">对话生成</el-menu-item>
+					</el-sub-menu>
+				</el-menu>
+				<!-- Content Sections -->
+				<div v-if="currentContent" class="content-section">
+					<el-button icon="el-icon-menu" @click="toggleNavBar()">导航</el-button>
+					<!-- Dynamic content based on navigation selection -->
+					<div v-if="currentContent === 'polish'">润色内容</div>
+					<div v-if="currentContent === 'rewrite'">改写内容</div>
+					<div v-if="currentContent === 'summary'">摘要内容</div>
+					<div v-if="currentContent === 'edit'">修改内容</div>
+					<div v-if="currentContent === 'translate'">翻译内容</div>
+					<div v-if="currentContent === 'ocr'">OCR内容</div>
+					<div v-if="currentContent === 'mindmap'">脑图生成内容</div>
+					<div v-if="currentContent === 'manual'" class="p-3">
+						<!-- 手动输入表单 -->
+						<el-form @submit.prevent="submitForm">
+							<el-col :span="30">
+								<el-form-item label="字体颜色:">
+									<el-col :span="10">
+										<el-select v-model="formData.color" @change="updatePreview">
+											<el-option label="黑色" value="black"
+												style="background-color: black;">黑色</el-option>
+											<el-option label="红色" value="red"
+												style="background-color: red;">红色</el-option>
+											<el-option label="蓝色" value="blue"
+												style="background-color: blue;">蓝色</el-option>
+											<el-option label="绿色" value="green"
+												style="background-color: green;">绿色</el-option>
+											<el-option label="黄色" value="yellow"
+												style="background-color: yellow;">黄色</el-option>
+											<el-option label="紫色" value="purple"
+												style="background-color: purple;">紫色</el-option>
+											<el-option label="橙色" value="orange"
+												style="background-color: orange">橙色</el-option>
+										</el-select>
+									</el-col>
+									<el-col :span="8">
+										<el-color-picker v-model="formData.color"
+											@change="updatePreview"></el-color-picker>
+									</el-col>
+								</el-form-item>
+							</el-col>
+							<el-col :span="24">
+								<el-form-item label="字体大小:">
+									<el-row :gutter="10">
+										<el-col :span="12">
+											<el-select v-model="formData.fontSize" @change="updatePreview">
+												<el-option value="">请选择</el-option>
+												<el-option value="29.3px" style="font-size: 29.3px;">二号</el-option>
+												<el-option value="24px" style="font-size: 24px;">小二</el-option>
+												<el-option value="21.3px" style="font-size: 21.3px;">三号</el-option>
+												<el-option value="20px" style="font-size: 20px;">小三</el-option>
+												<el-option value="18.6px" style="font-size: 18.6px;">四号</el-option>
+												<el-option value="16px" style="font-size: 16px;">小四</el-option>
+												<el-option value="14px" style="font-size: 14px;">五号</el-option>
+												<el-option value="12px" style="font-size: 12px;">小五</el-option>
+												<el-option value="10px" style="font-size: 10px;">六号</el-option>
+												<el-option value="8.6px" style="font-size: 8.6px;">小六</el-option>
+											</el-select>
+										</el-col>
+										<el-col :span="12">
+											<el-input v-model="formData.fontSize" placeholder="例如: 16px"
+												@input="updatePreview"></el-input>
+										</el-col>
+									</el-row>
+								</el-form-item>
+							</el-col>
+							<!-- 字体选择 -->
+							<el-row :gutter="8">
+								<el-col :span="12">
+									<el-form-item label="字体:">
+										<el-select v-model="formData.fontFamily" @change="updatePreview">
+											<!--英文字体-->
+											<el-option value="">请选择</el-option>
+											<el-option value="Arial" style="font-family: Arial;">Arial</el-option>
+											<el-option value="Courier New" style="font-family: 'Courier New';">Courier
+												New</el-option>
+											<el-option value="Georgia" style="font-family: Georgia;">Georgia</el-option>
+											<el-option value="Helvetica"
+												style="font-family: Helvetica;">Helvetica</el-option>
+											<el-option value="Times New Roman"
+												style="font-family: 'Times New Roman';">Times
+												New Roman</el-option>
+											<el-option value="serif" style="font-family: serif;">serif</el-option>
+											<el-option value="sans-serif"
+												style="font-family: sans-serif;">sans-serif</el-option>
+											<el-option value="monospace"
+												style="font-family: monospace;">monospace</el-option>
+											<el-option value="cursive" style="font-family: cursive;">cursive</el-option>
+											<el-option value="fantasy" style="font-family: fantasy;">fantasy</el-option>
+											<!--中文字体字体-->
+											<el-option value="SimSun" style="font-family: SimSun;">宋体</el-option>
+											<el-option value="SimHei" style="font-family: SimHei;">黑体</el-option>
+											<el-option value="Microsoft YaHei"
+												style="font-family: 'Microsoft YaHei';">微软雅黑</el-option>
+											<el-option value="FangSong" style="font-family: FangSong;">仿宋</el-option>
+											<el-option value="KaiTi" style="font-family: KaiTi;">楷体</el-option>
+											<el-option value="LiSu" style="font-family: LiSu;">隶书</el-option>
+											<el-option value="YouYuan" style="font-family: YouYuan;">幼圆</el-option>
+											<el-option value="STSong" style="font-family: STSong;">华文宋体</el-option>
+											<el-option value="STHeiti" style="font-family: STHeiti;">华文黑体</el-option>
+											<el-option value="STKaiti" style="font-family: STKaiti;">华文楷体</el-option>
+											<el-option value="STFangsong"
+												style="font-family: STFangsong;">华文仿宋</el-option>
+											<el-option value="STXihei" style="font-family: STXihei;">华文细黑</el-option>
+											<el-option value="STCaiyun" style="font-family: STCaiyun;">华文彩云</el-option>
+											<el-option value="STHupo" style="font-family: STHupo;">华文琥珀</el-option>
+											<el-option value="STXinwei" style="font-family: STXinwei;">华文新魏</el-option>
+											<el-option value="STXingkai"
+												style="font-family: STXingkai;">华文行楷</el-option>
+											<el-option value="FZShuTi" style="font-family: FZShuTi;">方正舒体</el-option>
+											<el-option value="FZYaoti" style="font-family: FZYaoti;">方正姚体</el-option>
+										</el-select>
+									</el-form-item>
+								</el-col>
+								<el-col :span="12">
+									<el-form-item label="字体样式:">
+										<el-select v-model="formData.fontStyle" @change="updatePreview">
+											<el-option value="">请选择</el-option>
+											<el-option value="normal" style="font-style: normal;">正常</el-option>
+											<el-option value="italic" style="font-style: italic;">斜体</el-option>
+										</el-select>
+									</el-form-item>
+								</el-col>
+								<el-col :span="12">
+									<el-form-item label="字体粗细:">
+										<el-select v-model="formData.fontWeight" @change="updatePreview">
+											<el-option value="">请选择</el-option>
+											<el-option value="normal" style="font-weight: normal;">正常</el-option>
+											<el-option value="bold" style="font-weight: bold;">加粗</el-option>
+											<el-option value="bolder" style="font-weight: bolder;">更粗</el-option>
+											<el-option value="lighter" style="font-weight: lighter;">更细</el-option>
+										</el-select>
+									</el-form-item>
+								</el-col>
+								<el-col :span="12">
+									<el-form-item label="文本转换:">
+										<el-select v-model="formData.textTransform" @change="updatePreview">
+											<el-option value="">请选择</el-option>
+											<el-option value="none">无</el-option>
+											<el-option value="uppercase">大写</el-option>
+											<el-option value="lowercase">小写</el-option>
+											<el-option value="capitalize">首字母大写</el-option>
+											<el-option value="full-width">全角</el-option>
+										</el-select>
+									</el-form-item>
+								</el-col>
+								<el-col :span="12">
+									<el-form-item label="文本装饰:">
+										<el-select v-model="formData.textDecoration" @change="updatePreview">
+											<el-option value="">请选择</el-option>
+											<el-option value="none">无</el-option>
+											<el-option value="underline">下划线</el-option>
+											<el-option value="overline">上划线</el-option>
+											<el-option value="line-through">删除线</el-option>
+										</el-select>
+									</el-form-item>
+								</el-col>
+								<el-col :span="12">
+									<el-form-item label="字体阴影:">
+										<el-select v-model="formData.textShadow" @change="updatePreview">
+											<el-option value="">请选择</el-option>
+											<el-option value="1px 1px 2px pink"
+												style="text-shadow: 1px 1px 2px pink;">阴影1</el-option>
+											<el-option value="#FC0 1px 0 10px"
+												style="text-shadow: #FC0 1px 0 10px;">阴影2</el-option>
+											<el-option value="1px 1px 2px red, 0 0 1em blue, 0 0 0.2em blue"
+												style="text-shadow: 1px 1px 2px red, 0 0 1em blue, 0 0 0.2em blue;">阴影3</el-option>
+											<el-option value="2px 2px #777"
+												style="text-shadow: 2px 2px #777;">阴影4</el-option>
+											<el-option value="-1px -1px #000,-2px -2px #333,1px 1px #fff,2px 2px #eee"
+												style="text-shadow: -1px -1px #000,-2px -2px #333,1px 1px #fff,2px 2px #eee;">阴影5</el-option>
+											<el-option
+												value="1px 1px #BAE6EF,2px 2px #BAE6EF,3px 3px #BAE6EF,4px 4px #BAE6EF,5px 5px #BAE6EF"
+												style="text-shadow: 1px 1px #BAE6EF,2px 2px #BAE6EF,3px 3px #BAE6EF,4px 4px #BAE6EF,5px 5px #BAE6EF;">阴影6</el-option>
+											<el-option value="5px 5px #666,7px 7px #eee"
+												style="text-shadow: 5px 5px #666,7px 7px #eee;">阴影7</el-option>
+											<el-option
+												value="0 0 5px #FFFF66,1px 1px 1px #fff,-1px -1px 1px #fff,0 0 10px #FFFF99,0 0 20px #B9EB50"
+												style="text-shadow: 0 0 5px #FFFF66,1px 1px 1px #fff,-1px -1px 1px #fff,0 0 10px #FFFF99,0 0 20px #B9EB50;">阴影8</el-option>
+
+										</el-select>
+									</el-form-item>
+								</el-col>
+								<el-col :span="12">
+									<el-form-item label="文本对齐:">
+										<el-select v-model="formData.textAlign" @change="updatePreview">
+											<el-option value="">请选择</el-option>
+											<el-option value="left">左对齐</el-option>
+											<el-option value="center">居中</el-option>
+											<el-option value="right">右对齐</el-option>
+											<el-option value="justify">两端对齐</el-option>
+										</el-select>
+									</el-form-item>
+								</el-col>
+								<el-col :span="12">
+									<el-form-item label="行高:">
+										<el-select v-model="formData.lineHeight" @change="updatePreview">
+											<el-option value="">请选择</el-option>
+											<el-option value="1.0">1.0</el-option>
+											<el-option value="1.5">1.5</el-option>
+											<el-option value="2.0">2.0</el-option>
+										</el-select>
+									</el-form-item>
+								</el-col>
+								<el-col :span="12">
+									<el-form-item label="字母间距:">
+										<el-select v-model="formData.letterSpacing" @change="updatePreview">
+											<el-option value="">请选择</el-option>
+											<el-option value="0">0</el-option>
+											<el-option value="1px">1px</el-option>
+											<el-option value="2px">2px</el-option>
+										</el-select>
+									</el-form-item>
+								</el-col>
+								<el-col :span="12">
+									<el-form-item label="单词间距:">
+										<el-select v-model="formData.wordSpacing" @change="updatePreview">
+											<el-option value="">请选择</el-option>
+											<el-option value="0">0</el-option>
+											<el-option value="1px">1px</el-option>
+											<el-option value="2px">2px</el-option>
+										</el-select>
+									</el-form-item>
+								</el-col>
+							</el-row>
+							<el-form-item><el-button type="success" native-type="submit"
+									class="w-100">提交</el-button></el-form-item>
+						</el-form>
+						<div class="preview mt-3 p-3 border rounded" :style="previewStyle">
+							Aa Bb Cc 上下 左右 12345 Aa Bb Cc 上下 左右 12345 Aa Bb Cc 上下 左右 12345
+						</div>
+					</div>
+					<div v-if="currentContent === 'ai'" class="p-3">
+						<!-- AI对话框 -->
+						<div class="chat-box border rounded p-3">
+							<p v-for="message in messages" :key="message.id" class="mb-1">{{ message.text }}</p>
+							<el-input v-model="aiInput" @keyup.enter="sendMessageToAI" placeholder="请输入消息"
+								class="w-100"></el-input>
+						</div>
+					</div>
+				</div>
+
+
+			</div>
+		</div>
+	</div>
+</template>
+<style>
+/*侧边栏样式*/
+.sidebar {
+	position: fixed;
+	top: 0;
+	left: 0;
+	width: 350px;
+	height: 100%;
+	overflow-y: hidden;
+	transition: transform 0.3s ease;
+	transform: translateX(-100%);
+	background-color: #f9f9f9;
+	padding-left: 8px;
+	/* 调整内边距，使文字右移 */
+	padding-right: 8px;
+	/* 调整内边距，使文字右移 */
+	z-index: 9;
+}
+
+.sidebar.active {
+	transform: translateX(0);
+}
+
+.sidebar-menu {
+	display: none;
+	flex-direction: column;
+	justify-content: space-between;
+}
+.sidebar-menu.active {
+	display: block;
+}
+
+.sidebar-menu .el-menu-item {
+	flex: 1;
+	text-align: left;
+}
+
+.sidebar-menu .el-menu-item span {
+	display: block;
+	padding: 10px;
+	background-color: #f5f5f5;
+	border-radius: 4px;
+	margin: 5px;
+	transition: background-color 0.3s;
+}
+
+.sidebar-menu .el-menu-item span:hover {
+	background-color: #e0e0e0;
+}
+
+.chat-box {
+	max-height: 350px;
+	overflow-y: auto;
+}
+
+.preview {
+	margin-top: 20px;
+	/* 调整预览区与表单之间的距离 */
+	border: 1px solid #ccc;
+	/* 添加边框 */
+	padding: 10px;
+	/* 添加内边距 */
+	border-radius: 4px;
+	/* 添加圆角 */
+}
+
+.form-item {
+	margin-bottom: 1px;
+	/* 减小表单项之间的距离 */
+}
+</style>
+<script>
+import {
+	DecoupledEditor,
+	// ClassicEditor,
+	AccessibilityHelp,
+	Alignment,
+	Autoformat,
+	AutoImage,
+	AutoLink,
+	Autosave,
+	BalloonToolbar,
+	Base64UploadAdapter,
+	BlockQuote,
+	Bold,
+	Code,
+	CodeBlock,
+	Essentials,
+	FindAndReplace,
+	FontBackgroundColor,
+	FontColor,
+	FontFamily,
+	FontSize,
+	GeneralHtmlSupport,
+	Heading,
+	Highlight,
+	HorizontalLine,
+	ImageBlock,
+	ImageCaption,
+	ImageInline,
+	ImageInsert,
+	ImageInsertViaUrl,
+	ImageResize,
+	ImageStyle,
+	ImageTextAlternative,
+	ImageToolbar,
+	ImageUpload,
+	Indent,
+	IndentBlock,
+	Italic,
+	Link,
+	LinkImage,
+	List,
+	ListProperties,
+	Markdown,
+	MediaEmbed,
+	Mention,
+	PageBreak,
+	Paragraph,
+	PasteFromMarkdownExperimental,
+	PasteFromOffice,
+	RemoveFormat,
+	SelectAll,
+	SpecialCharacters,
+	SpecialCharactersArrows,
+	SpecialCharactersCurrency,
+	SpecialCharactersEssentials,
+	SpecialCharactersLatin,
+	SpecialCharactersMathematical,
+	SpecialCharactersText,
+	Strikethrough,
+	Style,
+	Subscript,
+	Superscript,
+	Table,
+	TableCaption,
+	TableCellProperties,
+	TableColumnResize,
+	TableProperties,
+	TableToolbar,
+	TextTransformation,
+	TodoList,
+	Underline,
+	Undo,
+} from 'ckeditor5';
+import translations from 'ckeditor5/translations/zh-cn.js';
+import 'ckeditor5/ckeditor5.css';
+import { ElButton, ElInput, ElSelect, ElOption, ElForm, ElFormItem, ElMenu, ElMenuItem, ElColorPicker, ElSubMenu } from 'element-plus';
+// import {getUserConfigFromBackend,saveData,getPageContent,getAndApplyUserStyles} from './components/utils';
+import { getUserConfigFromBackend, saveData, getPageContent } from '../components/utils';
+import { Export2PDF, Export2Word, ToggleSideBar, Translation } from '../components/plugins';
+import { useStore } from 'vuex';
+import router from '../router/index.js';
+
+export default {
+	name: 'CkeditorView',
+	data() {
+		return {
+			isLayoutReady: false,
+			config: null, // CKEditor needs the DOM tree before calculating the configuration.
+			editor: DecoupledEditor,
+			// editor: ClassicEditor,
+			store:useStore(),
+
+			isSidebarOpen: false,// 侧边栏是否打开
+			isNavbarOpen: false,// 侧边栏是否打开
+			currentContent: '', // 当前侧边栏显示的表单
+			formData: {
+				fontFamily: '',
+				color: '',
+				fontSize: '',
+				fontStyle: '',
+				fontWeight: '',
+				textTransform: '',
+				textDecoration: '',
+				textShadow: '',
+				textAlign: '',
+				lineHeight: '',
+				letterSpacing: '',
+				wordSpacing: ''
+			},
+			previewStyle: {},
+			aiInput: '', // AI 输入的内容
+			messages: [], // 聊天记录
+		};
+	},
+	mounted() {
+		// 获取用户的样式配置
+		const userConfig = getUserConfigFromBackend();
+		// 获取用户定义的样式并应用
+		// getAndApplyUserStyles();
+		this.config = {
+			toolbar: {
+				items: [
+					'undo',
+					'redo',
+					'|',
+					'heading',
+					'style',
+					'|',
+					'fontSize',
+					'fontFamily',
+					'fontColor',
+					'fontBackgroundColor',
+					'|',
+					'bold',
+					'italic',
+					'underline',
+					'|',
+					'link',
+					'insertImage',
+					'insertTable',
+					'highlight',
+					'codeBlock',
+					'blockquote',
+					'|',
+					'alignment',
+					'bulletedList',
+					'numberedList',
+					'outdent',
+					'indent',
+					'|', 'ExportToWord', 'ExportToPDF', 'translate', 'SideBar'
+				],
+				shouldNotGroupWhenFull: true
+			},
+			plugins: [
+				AccessibilityHelp,
+				Alignment,
+				Autoformat,
+				AutoImage,
+				AutoLink,
+				Autosave,
+				BalloonToolbar,
+				Base64UploadAdapter,
+				BlockQuote,
+				Bold,
+				Code,
+				CodeBlock,
+				Essentials,
+				FindAndReplace,
+				FontBackgroundColor,
+				FontColor,
+				FontFamily,
+				FontSize,
+				GeneralHtmlSupport,
+				Heading,
+				Highlight,
+				HorizontalLine,
+				ImageBlock,
+				ImageCaption,
+				ImageInline,
+				ImageInsert,
+				ImageInsertViaUrl,
+				ImageResize,
+				ImageStyle,
+				ImageTextAlternative,
+				ImageToolbar,
+				ImageUpload,
+				Indent,
+				IndentBlock,
+				Italic,
+				Link,
+				LinkImage,
+				List,
+				ListProperties,
+				Markdown,
+				MediaEmbed,
+				Mention,
+				PageBreak,
+				Paragraph,
+				PasteFromMarkdownExperimental,
+				PasteFromOffice,
+				RemoveFormat,
+				SelectAll,
+				SpecialCharacters,
+				SpecialCharactersArrows,
+				SpecialCharactersCurrency,
+				SpecialCharactersEssentials,
+				SpecialCharactersLatin,
+				SpecialCharactersMathematical,
+				SpecialCharactersText,
+				Strikethrough,
+				Style,
+				Subscript,
+				Superscript,
+				Table,
+				TableCaption,
+				TableCellProperties,
+				TableColumnResize,
+				TableProperties,
+				TableToolbar,
+				TextTransformation,
+				TodoList,
+				Underline,
+				Undo,
+				Export2Word, Translation, Export2PDF, ToggleSideBar
+			],
+			balloonToolbar: ['bold', 'italic', '|', 'link', 'insertImage', '|', 'bulletedList', 'numberedList'],
+			//自定义设置字体
+			fontFamily: {
+				// 自定义字体
+				options: userConfig.fontFamily.options,
+				// 启用对所有字体名称的支持
+				supportAllValues: true,
+			},
+			fontSize: {
+				// 五号，小四，四号，小三，三号，小二，二号
+				options: userConfig.fontSize.options,
+				supportAllValues: true
+			},
+			heading: {
+				options: [
+					{
+						model: 'paragraph',
+						title: 'Paragraph',
+						class: 'ck-heading_paragraph'
+					},
+					{
+						model: 'heading1',
+						view: 'h1',
+						title: 'Heading 1',
+						class: 'ck-heading_heading1'
+					},
+					{
+						model: 'heading2',
+						view: 'h2',
+						title: 'Heading 2',
+						class: 'ck-heading_heading2'
+					},
+					{
+						model: 'heading3',
+						view: 'h3',
+						title: 'Heading 3',
+						class: 'ck-heading_heading3'
+					},
+					{
+						model: 'heading4',
+						view: 'h4',
+						title: 'Heading 4',
+						class: 'ck-heading_heading4'
+					},
+					{
+						model: 'heading5',
+						view: 'h5',
+						title: 'Heading 5',
+						class: 'ck-heading_heading5'
+					},
+					{
+						model: 'heading6',
+						view: 'h6',
+						title: 'Heading 6',
+						class: 'ck-heading_heading6'
+					}
+				]
+			},
+			htmlSupport: {
+				allow: [
+					{
+						name: /^.*$/,
+						styles: true,
+						attributes: true,
+						classes: true
+					}
+				]
+			},
+			image: {
+				toolbar: [
+					'toggleImageCaption',
+					'imageTextAlternative',
+					'|',
+					'imageStyle:inline',
+					'imageStyle:wrapText',
+					'imageStyle:breakText',
+					'|',
+					'resizeImage'
+				]
+			},
+			initialData:
+				'',
+			language: 'zh-cn',
+			link: {
+				addTargetToExternalLinks: true,
+				defaultProtocol: 'https://',
+				decorators: {
+					toggleDownloadable: {
+						mode: 'manual',
+						label: 'Downloadable',
+						attributes: {
+							download: 'file'
+						}
+					}
+				}
+			},
+			list: {
+				properties: {
+					styles: true,
+					startIndex: true,
+					reversed: true
+				}
+			},
+			mention: {
+				feeds: [
+					{
+						marker: '@',
+						feed: [
+							/* See: https://ckeditor.com/docs/ckeditor5/latest/features/mentions.html */
+						]
+					}
+				]
+			},
+			menuBar: {
+				isVisible: true,
+				removeItems: ['help'],
+			},
+			placeholder: 'Type or paste your content here!',
+			// 用户可以自定义和管理样式
+			style: {
+				definitions: userConfig.style.definitions
+			},
+			table: {
+				contentToolbar: ['tableColumn', 'tableRow', 'mergeTableCells', 'tableProperties', 'tableCellProperties']
+			},
+			autosave: {
+				waitingTime: 180000, // (in ms)  3minutes
+				save() {
+					// TODO save
+					return saveData(getPageContent());
+				}
+			},
+			translations: [translations]
+		};
+
+		this.isLayoutReady = true;
+	},
+	methods: {
+		onReady(editor) {
+			Array.from(this.$refs.editorToolbarElement.children).forEach(child => child.remove());
+			Array.from(this.$refs.editorMenuBarElement.children).forEach(child => child.remove());
+
+			this.$refs.editorToolbarElement.appendChild(editor.ui.view.toolbar.element);
+			this.$refs.editorMenuBarElement.appendChild(editor.ui.view.menuBarView.element);
+			// 这里向后端获取要打开文件地内容
+			const pageContent = this.store.state.user.filecontent;
+			// const pageContent = '<h2>Congratulations on setting up CKEditor 5! 🎉</h2>\n<p>\n    You\'ve successfully created a CKEditor 5 project. This powerful text editor will enhance your application, enabling rich text editing\n    capabilities that are customizable and easy to use.\n</p>\n<h3>What\'s next?</h3>\n<ol>\n    <li>\n        <strong>Integrate into your app</strong>: time to bring the editing into your application. Take the code you created and add to your\n        application.\n    </li>\n    <li>\n        <strong>Explore features:</strong> Experiment with different plugins and toolbar options to discover what works best for your needs.\n    </li>\n    <li>\n        <strong>Customize your editor:</strong> Tailor the editor\'s configuration to match your application\'s style and requirements. Or even\n        write your plugin!\n    </li>\n</ol>\n<p>\n    Keep experimenting, and don\'t hesitate to push the boundaries of what you can achieve with CKEditor 5. Your feedback is invaluable to us\n    as we strive to improve and evolve. Happy editing!\n</p>\n<h3>Helpful resources</h3>\n<ul>\n    <li>📝 <a href="https://orders.ckeditor.com/trial/premium-features">Trial sign up</a>,</li>\n    <li>📕 <a href="https://ckeditor.com/docs/ckeditor5/latest/installation/index.html">Documentation</a>,</li>\n    <li>⭐️ <a href="https://github.com/ckeditor/ckeditor5">GitHub</a> (star us if you can!),</li>\n    <li>🏠 <a href="https://ckeditor.com">CKEditor Homepage</a>,</li>\n    <li>🧑‍💻 <a href="https://ckeditor.com/ckeditor-5/demo/">CKEditor 5 Demos</a>,</li>\n</ul>\n<h3>Need help?</h3>\n<p>\n    See this text, but the editor is not starting up? Check the browser\'s console for clues and guidance. It may be related to an incorrect\n    license key if you use premium features or another feature-related requirement. If you cannot make it work, file a GitHub issue, and we\n    will help as soon as possible!\n</p>\n';
+			// 打开已有文本就将pageContent替换
+			// TODO
+			editor.setData(pageContent);
+		},
+		// sidebar
+		// 打开/关闭侧边栏
+		toggleSidebar() {
+			this.isSidebarOpen = !this.isSidebarOpen;
+			this.isNavbarOpen = this.isSidebarOpen;
+		},
+		toggleNavBar() {
+			this.isNavbarOpen = !this.isNavbarOpen;
+		},
+		// 展示表单
+		showContent(formType) {
+			this.currentContent = formType;
+			this.isNavbarOpen=false;
+		},
+		// 保存用户定义样式
+		submitForm() {
+			const selectedStyles = {};
+			for (const key in this.formData) {
+				if (this.formData[key]) {
+					selectedStyles[key] = this.formData[key];
+				}
+			}
+
+			const className = prompt("请输入类名：");
+			if (className) {
+				let cssClass = `.ck-content p.${className} {\n`;
+				for (const key in selectedStyles) {
+					const cssKey = key.replace(/([A-Z])/g, "-$1").toLowerCase();
+					cssClass += `  ${cssKey}: ${selectedStyles[key]};\n`;
+				}
+				cssClass += `}`;
+
+				console.log(cssClass); // 这里可以将cssClass发送到后端或其他处理逻辑
+				alert(cssClass);
+			} else {
+				alert("类名不能为空！");
+			}
+		},
+		// 更新预览
+		updatePreview() {
+			this.previewStyle = {};
+			for (const key in this.formData) {
+				if (this.formData[key]) {
+					this.previewStyle[key] = this.formData[key];
+				}
+			}
+		},
+		// 调用大模型API
+		sendMessageToAI() {
+			// 假设这里有一个API可以发送消息给AI并接收回复
+			this.messages.push({ text: this.aiInput });
+			this.aiInput = ''; // 清空输入框
+			// 模拟AI回复
+			setTimeout(() => {
+				this.messages.push({ text: '这是来自AI的回复' });
+			}, 1000);
+		},
+	},
+	components: {
+		// 导入组件
+		ElButton, ElInput, ElSelect, ElOption, ElForm, ElFormItem, ElMenu, ElMenuItem, ElColorPicker, ElSubMenu
+	},
+	created(){
+		if(!this.store.state.user.is_login){
+			router.push({name:'login'});
+		}
+	}
+};
+</script>
diff --git a/coeditor_frontend/src/views/HomeView.vue b/coeditor_frontend/src/views/HomeView.vue
index 8fee7cc..c5e2c37 100644
--- a/coeditor_frontend/src/views/HomeView.vue
+++ b/coeditor_frontend/src/views/HomeView.vue
@@ -1,10 +1,11 @@
 <template>
-  <ContentBase @contextmenu.prevent="rightclick($event)">
+  <PathBar @ls="ls" />
+  <ContentBase @click="leftclick" @contextmenu.prevent="rightclick($event)">
     <div v-for="item in items" :key="item.name" class="file-item">
-        <FolderFiled @filerightclick="filerightclick" @ls="ls" v-if="item.type==='folder'" :item="item" />
-        <FileFiled @filerightclick="filerightclick" v-if="item.type==='file'" :item="item" />
+        <FolderFiled @select_item='select_item' @filerightclick="filerightclick" @fileleftclick="fileleftclick" @ls="ls" v-if="item.type==='folder'" :item="item" />
+        <FileFiled  @select_item='select_item' @filerightclick="filerightclick" @fileleftclick="fileleftclick"  @open_file='open_file' v-if="item.type==='file'" :item="item" />
     </div>
-    <RightMenu v-if="menuvisible"  @open_file="open_file" @turn_back="turn_back" :item="item" :menutype="menutype" :menuposition="menuposition" />
+    <RightMenu v-if="menuvisible"  @open_file="open_file" @turn_back="turn_back" :menutype="menutype" :menuposition="menuposition" />
   </ContentBase>
 </template>
 
@@ -14,6 +15,7 @@ import ContentBase from '../components/ContentBase';
 import FileFiled from '../components/FileFiled';
 import FolderFiled from '../components/FolderFiled';
 import RightMenu from '../components/RightMenu.vue';
+import PathBar from '../components/PathBar.vue';
 import { ref } from 'vue';
 import { useStore } from 'vuex';
 import router from '@/router/index.js';
@@ -26,6 +28,7 @@ export default {
     FileFiled,
     FolderFiled,
     RightMenu,
+    PathBar,
   },
 
   setup(){
@@ -37,7 +40,7 @@ export default {
       top:"",
       left:"",
     });
-    let item = null;
+    let selected_item = null;
     
     const ls = () => {
       menuvisible.value = false;
@@ -70,16 +73,17 @@ export default {
         }
       }
       items.value = tmp;
+      selected_item = item;    
     }
 
     const open_file = () => {
       menuvisible.value = false;
       menutype.value = "filemenu";
-      if (!item){
+      if (!selected_item){
         return;
       }
-      if (item.type === 'folder'){
-        store.commit('forwardPath',item.name + '/'
+      if (selected_item.type === 'folder'){
+        store.commit('forwardPath',selected_item.name + '/'
         );
         ls();
       }
@@ -88,10 +92,12 @@ export default {
             url:' http://47.106.113.194:8000/operation/open/',
             type:'get',
             data:{
-              'path':store.state.user.path.join("") + item.name,
+              'path':store.state.user.path.join("") + selected_item.name,
             },
             success:resp => {
+              store.commit('updateFileContent',resp.content);
               console.log(resp);
+              router.push({name:'ckeditor'});
             }
         });
       }
@@ -108,6 +114,11 @@ export default {
       ls();
     }
 
+    const leftclick = () => {
+      menuvisible.value = false;
+      select_item(null);
+    }
+
     const rightclick = (event) => {
       menuvisible.value = true;
       menutype.value = "contextmenu";
@@ -115,15 +126,19 @@ export default {
         top: event.clientY + 'px',  
         left: event.clientX + 'px',
       };
+      select_item(null);
+    }
 
+    const fileleftclick = (item) => {
+      menuvisible.value = false;
+      select_item(item);
     }
 
     const filerightclick = (data) => {
       menutype.value = "filemenu";
       menuposition.value = data.menuposition;
       menuvisible.value = true;
-      item = data.item;
-      select_item(item);
+      select_item(data.item);
     }
 
     if (store.state.user.is_login){
@@ -135,9 +150,12 @@ export default {
 
     return {
       items,
-      item,
+      selected_item,
       ls,
+      select_item,
+      fileleftclick,
       filerightclick,
+      leftclick,
       rightclick,
       open_file,
       turn_back,
diff --git a/coeditor_frontend/src/views/UserProfileView.vue b/coeditor_frontend/src/views/UserProfileView.vue
index f28f42b..c7e6b4f 100644
--- a/coeditor_frontend/src/views/UserProfileView.vue
+++ b/coeditor_frontend/src/views/UserProfileView.vue
@@ -9,6 +9,7 @@
 <script>
 import ContentBase from  '../components/ContentBase';
 import { useStore } from 'vuex';
+import router from '../router/index.js';
 
 export default {
   name: 'UserProfileView',
@@ -17,6 +18,9 @@ export default {
   },
   setup(){
       let store = useStore();
+      if (!store.state.user.is_login){
+        router.push({name:'login'});
+      }
       return {
           store,
       }
diff --git a/coeditor_frontend/vue.config.js b/coeditor_frontend/vue.config.js
index 910e297..ffdb44b 100644
--- a/coeditor_frontend/vue.config.js
+++ b/coeditor_frontend/vue.config.js
@@ -1,4 +1,21 @@
 const { defineConfig } = require('@vue/cli-service')
+
+const AutoImport = require('unplugin-auto-import/webpack')
+const Components = require('unplugin-vue-components/webpack')
+const { ElementPlusResolver } = require('unplugin-vue-components/resolvers')
+
 module.exports = defineConfig({
-  transpileDependencies: true
+  transpileDependencies: true,
+  configureWebpack: {
+    plugins: [
+      AutoImport({
+        resolvers: [ElementPlusResolver()]
+      }),
+      Components({
+        resolvers: [ElementPlusResolver()]
+      }),
+    ]
+  }
+
+  
 })