cc-officialweb-admin/src/view/EditorWithBinding.vue

<template>
  <div style="border: 1px solid #ccc; width: 100%; margin: 10px auto">
    <Toolbar style="border-bottom: 1px solid #ccc" :editor="editorRef" :defaultConfig="toolbarConfig" mode="default"/>
    <Editor style="height: 500px; overflow-y: hidden" v-model="valueHtml" :defaultConfig="editorConfig" mode="default"
            @onCreated="handleCreated" @customPaste="customPaste" @input="handleChange"/>
  </div>
<!--  <el-button style="margin: 0 auto" @click="getEditorHTML">获取富文本HTML内容</el-button>-->
</template>
<script setup>
// 富文本编辑器文档链接: https://www.wangeditor.com/v5/getting-started.html
// 引入富文本编辑器CSS
import '@wangeditor/editor/dist/css/style.css';
import {onBeforeUnmount, ref, shallowRef, watch,defineEmits} from 'vue';
// 导入富文本编辑器的组件
import {Editor, Toolbar} from '@wangeditor/editor-for-vue';
import resource from "../api/resource.js";

// 编辑器实例，必须用 shallowRef
const editorRef = shallowRef();

// 内容 HTML
// const valueHtml = ref('');
const toolbarConfig = {};
const editorConfig = ref({placeholder: '请输入内容...', MENU_CONF: {}});
// 新增 props
const props = defineProps({
  modelValue: {
    type: String,
    default: '',
  },
});

// 新增 data
const valueHtml = ref(props.modelValue);
const emit=defineEmits(['input'])
// 新增事件处理方法
watch(
    () => props.modelValue,
    (newVal) => {
      valueHtml.value = newVal; // 确保内部数据与外部modelValue同步
    },
    {immediate: true} // 立即执行，确保初始化时也能同步
);
const handleChange = (content) => {
  console.log('content', content);
  emit('input', editorRef.value.getHtml());
};
// 自定义图片上传
editorConfig.value.MENU_CONF['uploadImage'] = {
  async customUpload(file, insertFn) {
    let dataForm = new FormData();
    dataForm.append('types', "serve")
    dataForm.append('file', file)
    const fileRes = await resource.uploadResource(dataForm)
    // 这里的file为上传的图片对象,insertFn传入
    insertFn(fileRes.data.Data, 'img');
  },
};

// 自定义视频上传
editorConfig.value.MENU_CONF['uploadVideo'] = {
  async customUpload(file, insertFn) {
    // console.log('上传视频', file);
  },
};

// 富文本编辑器生成后触发
const handleCreated = editor => {
  editorRef.value = editor; // 记录 editor 实例，重要！
  // console.log(editorConfig.value.MENU_CONF, 'editorConfig.value');
};

// 监听富文本编辑器粘贴行为
const customPaste = (editor, event, callback) => {
  // 获取粘贴的纯文本
  const text = event.clipboardData.getData('text/plain');
  if (text) {
    editor.insertText(text);
    event.preventDefault();
    callback(false);
  }
};

// 获取富文本html内容
const getEditorHTML = () => {
  console.log(editorRef.value.getHtml());
};

// 组件销毁时，也及时销毁编辑器
onBeforeUnmount(() => {
  const editor = editorRef.value;
  if (editor == null) return;
  editor.destroy();
});
</script>