富文本回显问题

封装组件富文本，

<script lang="ts" setup>

import { onMounted, reactive, toRefs, ref, defineProps, watch } from 'vue'

import E from 'wangeditor'

const props: any = defineProps({

  option: {

    type: Object,

    default: {}

  },

  value: {

    type: String,

    default: ''

  }

})

interface DataProps {

  editor: any;

  editorContent: string

  getContent: (ref?: any) => void

}

const data: DataProps = reactive({

  editorContent: '',

  editor: {},

  getContent: () => {

    // console.log("111",props)

    data.editor.txt.html(props.value)

  }

})

const editorElemMenu = ref();

const editorElemBody = ref();

onMounted(() => {

  const elemMenu = editorElemMenu.value;

  const elemBody = editorElemBody.value;

  data.editor = new E(elemMenu, elemBody)

  // 使用 onchange 函数监听内容的变化，并实时更新到 state 中

  data.editor.config.onchange = (html: any) => {

    // data.getContent()

    // console.log(data.editor.txt.html())

    data.editorContent = data.editor.txt.html()

  }

  data.editor.config.customUploadImg = function (files: any, insert: any) {

    // files 是 input 中选中的文件列表insert 是获取图片 url 后，插入到编辑器的方法

    // let file;

    // if (files && files.length) {

    //     file = files[0];

    // } else {

    //     return

    // }

    // 图片上传

    console.log("files1", files)

    const formData = new FormData();

    formData.append('file', files[0]);

    console.log("files", files, insert)

    // formData.append('Banners',{id:editorinfo.id,naviChildId:editorinfo.naviChildId})

  }

  data.editor.config.menus = [

    'head',  // 标题

    'bold',  // 粗体

    'fontSize',  // 字号

    'fontName',  // 字体

    'italic',  // 斜体

    'underline',  // 下划线

    'strikeThrough',  // 删除线

    'foreColor',  // 文字颜色

    'backColor',  // 背景颜色

    'link',  // 插入链接

    'list',  // 列表

    'justify',  // 对齐方式

    'quote',  // 引用

    'emoticon',  // 表情

    'image',  // 插入图片

    'table',  // 表格

    'video',  // 插入视频

    'code',  // 插入代码

    'undo',  // 撤销

    'redo'  // 重复

  ]

  data.editor.config.uploadImgShowBase64 = true

  data.editor.create()

  // data.getContent()

})

//对父组件传的值进行一个监听，调用给编辑器赋值的方法

watch(props, (newtext, oldtext) => {

  if (newtext) {

    data.getContent()

  }

}, { deep: true })

const refData = toRefs(data);

</script>

//父组件调用

<template>

        <div class="textWriteRight">

            <write ref="Editor" :value="data.content"  />

        </div>

</template>

<script lang='ts' setup>

import Write from './write.vue'

import { useText } from '@/api/user'

import { reactive, ref, toRefs, watch } from 'vue'

import { useIndexStore } from '@/store'

interface DataProps {

    onEditor: any;

    content: string;

    showBack: (ref?: any) => void

}

const store: any = useIndexStore()

const users: any = reactive({

    userList: [],

    text: ''

})

const userList = async () => {

    const result = await useText({ username: 'ww' })

    console.log(result)

    users.userList = result

    console.log(store.index)

    users.text = users.userList[store.index].text

    // console.log(users.userList[users.index].text)

}

userList()

const Editor = ref();

const data: DataProps = reactive({

    content: '1',

    //获取富文本中的内容

    onEditor: (value: string) => {

        // console.log("父组件", value)

    },

    // 富文本回显

    showBack: () => {

        users.text = users.userList[store.index].text

        data.content = users.text

        console.log(store.index, users.userList)

        // console.log(" data.content", data.content)

        // var ue=Editor.value.getContent()

        // ue.ready(function(){

        // })

        setTimeout(() => {

            // Editor.value.getContent()

            // console.log(Editor.value.getContent())

        },2000)

    }

})

const indexTo = (index: number) => {

    store.setIndex(index)

}

//对仓库的index持久化存储做个监听防止刷新回到初始第一个，对路由在做个监听离开本页面时index归零。

监听数据，如果有数据给value赋值

watch([store, users], (newtext, oldtext) => {

    if (newtext) {

        console.log(users.text)

        data.showBack()

    }

}, { deep: true })

const refData = toRefs(data);

</script>