El proyecto vue presenta el editor de texto enriquecido vue-ueditor-wrap

El primer paso, por supuesto, es introducir dependencias de terceros

npm i vue-ueditor-wrap

Después de que la introducción sea exitosa, necesitamos un paquete UEditor
. Aquí cargué este recurso para que todos puedan descargar la dirección de
descarga de UEditor.
Luego descomprimimos el archivo descargado y
lo colocamos en la carpeta lib debajo de la carpeta pública del proyecto y el directorio,
y luego en main.js introducir

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

Luego introdúzcalo en el componente raíz de App.vue

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

Luego puede usarlo directamente en el archivo vue que necesita usar este componente.El
código de referencia es el siguiente

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

Entonces nuestro editor de texto enriquecido aparecerá naturalmente