O projeto vue apresenta o editor de rich text vue-ueditor-wrap

O primeiro passo, é claro, é introduzir dependências de terceiros

npm i vue-ueditor-wrap

Após a introdução ser bem sucedida, precisamos de um pacote UEditor
. Aqui eu carreguei este recurso para que todos baixem o
endereço de download do UEditor.
Em seguida, descompactamos o arquivo baixado e
colocamos na pasta lib sob a pasta pública do projeto e diretório,
e então em main.js introduza

import VueUeditorWrap from 'vue-ueditor-wrap'
Vue.component('vue-ueditor-wrap', VueUeditorWrap)

Em seguida, introduza-o no componente raiz do App.vue

import Vue from 'vue'
import VueUeditorWrap from 'vue-ueditor-wrap'
Vue.component('VueUeditorWrap', VueUeditorWrap)

Então você pode usá-lo diretamente no arquivo vue que precisa usar este componente. O
código de referência é o seguinte

<template>
    <div>
        <vue-ueditor-wrap v-model="formInline.content" :config="myConfig">
    </div>

</template>

<script>
export default {
     
     
    name:"addUser",
    data(){
     
     
        return {
     
     
            myConfig: {
     
     
                UEDITOR_HOME_URL: `${
       
       process.env.BASE_URL}lib/UEditor/`,
                // 编辑器不自动被内容撑高
                autoHeightEnabled: false,
                // 初始容器高度
                initialFrameHeight: 200,
                // 初始容器宽度
                initialFrameWidth: '100%',
                // 关闭自动保存
                enableAutoSave: false,
                imagePopup: true,
                imageScaleEnabled: true,
                // toolbarTopOffset:400,
                autoFloatEnabled: false,
                serverUrl: ''
            },
            formInline:{
     
     
                content: ''
            }
        }
    }
    methods:{
     
     
        
    }
}
</script>

<style scoped>
</style>

Então nosso editor de rich text aparecerá naturalmente