富文本组件

wangEditor

官网地址：https://www.wangeditor.com/

VUE3实现

依赖

"@wangeditor/editor": "^5.1.23",
"@wangeditor/editor-for-vue": "^5.1.12",

封装的组件，src/components/wangeditor/index.vue

<template>
    <div style="border: 1px solid #ccc">
        <Toolbar
                style="border-bottom: 1px solid #ccc"
                :editor="editorRef"
                :defaultConfig="toolbarConfig"
                :mode="mode"
        />
        <Editor
                style="height: 500px; overflow-y: hidden;"
                v-model="valueHtml"
                :defaultConfig="editorConfig"
                :mode="mode"
                @onCreated="handleCreated"
        />
    </div>
</template>

<script>
    import '@wangeditor/editor/dist/css/style.css' // 引入 css
    import { onBeforeUnmount, ref, shallowRef, onMounted,defineProps,watch } from 'vue'
    import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
    import { imageUpload } from '@/api/upload'
    export default {
        components: { Editor, Toolbar },
        props: {
            text: {
                default: '',
                type: String,
            },
        },
        setup(props) {
            // 编辑器实例，必须用 shallowRef
            const editorRef = shallowRef()

            // 内容 HTML
            const valueHtml = ref(props.text)

            // 模拟 ajax 异步获取内容
            onMounted(() => {

            })

            watch(() => props.text, newValue => {
                console.log(`Value changed to: ${newValue}`);
                // 在这里执行你需要的操作
                valueHtml.value = newValue
            }, {
                immediate: true // 可选：如果希望在初始渲染时也触发一次观察器
            });

            const toolbarConfig = {}
            const editorConfig = {
              placeholder: '请输入内容...' ,
              MENU_CONF: {}
            }
            //文件上传
            editorConfig.MENU_CONF['uploadImage'] = {
              // 小于该值就插入 base64 格式（而不上传），默认为 0
              base64LimitSize: 5 * 1024, // 5kb
              // 单个文件的最大体积限制，默认为 2M
              // maxFileSize: 1 * 1024 * 1024, // 1M
              // // 最多可上传几个文件，默认为 100
              // maxNumberOfFiles: 5,
              // 选择文件时的类型限制，默认为 ['image/*'] 。如不想限制，则设置为 []
              allowedFileTypes: ['image/*'],
              // 自定义上传
              async customUpload(file, insertFn) { // 文件上传
                const formData = new FormData();
                formData.set('file', file)
                // 这里根据自己项目封装情况，设置上传地址
                let result = await imageUpload(formData)
                // 插入到富文本编辑器中，主意这里的三个参数都是必填的，要不然控制台报错：typeError: Cannot read properties of undefined (reading 'replace')
                insertFn(result.data.url, result.data.filename, result.data.filename)
              }
            }

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

            const handleCreated = (editor) => {
                editorRef.value = editor // 记录 editor 实例，重要！
            }

            return {
                editorRef,
                valueHtml,
                mode: 'default', // 或 'simple'
                toolbarConfig,
                editorConfig,
                handleCreated
            };
        }
    }
</script>
<style scoped>

</style>

调用

<template>
      <Wangeditor :text="text" ref="wangeditorRef" />
</template>

<script setup>
import { defineComponent, ref ,provide,defineProps,onBeforeMount, onMounted  } from 'vue'
import Wangeditor from '@/components/wangeditor/index.vue'

  const wangeditorRef = ref();
  
  //初始化富文本内容
  const text = ref('');
  
  // 获取富文本的内容
  wangeditorRef.value.valueHtml

</script>