富文本框其实很多，但也很少，有些很难用，有些功能很少，好像比较好的都要收费，也不知道收费的好不好，带着各种疑问的情况下，试了非常多的富文本，最后打算使用这个。

Tinymce（官网地址）

他是有收费版本和免费版本，目前我是感觉免费版本足够用了，上手简单，且UI也不错

这里直接贴使用的示例代码，这个是组件内部的代码。

<template>
  <div :class="{ hide_toolbar: !showToolbar }" class="tinymce_box">
    <editor id="tinymce" v-model="editorValue" :init="init"></editor>
  </div>
</template>

<script>
import tinymce from 'tinymce/tinymce'
import 'tinymce/themes/silver/theme'
import Editor from '@tinymce/tinymce-vue'

// 想要使用插件plugins，必须要引入对应的 js 文件，不然会报错 404
import 'tinymce/plugins/image/index.js'
import 'tinymce/plugins/paste/index.js'
import 'tinymce/plugins/link/index.js'
import ossClient from '@/utils/ossUpload'

export default {
  name: 'tinymce',
  components: { Editor },
  props: {
    value: {
      type: String,
      default: ''
    },
    showToolbar: {
      type: Boolean,
      default: true
    },
    height: {
      type: Number,
      default: 500
    },
    autoFocus: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      tinymceHtml: '',
      init: {
        auto_focus: this.autoFocus,
        language_url: 'https://xxxx.oss-cn-hangzhou.aliyuncs.com/xxx/tinymce/zh_CN.js',
        language: 'zh_CN',
        skin_url: 'https://xxxxx.oss-cn-hangzhou.aliyuncs.com/xxxx/tinymce/skins/ui/oxide',
        height: this.height,
        plugins: 'image paste link',
        toolbar:
          'bold italic underline strikethrough | fontsizeselect | forecolor backcolor | alignleft aligncenter alignright alignjustify | bullist numlist | outdent indent blockquote | undo redo | image link',
        branding: false,
        paste_data_images: true,
        automatic_uploads: true,
        file_picker_types: 'image', // 只允许选择图片
        fontsize_formats: '8px 10px 12px 14px 16px 18px 24px 36px',
        // 添加这行来设置编辑器内容的默认字体大小
        content_style: 'body { font-size: 16px; }',
        setup: editor => {
          editor.on('init', () => {
            editor.execCommand('FontSize', false, '16px')
          })
          editor.on('paste drop', e => {
            const items = e.clipboardData?.items || e.dataTransfer?.items
            if (items) {
              for (const item of items) {
                if (item.kind === 'file' && !item.type.startsWith('image/')) {
                  e.preventDefault()
                  alert('只能上传图片文件')
                  return
                }
              }
            }
          })
        },
        images_upload_handler: (blobInfo, success, failure) => {
          const file = new File([blobInfo.blob()], blobInfo.filename(), {})
          ossClient
            .ossRichTextPut(file, blobInfo.filename())
            .then(res => {
              success(res.url)
            })
            .catch(error => {
              failure(error)
            })
        }
      }
    }
  },
  computed: {
    editorValue: {
      get() {
        return this.value
      },
      set(val) {
        this.$emit('input', val)
      }
    }
  },

  mounted() {
    tinymce.init({})
  }
}
</script>

<style>
.tox-tinymce-aux {
  z-index: 9999 !important;
}
</style>

<style lang="less" scoped>
.tinymce_box {
  /deep/ .tox-statusbar {
    display: none;
  }
}

.hide_toolbar {
  /deep/ .tox-editor-header {
    display: none;
  }
}
</style>

图片上传需要你们自己实现，我这边是走了一个oss的只传。

想要的插件，比如上传、超链接等都需要通过引入内部的JS才可以导入，不然会有各种奇怪的报错，页面渲染不出来这点很重要。

使用组件代码：

 <TinyMCE v-model="form[item.field]" :autoFocus="item.autoFocus" :height="item.height" :showToolbar="item.showToolbar" />