在vite项目中跑通后，精简化后移到了codesandbox，依赖为vue3、tinymce[6.3.2]、tinymce-i18n[23.1.23]、@tinymce/tinymce-vue[5.0.0]。

注意

在线演示

说明

初次接触此编辑器，按照官网文档的方法引入，报css等异常。查找网络资料，得到用法还需要@tinymce/tinymce-vue，
各种调试之后，得到正常跑通可开发的版本如下。

本示例不需要迁移样式文件、核心js到public中，只通过import的方式引入。

如需调整代码，一定先参考官网的文档。
官网文档：https://www.tiny.cloud/docs/tinymce/6/

之前想引入parse插件，发现源码没有这个插件，而网络文章中使用的版本差异过大，在官网中可以看到tinymce6已经默认集成此插件，不需要引入。

本示例已经编写了一个简单的图片自动上传处理函数，主要是演示上传完成之后传出的结果，只需要传出图片地址。

使用

需要安装如下依赖

"@tinymce/tinymce-vue": "5.0.0",
"tinymce": "6.3.2",
"tinymce-i18n": "23.1.23",

封装为组件使用

<custom-tinymce v-model="description"></custom-tinymce>

源码

<template>
  <div style="width: 100%">
    <editor v-model="editorValue" :init="initOptions"></editor>
  </div>
</template>

<script setup>
import { defineEmits, defineProps, onMounted, ref, toRefs, watch } from "vue";
import "tinymce/tinymce";
import Editor from "@tinymce/tinymce-vue";
import "tinymce/models/dom";

// 外觀
import "tinymce/skins/ui/oxide/skin.css";
import "tinymce/themes/silver";

// Icon
import "tinymce/icons/default";
// 語言包
import "tinymce-i18n/langs6/zh-Hans.js";

// 引入插件
// 源代码
import "tinymce/plugins/code";

const emit = defineEmits(["update:modelValue"]);

const initOptions = ref({
  language: "zh-Hans",
  height: 500,
  skin: false,
  menubar: false,
  content_css: false,
  plugins: props.plugins,
  toolbar: props.toolbar,
  toolbar_mode: "sliding",
  ...getPasteOption(),
  ...getImageOption(),
});

const props = defineProps({
  modelValue: {
    type: String,
    default: "",
  },
  plugins: {
    type: [String, Array],
    default: "code",
  },
  toolbar: {
    type: [String, Array],
    default:
      "undo redo | styles | bold italic cut copy paste forecolor removeformat code",
  },
});

const { modelValue } = toRefs(props);
const editorValue = ref(modelValue.value);

watch(modelValue, (newValue) => {
  editorValue.value = newValue;
});

watch(editorValue, (newValue) => {
  emit("update:modelValue", newValue);
});

onMounted(() => {
  console.log("初始化tinymce");
});

/*
 * 图片上传 配置项
 * */
function getImageOption() {
  return {
    // images_upload_url: 'http://192.168.3.103:9890/common/upload',
    images_upload_handler: (blobInfo, progress) =>
      new Promise(async (resolve, reject) => {
        // console.log(blobInfo.blobUri())
        const formData = new FormData();
        formData.append("file", blobInfo.blob(), blobInfo.filename());
        // console.log(formData)
        // 模拟调用图片上传接口之后的结果，返回的数据如下格式
        // 格式非固定，根据业务调整
        const res = {
          code: 200,
          url: "https://dummyimage.com/600x400",
        };
        // console.log(res)
        if (res.code === 200) {
          // 给出的是url地址
          resolve(res.url);
        } else {
          reject("上传图片失败", res);
        }
      }),
  };
}

/*
 *  复制粘贴插件 配置项
 * https://www.tiny.cloud/docs/tinymce/6/copy-and-paste/
 * */
function getPasteOption() {
  return {
    paste_preprocess: (editor, args) => {
      console.log(args.content);
    },
    // paste_remove_styles_if_webkit: false,
    /*
     * 此选项允许您指定在 WebKit 中粘贴时要保留的样式。WebKit 有一个怪癖，
     * 它将获取元素的所有计算 CSS 属性并将它们添加到编辑器中的 span 中。由于大多数用户不希望在整个文档中添加随机跨度，
     * 因此我们需要手动清理它，直到修复错误。此选项默认为'none'但可以设置为'all'或要保留的特定样式列表。
     * */
    paste_webkit_styles: "color",
  };
}
</script>

<style scoped>
</style>