vue3 tinymce6 typescript 踩坑记录

项目升级为vue3 ，相应的tinymce也要升级

1.下载对应版本的包

yarn add tinymce
yarn add @tinymce/tinymce-vue

安装完后，package.json版本如下

2. 下载语言包，并放置静态资源

1. 可以去官网下载 https://www.tiny.cloud/get-tiny/language-packages/

2. 在public文件夹下新建文件夹 tinymce，将刚才下载的语言包解压放置在tinymce文件夹下

3. 将node_modules中tinymce包下的skins文件夹复制出来，也放到public下的tinymce文件夹中

最后tinymce文件夹应如下图所示

3. 创建组件Teditor.vue

因项目需要，将显示和富文本编辑放入一个组件。
完整代码如下：

<template>
  <div>
    <div v-show="!readonly">
      <editor v-model="textContent" :init="init" :id="tinymceId"></editor>
    </div>
    <div v-show="readonly">
      <div v-html="textContent"></div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import tinymce from 'tinymce/tinymce'; // tinymce默认hidden，不引入不显示
import Editor from '@tinymce/tinymce-vue';
import 'tinymce/themes/silver/theme'; // 主题文件
import 'tinymce/icons/default';
import 'tinymce/models/dom';
import 'tinymce/plugins/code'; // 查看源码
import 'tinymce/plugins/link';
import 'tinymce/plugins/table'; // 插入表格插件
import 'tinymce/plugins/lists'; // 列表插件
import 'tinymce/plugins/image'; // 插入上传图片插件
import 'tinymce/plugins/wordcount'; // 字数统计插件
import { reactive, ref } from 'vue';
import {
  onMounted,
  defineEmits,
  defineExpose,
  watch,
  defineProps,
} from '@vue/runtime-core';
import { useStore } from 'vuex';
import { key } from '@/store';
const emits = defineEmits(['getContent']);
const props = defineProps({
  content: {
    type: String,
    default: () => {
      return '';
    },
  },
  readonly: {
    type: Boolean,
    default: true,
  },
});
// 接收外部传递的富文本内容
const textContent = ref(props.content);
const tinymceId = ref(
  'vue-tinymce-' + +new Date() + ((Math.random() * 1000).toFixed(0) + ''),
);
const store = useStore(key);
// 初始化
const init = reactive({
  height: 400,
  width: 1150,
  language_url: '/tinymce/langs/zh-Hans.js', // 语言包的路径，具体路径看自己的项目，文档后面附上中文js文件
  language: 'zh-Hans', //语言
  skin_url: '/tinymce/skins/ui/oxide', // skin路径，具体路径看自己的项目
  plugins: 'link lists image code table  wordcount',
  toolbar:
    'bold italic underline strikethrough | fontsizeselect | forecolor backcolor | alignleft aligncenter alignright alignjustify | bullist numlist | outdent indent blockquote | undo redo | link unlink image code | removeformat',
  branding: false, // 去掉编辑器右下角的广告
  menubar: false,
  paste_webkit_styles: 'all',
  paste_merge_formats: true,
  paste_data_images: false, // 不允许粘贴图片
  // 图片上传
  images_upload_handler: (blobInfo: any, progress) =>
    new Promise((resolve, reject) => {
      const file = blobInfo.blob(); // 转化为file格式
      store
        .dispatch('uploadImg', { file })
        .then((result: { url: any }) => {
          resolve(result.url);
        })
        .catch(() => {
          reject('上传失败');
        });
    }),
});
//监听外部传递进来的的数据变化
watch(
  () => props.content,
  () => {
    textContent.value = props.content;
    emits('getContent', textContent.value);
  },
);
//监听富文本中的数据变化
watch(
  () => textContent.value,
  () => {
    emits('getContent', textContent.value);
  },
);
const getContents = () => {
  if (textContent.value) return textContent.value;
  return '';
};
//在onMounted中初始化编辑器
onMounted(() => {
  tinymce.init({});
});
defineExpose({
  getContents,
});
</script>

<style scoped></style>

需要注意的是：

坑1：因为我是将tinymce5换成了tinymce6，在初始化时就要注意，一些插件已经呗新版本删除，所以在plugins中的插件，需要检查，一定要将没有的删除，否则会报错 Uncaught SyntaxError: Unexpected token <，不过这个会按照错误插件个数报，还能给你指导个方向=￣ω￣=

坑2： 在此版本下，每个使用的插件，都要提前import，并不是像原来，额外的插件才需要import。

坑3： 在此版本下，必须要引入tinymce/models/dom。如果不引入，也会报错Uncaught SyntaxError: Unexpected token <。

坑4：此版本上传图片的处理方法images_upload_handler，参数变化了，必须要使用promise

images_upload_handler: (blobInfo: any, progress) =>
    new Promise((resolve, reject) => {
      const file = blobInfo.blob(); // 转化为file格式
      store
        .dispatch('uploadImg', { file })
        .then((result: { url: any }) => {
          resolve(result.url);
        })
        .catch(() => {
          reject('上传失败');
        });
    }),

至此，组件完成。

4. 使用组件

<template>
<TinyEditor class="quill-editor" ref="editor" :content="questionContent" :readonly="readOnly"></TinyEditor>
</template>
<script lang="ts" setup>
import TinyEditor from '@/components/TEditor.vue';
const save = () => {
	// 获取富文本的字符串
	let string = editor.value.getContents()
}
</script>

到此，组件升级就完成啦！