vue实现tinymce富文本编辑器，tinymce是个不错的编辑器

1、安装插件

npm i @tinymce/tinymce-vue -S
npm i tinymce -S

2、下载中文语言包：https://www.tiny.cloud/get-tiny/language-packages/ 

3、下载完成后，在vue项目存放静态资源的文件夹中新建一个文件夹tinymce，到node_modules中找到tinymce/skins目录，将skins文件夹拷贝到新建的tinymce文件夹中，语言包解压后也放在这里

4、创建组件页面，大家要注意的就是引用文件路径别写错了，我遇到的坑就是引用路劲的坑，还有加载出来工具没图标，一些样式文件加载不了，不过都解决了。

<template>
  <div class="smart-spechar1">
    <div class="box" ref="box">
      <div class="title noselect" @mousedown="move">
        <i class="smart-icon smart-icon-window"></i>
        <span>填表说明</span>
        <i class="close smart-icon smart-icon-close" @click="$emit('close')"></i>
      </div>

      <div style="margin-top:1%;">
        <editor v-model="myValue" :init="init"></editor>
      </div>
      <div style="margin-top:2%;margin-left: 31%;">
        <smart-button size="middle" class="smart-btn" @click="dook">确认</smart-button>
        <smart-button size="middle" class="smart-btn" @click="$emit('close')">关闭</smart-button>
      </div>
    </div>
  </div>
</template>

<script>
import "./txtedits.less";

import tinymce from "tinymce/tinymce"; //tinymce默认hidden，不引入不显示
import Editor from "@tinymce/tinymce-vue";
import "tinymce/themes/silver";
import "tinymce/icons/default/icons.min.js";
// 编辑器插件plugins
// 更多插件参考：https://www.tiny.cloud/docs/plugins/
import "tinymce/plugins/image"; // 插入上传图片插件
import "tinymce/plugins/media"; // 插入视频插件
import "tinymce/plugins/table"; // 插入表格插件
import "tinymce/plugins/lists"; // 列表插件
import "tinymce/plugins/wordcount"; // 字数统计插件
export default {
  components: {
    Editor,
  },
  name: "smart-txtedits",
  props: {
    value: {
      type: String,
      default: "",
    },
    disabled: {
      type: Boolean,
      default: false,
    },
    plugins: {
      type: [String, Array],
      default: "lists image media table wordcount",
    },
    toolbar: {
      type: [String, Array],
      default:
        "undo redo |  formatselect | bold italic forecolor backcolor | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | lists image media table | removeformat",
    },
  },
  data() {
    return {
      init: {
        language_url: "src/renderer/assets/tinymec/langs/zh_CN.js",
        language: "zh_CN",
        skin_url: "src/renderer/assets/tinymec/skins/ui/oxide",
        content_css:
          "src/renderer/assets/tinymec/skins/content/default/content.css",
        // skin_url: 'tinymce/skins/ui/oxide-dark',//暗色系
        height: 510,
        toolbar:
          "bold italic underline strikethrough | fontsizeselect | forecolor backcolor | alignleft aligncenter alignright alignjustify | bullist numlist | outdent indent blockquote | undo redo | link unlink image code table | removeformat",
        plugins: "lists image media table wordcount",
        // toolbar: this.toolbar,
        branding: false,
        menubar: false,
        // 此处为图片上传处理函数，这个直接用了base64的图片形式上传图片，
        // 如需ajax上传可参考https://www.tiny.cloud/docs/configure/file-image-upload/#images_upload_handler
        images_upload_handler: (blobInfo, success, failure) => {
          const img = "data:image/jpeg;base64," + blobInfo.base64();
          success(img);
        },
      },
      myValue: this.contents,
    };
  },
  props: {
    contents: { type: String },
  },
  created() {},
  methods: {
    dook() {
      this.$emit("updatetxtEdit", { content: this.myValue });
    },
    // 移动窗口
    move(e) {
      //算出鼠标相对元素的位置
      const x = e.clientX - this.$refs["box"].offsetLeft;
      const y = e.clientY - this.$refs["box"].offsetTop;
      document.onmousemove = (e) => {
        //用鼠标的位置减去鼠标相对元素的位置，得到元素的位置
        let [left, top] = [e.clientX - x, e.clientY - y];
        //移动当前元素
        this.$refs["box"].style.left = left + "px";
        this.$refs["box"].style.top =
          Math.max(this.$refs["box"].offsetHeight / 2, top) + "px";
      };
      document.onmouseup = (e) => {
        document.onmousemove = null;
      };
    },
  },
  mounted() {
    tinymce.init({});
  },
};
</script>

最后再父组件调用就行了，其他的基本注册组件就不说了，网上的都没我这个详细，还有坑，实战解决

。效果图，一些配置或者插件自行百度或者去官网看了。这里基本满足了。