mediaAll/src/view/allMedia/AIeditor/index.vue

<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">
        <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>
  </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>');

onMounted(() => {});

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 {
}

.bgEditor {
  position: relative;
}

.bgEdigtoTool {
  position: absolute;
}

.editor {
  width: 80%;
  box-shadow: 0 0 25px #eeeeee;
  height: 100vh;
  margin: 1em auto;
}

.tool{
    display: flex;
}
</style>