在vue3中使用富文本编译器解决方案

vue3  项目中需要使用富文本编译器  支持图片上传等   我这里选择WangEditor  

示例如下

 

父组件

           <template>    
                    <editer @updateContent="updateContent1" ></editer>
          </template>

<script setup>
import editer from '@/views/test/component/editer1.vue'  //引入封装富文本组件

const data = reactive({
    subject: {
          t1: `题目一`
       
     });
const {
     subject
} = toRefs(data);

function updateContent1(e){
       subject.value.t1=e;
};

 

子组件   富文本组件 

主要是红色字部分在这里触发子组件向父组件传递数据

<template>
    <div ref='editor'>
            <div :innerHTML='Content'></div>
    </div>
    <!-- <button @click='syncHTML'>同步内容</button> -->
    
</template>

<script>
import { onMounted, onBeforeUnmount, ref, reactive } from 'vue';
import WangEditor from 'wangeditor';
    import {
        getToken
    } from '@/utils/auth'  
export default {
    name: 'app',
    setup(props,{emit}) {
        const syncHTML = () => {
           // console.log("获取的值",instance.txt.html()) 
        };
      
        const editor = ref();

        let instance;
        onMounted(() => {
            instance = new WangEditor(editor.value);
            Object.assign(instance.config, {
                onchange() {
                       emit("update",instance.txt.html())
                },
            });
            instance.config.showLinkImg = false
            instance.config.showLinkImgAlt = false
            instance.config.showLinkImgHref = false
            instance.config.uploadImgMaxSize = 5 * 1024 * 1024 // 2M
            instance.config.uploadImgMaxLength = 1
            instance.config.uploadFileName = 'avatarfile'
            instance.config.uploadImgHeaders = {
                Authorization: getToken() // 上传接口所需token
            }
            // 图片返回格式不同，这里需要根据后端提供的接口进行调整
            instance.config.uploadImgHooks = {
                // 图片上传并返回了结果，想要自己把图片插入到编辑器中
                // 例如服务器端返回的不是 { errno: 0, data: [...] } 这种格式，可使用 customInsert
                customInsert: function(insertImgFn, result) {
                    console.log('result', result)
                    // result 即服务端返回的接口
                    // insertImgFn 可把图片插入到编辑器，传入图片 src ，执行函数即可
                    if (result && result.code === 200) {
                        console.log(result.imgUrl)
                        // 单图时 insertImgFn函数接收的是返回图片的全地址，eg:http://img.xxx.com/image/20211025/96759ce5aab246e6860f72a364e4142a.jpg
                        insertImgFn(
                            import.meta.env.VITE_APP_BASE_API + result.imgUrl)
                        // 多图时，循环调用insertImgFn
                        // result.result.forEach(item => insertImgFn(import.meta.env.VITE_APP_BASE_API+item.url))
                    }
                }
            }
            // 你自己上传图片的接口地址
            instance.config.uploadImgServer = import.meta.env.VITE_APP_BASE_API + '/system/user/profile/avatar'
            instance.create();
        });
        onBeforeUnmount(() => {
            console.log("销毁了")
            instance.destroy();
            instance = null;
        });
        return {
            syncHTML,
            editor,
        };
    },
};
</script>

 参考  https://blog.csdn.net/weixin_45803990/article/details/118695828