1.首先npm，看tinymce的版本，刚开始用的tinymce-vue版本比较高，出现一些问题，也不知道是版本问题还是下载的时候包损坏有问题，后来降成这个版本，就ok了。

2.然后建立一个 被封装的独立组件（相当于子组件），可以后续被各个父组件调用，我们命名为mytinymce.vue

 

3.先看在应用页面，调用mytinymce的结果

 

4.具体来看父子组件代码

4.1子组件代码（含图片上传，服务器采用php）

<template>
  <div class="tinymce">
    <!-- <h1>tinymce</h1> -->
    <editor id="tinymce" :init="init" v-model="tinymceHtml"></editor>
  </div>
</template>
 
<script>
import tinymce from "tinymce/tinymce";
import "tinymce/themes/silver/theme";
import Editor from "@tinymce/tinymce-vue";

import "tinymce/icons/default"; //引入编辑器图标icon，不引入则不显示对应图标
import "tinymce/plugins/image";
import "tinymce/plugins/link";
import "tinymce/plugins/code";
import "tinymce/plugins/table";
import "tinymce/plugins/lists";
import "tinymce/plugins/contextmenu";
import "tinymce/plugins/wordcount";
import "tinymce/plugins/colorpicker";
import "tinymce/plugins/textcolor";
export default {
  name: "tinymce",
  props: {
    //tinyvalue首先在父组件中定义，用于向本子组件mytinymce发送数据
    //然后在这里声明，用于本子组件接收父组件数据
    tinyvalue: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      // 子组件的数据变量，默认未父组件传递过来的数据
      tinymceHtml: this.tinyvalue,
      // tinymce默认配置参数，含插件，请注意插件路径，如果错误容易保unexpect token ','之类错误
      init: {
        relative_urls: true,
        language_url: "../../tinymce/zh_CN.js",
        language: "zh_CN",
        skin_url: "../../tinymce/skins/ui/oxide-dark",
        height: 300,
        plugins:
          "link lists image code table colorpicker textcolor wordcount contextmenu",
        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,
        // 增加下面的images_upload_handler对象，能够支持上传图片到服务器
        images_upload_handler: (blobInfo, success, failure) => {
          if (blobInfo.blob().size / 1024 / 1024 > 5) {
            failure("上传失败，图片大小请控制在 5M 以内");
          } else {
            let params = new FormData();
            params.append("file", blobInfo.blob());
            let config = {
              headers: {
                "Content-Type": "multipart/form-data",
              },
            };
            //aixo的声明在全局main.js中，这里不粘贴了
            this.$http
              .post(`http://localhost/hx/upload.php`, params, config)
              .then((res) => {
                console.log(res.data.up);
                // success(res.data.up);
                if (res.data.up != "") {
                  success("http://localhost/hx/" + res.data.up); //上传成功，在成功函数里填入图片路径
                } else {
                  failure("上传失败");
                }
              })
              .catch(() => {
                failure("上传出错，服务器开小差了呢");
              });
          }
        },
      },
    };
  },
  mounted() {
    //初始化加载配置项
    tinymce.init({});
  },
  methods: {},
  //声明最原始的tinymce组件
  components: { Editor },
  watch: {
    //监听内容变化，用于辅助父子组件之间的通讯
    tinyvalue(newValue) {
      //tinyvalue是父组件代理人，父组件值一旦变化，推送给子组件
      this.tinymceHtml = newValue;
    },
    tinymceHtml(newValue) {
      //tinymceHtml是子组件的值，如果改变，直接反馈给父组件
      //   tinymceinput是父组件中的用于接收子组件的事件（名称写死，用于后面调用）
      this.$emit("tinymceinput", newValue);
    },
  },
};
</script>

 

4.2父组件代码

<template>
  <div>
    <el-card class="box-card">
      <div class="title">tinymce的测试案例</div>
      <mytinymce
        :tinyvalue="fathertinyvalue"
        @tinymceinput="gettinymceinput"
      ></mytinymce>
      <br />
      <br />
      <button @click="gettinyvalue">子组件tinymce输入改变影响父组件</button>
      &nbsp;&nbsp;&nbsp;&nbsp;
      <button @click="puttinytext">父组件获得的值放入tinymce</button>
    </el-card>
  </div>
</template>

<script>
import mytinymce from "@/components/mytinymce.vue";
export default {
  data() {
    return {
      fathertinyvalue: "这是父组件的数据",
    };
  },

  components: {
    //声明经过封装后的tinymce组件，集成了图片上传、皮肤、各种插件等
    mytinymce,
  },

  computed: {},

  methods: {
    //=====================================================
    //父组件的button获得子组件tinymce的内容
    //=====================================================
    gettinyvalue() {
      console.log(this.fathertinyvalue, "看实时变动的父组件获取的数据");
    },

    //=====================================================
    //子组件tinymce输入框内容发生变动--引起父组件获得值发生变动
    //=====================================================
    gettinymceinput(val) {
      this.fathertinyvalue = val;
      // console.log(this.fathertinyvalue, "看实时变动的父组件获取的数据");
    },

    //=====================================================
    //父组件给子组件tinymce赋值（初始化），例如从数据库获取值，放入tiny，用于修改
    //=====================================================
    puttinytext() {
      this.fathertinyvalue = "从数据库获取的 值放入子组件：tinymce";
    },
  },
};
</script>
<style lang='css' scoped>
.title {
  margin-bottom: 40px;
  text-align: center;
  font-size: 20px;
}
</style>

 

4.3php服务器接收4.1子组件上传图片的代码

<?php
require_once 'init.php';
$upfile = $_FILES['file'];

 function upload_file($files, $path = "upload", $imagesExt = ['jpg', 'png', 'jpeg','pdf', 'gif', 'mp4'])
 {
   // 判断错误号
     if (@$files['error'] == 00) {
        // 判断文件类型
        $ext = strtolower(pathinfo(@$files['name'], PATHINFO_EXTENSION));
        if (!in_array($ext, $imagesExt)) {
           return "非法文件类型";
       }

         // 判断是否存在上传到的目录
        if (!is_dir($path)) {
            mkdir($path, 0777, true);
        }

       // 生成唯一的文件名
        $fileName = md5(uniqid(microtime(true), true)) . '.' . $ext;

        // 将文件名拼接到指定的目录下
         $destName = $path . "/" . $fileName;

        // 进行文件移动
        if (!move_uploaded_file($files['tmp_name'], $destName)) {
          return  $destName;
        }
         return  $destName;
    } else {
        // 根据错误号返回提示信息
        switch (@$files['error']) {
          case 1:
                 echo "上传的文件超过了 php.ini 中 upload_max_filesize 选项限制的值";
                 break;
             case 2:
                 echo "上传文件的大小超过了 HTML 表单中 MAX_FILE_SIZE 选项指定的值";
                 break;
             case 3:
                 echo "文件只有部分被上传";
                 break;
            case 4:
                 echo "没有文件被上传";
                 break;
             case 6:
             case 7:
                 echo "系统错误";
                 break;
         }    }
 
 }
 
  $arr['up']=upload_file($upfile);
  echo json_encode($arr);
 

图片效果：

1.

 

2.