提交

src/router/allMedia.js

@@ -96,7 +96,8 @@ export default [
       {
         path: 'AIeditor',
         component: () =>
-          import(/* webpackChunkName: "AIeditor" */ '../view/allMedia/AIeditor/index.vue'),
+        //   import(/* webpackChunkName: "AIeditor" */ '../view/allMedia/AIeditor/index.vue'),
+          import(/* webpackChunkName: "ortherPage" */ '../view/ortherPage/index.vue'),
       },
     ],
   },

src/view/allMedia/AIeditor/index.vue

@@ -8,13 +8,19 @@
     />
     <el-row :gutter="20">
       <el-col :span="20">
-        <Editor
-          style="height: 500px; overflow-y: hidden"
-          v-model="valueHtml"
-          :defaultConfig="editorConfig"
-          mode="default"
-          @onCreated="handleCreated"
-        />
+        <div class="bgEditor">
+          <div class="editor">
+            <h1 contenteditable style="padding: 100px 100px 0;outline: none">无标题</h1>
+            <Editor
+              v-model="valueHtml"
+              :defaultConfig="editorConfig"
+              style="padding: 0 90px;"
+              mode="default"
+              @onCreated="handleCreated"
+            />
+          </div>
+          <div class="tool">123</div>
+        </div>
       </el-col>
       <el-col :span="4">1</el-col>
     </el-row>
@@ -31,12 +37,7 @@ const editorRef = shallowRef();
 // 内容 HTML
 const valueHtml = ref('<p>hello</p>');
 
-// 模拟 ajax 异步获取内容
-onMounted(() => {
-  setTimeout(() => {
-    valueHtml.value = '<p>模拟 Ajax 异步设置内容</p>';
-  }, 1500);
-});
+onMounted(() => {});
 
 const toolbarConfig = {
   toolbarKeys: [
@@ -71,7 +72,7 @@ const editorConfig = {
   hoverbarKeys: {
     text: {
       // 如有 match 函数，则优先根据 match 判断，而忽略 element type
-      match: (editor) => {
+      match: editor => {
         // 可参考下文的源码
         console.log(editor.getConfig());
       },
@@ -93,4 +94,23 @@ const handleCreated = editor => {
 <style scoped>
 .AIeditor {
 }
+
+.bgEditor {
+  position: relative;
+}
+
+.bgEdigtoTool {
+  position: absolute;
+}
+
+.editor {
+  width: 80%;
+  box-shadow: 0 0 25px #eeeeee;
+  height: 100vh;
+  margin: 1em auto;
+}
+
+.tool{
+    display: flex;
+}
 </style>

src/view/ortherPage/index.vue

@@ -0,0 +1,15 @@
+<template>
+    <object
+      :data="route.query.path || 'https://aidoc.sxtvs.net'" 
+      style="height:100%;height: 100%;"
+      type="text/html"
+    ></object>
+    <!-- <iframe :src="route.query.path" frameborder="0"></iframe> -->
+</template>
+
+<script setup>
+import { useRoute } from 'vue-router';
+const route = useRoute();
+</script>
+
+<style scoped></style>