富文本（TinyMCE ---vue3-tinymce）

先贴代码

<template>
<vue3-tinymce v-model="content" :setting="stateClassic.setting" />
</template>

<script setup lang="ts">
import { ref, reactive, watch } from 'vue';
import Vue3Tinymce from '@/components/Vue3Tinymce';
  const props = defineProps({
    modelValue: String,
  })

const content = ref(props.modelValue)
const emit = defineEmits(['update:modelValue'])

const stateClassic = reactive({
  content: content,
  disabled: false,
  setting: {
    menubar: true,
    toolbar:
      'undo redo | fullscreen | formatselect alignleft aligncenter alignright alignjustify | link unlink | numlist bullist | image media table | fontsizeselect forecolor backcolor | bold italic underline strikethrough | indent outdent | superscript subscript | removeformat |',
    toolbar_drawer: 'sliding',
    quickbars_selection_toolbar:
      'removeformat | bold italic underline strikethrough | fontsizeselect forecolor backcolor',
    plugins: 'link image media table lists fullscreen quickbars',
    fontsize_formats: '12px 14px 16px 18px',
    default_link_target: '_blank',
    link_title: false,
    nonbreaking_force_tab: true,
    // 设置中文语言
    language: 'zh_CN',
    language_url: 'https://unpkg.com/@jsdawn/vue3-tinymce@1.1.6/dist/tinymce/langs/zh_CN.js',
    content_style: 'body{font-size: 14px}',
    // 自定义 图片上传模式
    // custom_images_upload: true,
    // images_upload_url: 'your_upload_api_url...',
    // custom_images_upload_callback: (res) => res.url,
    // custom_images_upload_header: { 'X-Token': 'xxxx' },
    // custom_images_upload_param: { id: 'xxxx01', age: 18 },
  },
});

// 提取文字
function getText(value:string | undefined) {
  let myDiv:any = document.createElement("div");
  myDiv.innerHTML = value
  let text = myDiv.innerText
  myDiv = null
  return text
}

watch(content, (newValue) => {
  let text = getText(newValue)
  emit('update:modelValue', text)
})
</script>

vue3-tinymce 是封装了一层TinyMCE http://jsdawn.gitee.io/vue3-tinymce/