Vue3中使用tinymce_vue3使用tinymce

1、下载

npm i tinymce
npm i @tinymce/tinymce-vue
npm install @jsdawn/vue3-tinymce

2、在public新建tinymce文件

tinymce文件里面放skins和语言包langs
1.在node_modules文件夹中找到tinymce下的skins复制到项目public文件夹中
2.langs是语言包，在tinymce官网中下载中文包（如下图），点击按钮下载全部语言包，解压放至tinymce文件夹

在tinymce官网中下载中文包，Language Packages | Trusted Rich Text Editor | TinyMCE

3、在项目components文件夹下封装组件TinymceEditor，把下面的代码放进去

<template>
  <div class="tinymce-box">
    <vue3-tinymce v-model="state.content" :setting="state.setting" />
  </div>
</template>
 
<script setup>
import { defineProps, reactive, watch, defineEmits } from 'vue'
// 引入组件
import Vue3Tinymce from '@jsdawn/vue3-tinymce'
const props = defineProps({
  modelValue: {
    type: String,
  },
})
const emits = defineEmits(['update:modelValue', 'contentChange'])
const state = reactive({
  content: props.modelValue,
  setting: {
    height: 400,
    selector: '#textarea1',
    toolbar:
      'undo redo | fullscreen | blocks alignleft aligncenter alignright alignjustify | link unlink | numlist bullist | image media table | fontsize forecolor backcolor | bold italic underline strikethrough | indent outdent | superscript subscript | removeformat |',
    toolbar_mode: 'sliding',
    quickbars_selection_toolbar:
      'removeformat | bold italic underline strikethrough | fontsize forecolor backcolor',
    plugins:
      'link image media table lists fullscreen quickbars wordcount,anchor',
    font_size_formats: '12px 14px 16px 18px',
    link_default_target: '_blank',
    link_title: false,
    nonbreaking_force_tab: true,
    // 以中文简体为例
    language_url: '/tinymce/langs/zh_CN.js', //引入语言包文件
    language: 'zh_CN', //语言类型
 
    // 自定义 图片上传模式
    custom_images_upload: true,
 
    // 复用 图片上传 api 地址
    images_upload_url:
      '此处填上传图片地址',
 
    // 上传成功回调函数，return 图片地址。默认 response.location
    custom_images_upload_callback: res => {
      // console.log(res,1111)
      return res.data
    },
 
    // 上传 api 请求头
    custom_images_upload_header: {
      token: `${window.localStorage.getItem('VEA-TOKEN')}`,
    },
 
    // 上传 api 额外的参数。图片默认 file
    // custom_images_upload_param: { },
  },
})
watch(
  () => state.content,
  () => {
    emits('update:modelValue', state.content)
    emits('contentChange', state.content)
  },
  {
    immediate: true,
    deep: true,
  }
)
 
watch(
  () => props.modelValue,
  () => {
    state.content = props.modelValue
  },
  {
    immediate: true,
    deep: true,
  }
)
</script>
<style scoped lang="scss">
.tinymce-box {
  :deep(.tox-promotion) {
    display: none;
  }
  :deep(.tox-statusbar__branding) {
    display: none;
  }
}
</style>

4、使用

<!-- 富文本编辑器页面 -->
<template>
  <div>
    <fu-content></fu-content>
  </div>
</template>
<script setup>
// 引入富文本组件
import fuContent from '@/components/TinymceEditor/index.vue'
</script>

注：使用elementplus组件库中的el-dialog组件和tinymce富文本时，el-dialog层级高会盖住了富文本不显示，可以改tinymce的css样式或者改用ant组件库