tinymce本地化部署方案

<script setup lang="ts">
import { ref, defineProps, computed } from 'vue'
import Editor from '@tinymce/tinymce-vue'
import type { RawEditorOptions } from 'tinymce'
import { getUploadParams, fileUpload } from '@/components/KzUpload/src/api'

defineOptions({
  name: 'BaseEditor'
})

interface ImageConfig {
  maxSize: number
  allowType: string[]
}

const props = defineProps<{
  /** 配置 */
  config: RawEditorOptions
  /** 值 */
  modelValue: string
  /** 图片限制 */
  imageConfig?: ImageConfig
}>()

const editorRef = ref()

// 图片上传自定义逻辑
/** 文档：https://www.tiny.cloud/docs/tinymce/latest/upload-images/ */
type UploadFn = RawEditorOptions['images_upload_handler']
const imageUploadHandler: UploadFn = async function (blobInfo, _) {
  return new Promise(async (resolve, reject) => {
    const { maxSize = 10 * 1024 * 1024, allowType = ['image/png', 'image/jpg', 'image/jpeg'] } =
      props.imageConfig || {}
    if (blobInfo.blob().size > maxSize) {
      const msg = `图片太大了. 最大支持 ${maxSize / 1024 / 1024}MB`
      console.error(msg, blobInfo.blob().size)
      reject({ message: msg, remove: true })
      return
    }
    if (!allowType.includes(blobInfo.blob().type)) {
      const msg = `图片只支持${allowType.map((item) => item.replace('image/', '').split('、'))}格式`
      reject({
        message: msg,
        remove: true
      })
      console.error(msg, blobInfo.blob().type)
      return
    }
    // 自己上传图片的逻辑开始
    let baseUrl = import.meta.env.VITE_BASE_URL
    const { data } = await getUploadParams({
      baseUrl,
      appCode: 'App',
      originalFilename: blobInfo.filename()
    })
    const res = await fileUpload(blobInfo.blob(), data, [], () => {})
    // 自己上传图片的逻辑结束
    resolve(res.data.downloadLocation)
    return res.data.downloadLocation
  })
}

// 双向绑定v-model
const modelContent = defineModel({ default: '' })

const defaultConfig = ref<RawEditorOptions>({
  // 如果不设置license_key为gpl，console会一直提示一个模式问题
  license_key: 'gpl',
  // 编辑器的高度
  height: 300,
  // 移除tinymce右上角升级提示
  promotion: false,
  skin: 'QZD',
  // 移除tinymce右下角品牌提示
  branding: false,
  // 设置语言包路径
  language_url: `/libs/tinymce/langs/zh_CN.js`,
  // 设置语言
  language: 'zh_CN',
  menubar: false,
  // 配置插件列表
  plugins:
    'preview importcss searchreplace autolink save directionality code visualblocks visualchars fullscreen image link table charmap pagebreak nonbreaking anchor insertdatetime advlist lists wordcount help charmap quickbars emoticons accordion',
  // 配置工具栏
  toolbar: [
    'undo redo | blocks fontfamily fontsize | bold italic underline strikethrough | lineheight align numlist bullist | link image | table | forecolor backcolor removeformat | charmap emoticons | code fullscreen preview'
  ],
  setup: (editor) => {
    editor.on('PreInit', function () {
      editor.editorUpload.addFilter(function (image) {
        const maxSize = 10 * 1024
        const imageSize = image.width * image.height
        return imageSize < maxSize
      })
    })
  },
  // 内容默认样式
  content_style: '',
  // 配置图片上传功能
  images_upload_handler: imageUploadHandler
})

// 初始化配置
const initConfig = computed(() => {
  return {
    ...defaultConfig.value,
    ...props.config,
    setup: (editor: any) => {
      props.config?.setup?.(editor)
      defaultConfig.value?.setup?.(editor)
    }
  }
})

defineExpose({
  editorRef
})
</script>

<template>
  <Editor
    ref="editorRef"
    :init="initConfig"
    :tinymceScriptSrc="/libs/tinymce/tinymce.min.js"
    v-model="modelContent"
  />
</template>

<style>
.tox-tinymce {
  border: none !important;
}

.tox-shadowhost.tox-fullscreen,
.tox.tox-tinymce.tox-fullscreen {
  z-index: 2004 !important;
}
</style>

<!-- TinyMceEditor.vue 文件中 编辑器页面也要导入用于页面展示 -->
<style lang="scss">
@import url('your-cdn-domain/file-resource/dev/front-cdn/fonts/style/tinymce.css?v1');
</style>

<a href="https://www.baidu.com?id=1&search=2&tag=3">https://www.baidu.com?id=1&search=2</a>

<a href="https://www.baidu.com?id=1&search=2">https://www.baidu.com?id=1&search=2</a>

<a href="https://www.baidu.com?id=1&search=2&tag=3">百度搜索</a>