提交

package.json

@@ -9,8 +9,9 @@
   },
   "dependencies": {
     "@element-plus/icons-vue": "^2.0.10",
-    "@wangeditor/editor": "^5.1.22",
+    "@wangeditor/editor": "^5.1.23",
     "@wangeditor/editor-for-vue": "^5.1.12",
+    "axios": "^1.4.0",
     "core-js": "^3.6.5",
     "dayjs": "^1.11.7",
     "element-plus": "^2.2.18",

src/main.js

@@ -1,5 +1,6 @@
 import { createApp } from "vue";
 import ElementPlus from "element-plus";
+// import axios from 'axios'
 import "element-plus/dist/index.css";
 import "./assets/iconFont/iconfont.css";
 import "./assets/iconFont/menu_iconfont.css";

src/router/allMedia.js

@@ -93,6 +93,11 @@ export default [
         component: () =>
           import(/* webpackChunkName: "qhmain" */ '../view/qh/index.vue'),
       },
+      {
+        path: 'AIeditor',
+        component: () =>
+          import(/* webpackChunkName: "AIeditor" */ '../view/allMedia/AIeditor/index.vue'),
+      },
     ],
   },
 ];

src/view/allMedia/AIeditor/index.vue

@@ -0,0 +1,96 @@
+<template>
+  <div class="AIeditor">
+    <Toolbar
+      style="border-bottom: 1px solid #ccc"
+      :editor="editorRef"
+      :defaultConfig="toolbarConfig"
+      mode="default"
+    />
+    <el-row :gutter="20">
+      <el-col :span="20">
+        <Editor
+          style="height: 500px; overflow-y: hidden"
+          v-model="valueHtml"
+          :defaultConfig="editorConfig"
+          mode="default"
+          @onCreated="handleCreated"
+        />
+      </el-col>
+      <el-col :span="4">1</el-col>
+    </el-row>
+  </div>
+</template>
+
+<script setup>
+import '@wangeditor/editor/dist/css/style.css'; // 引入 css
+import { onBeforeUnmount, ref, shallowRef, onMounted } from 'vue';
+import { Editor, Toolbar } from '@wangeditor/editor-for-vue';
+// 编辑器实例，必须用 shallowRef
+const editorRef = shallowRef();
+
+// 内容 HTML
+const valueHtml = ref('<p>hello</p>');
+
+// 模拟 ajax 异步获取内容
+onMounted(() => {
+  setTimeout(() => {
+    valueHtml.value = '<p>模拟 Ajax 异步设置内容</p>';
+  }, 1500);
+});
+
+const toolbarConfig = {
+  toolbarKeys: [
+    'redo',
+    'undo',
+    'bold',
+    'underline',
+    'italic',
+    'through',
+    '|',
+    'clearStyle',
+    'color',
+    'bgColor',
+    'fontSize',
+    'fontFamily',
+    '|',
+    'indent',
+    'delIndent',
+    'justifyLeft',
+    'justifyRight',
+    'justifyCenter',
+    'justifyJustify',
+    '|',
+    'divider',
+    'headerSelect',
+    'bulletedList',
+    'numberedList',
+  ],
+};
+const editorConfig = {
+  placeholder: '请输入内容...',
+  hoverbarKeys: {
+    text: {
+      // 如有 match 函数，则优先根据 match 判断，而忽略 element type
+      match: (editor) => {
+        // 可参考下文的源码
+        console.log(editor.getConfig());
+      },
+      menuKeys: [], // 定义你想要的 menu keys
+    },
+  },
+};
+
+// 组件销毁时，也及时销毁编辑器
+onBeforeUnmount(() => {
+  if (editorRef.value != null) editorRef.value.destroy();
+});
+
+const handleCreated = editor => {
+  editorRef.value = editor; // 记录 editor 实例，重要！
+};
+</script>
+
+<style scoped>
+.AIeditor {
+}
+</style>

src/view/allMedia/main.vue

@@ -75,6 +75,11 @@ const menu = [
     icon: 'icon-ai-chat',
     path: '/main_home/qh',
   },
+  {
+    title: 'AI写作',
+    icon: 'icon-ai-chat',
+    path: '/main_home/AIeditor',
+  },
 ];
 
 for (let i = 0; i < menu.length; i++) {

src/view/qh/textShow.vue

@@ -17,4 +17,4 @@ defineProps({
 //   else EleText.value += li[index] || '';
 // }, 50);
 </script>
-<style lang="scss"></style>
+<style></style>