JingTieXueTang.Web/src/components/tinymce/TinymceEditor.vue

<template>
  <div class="tinymce-editor">
    <Editor
      :id="tinymceId"
      :init="init"
      :disabled="disabled"
      v-model="myValue"
      @onClick="onClick"
    ></Editor>
  </div>
</template>

<script>
// import axios from "axios";
import tinymce from "tinymce/tinymce"; //tinymce默认hidden，不引入不显示
import Editor from "@tinymce/tinymce-vue"; //编辑器引入
import "tinymce/themes/silver/theme"; //编辑器主题
// 引入编辑器插件（基本免费插件都在这儿了）
import "tinymce/plugins/advlist"; //高级列表
import "tinymce/plugins/autolink"; //自动链接
import "tinymce/plugins/link"; //超链接
import "tinymce/plugins/image"; //插入编辑图片
import "tinymce/plugins/lists"; //列表插件
import "tinymce/plugins/charmap"; //特殊字符
import "tinymce/plugins/media"; //插入编辑媒体
import "tinymce/plugins/wordcount"; // 字数统计
// import Cookies from "js-cookie";

// const OSS = require("ali-oss");

const fonts = [
  "宋体=宋体",
  "微软雅黑=微软雅黑",
  "新宋体=新宋体",
  "黑体=黑体",
  "楷体=楷体",
  "隶书=隶书",
  "Courier New=courier new,courier",
  "AkrutiKndPadmini=Akpdmi-n",
  "Andale Mono=andale mono,times",
  "Arial=arial,helvetica,sans-serif",
  "Arial Black=arial black,avant garde",
  "Book Antiqua=book antiqua,palatino",
  "Comic Sans MS=comic sans ms,sans-serif",
  "Courier New=courier new,courier",
  "Georgia=georgia,palatino",
  "Helvetica=helvetica",
  "Impact=impact,chicago",
  "Symbol=symbol",
  "Tahoma=tahoma,arial,helvetica,sans-serif",
  "Terminal=terminal,monaco",
  "Times New Roman=times new roman,times",
  "Trebuchet MS=trebuchet ms,geneva",
  "Verdana=verdana,geneva",
  "Webdings=webdings",
  "Wingdings=wingdings,zapf dingbats"
];
export default {
  name: "TinymceEditor",
  components: {
    Editor
  },
  props: {
    //内容
    value: {
      type: String,
      default: ""
    },
    //是否禁用
    disabled: {
      type: Boolean,
      default: false
    },
    //插件
    plugins: {
      type: [String, Array],
      default: "advlist image lists  wordcount " // media link autolink  charmap
    },
    //工具栏
    toolbar: {
      type: [String, Array],
      default:
        "undo redo |  formatselect | colorpicker | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | image" //  | lists image media table link
    }
  },
  data() {
    return {
      //初始化配置
      tinymceId: "tinymce",
      myValue: this.value,
      init: {
        selector: "#tinymce",
        language_url: "/tinymce/langs/zh_CN.js", //汉化路径是自定义的，一般放在public或static里面
        language: "zh_CN",
        skin_url: "/tinymce/skins/ui/oxide", //皮肤
        icons_url: "/tinymce/icons/default/icons.min.js", //图标
        plugins: this.plugins, //插件
        //工具栏
        toolbar: this.toolbar,
        toolbar_location: "/",
        fontsize_formats:
          "12px 14px 16px 18px 20px 22px 24px 28px 32px 36px 48px 56px 72px", //字体大小
        font_formats: fonts.join(";"),
        content_style: "img {max-width:100%;}", // 图片最大的宽度,避免超出屏幕
        image_description: false,
        image_dimensions: false,
        height: 500, //高度
        placeholder: "在这里输入文字",
        branding: false, //隐藏右下角技术支持
        link_context_toolbar: true,
        media_dimensions: false,
        media_alt_source: false,
        //图片上传
        images_upload_handler: function(blobInfo, success, failure) {
          //文件上传的formData传递，忘记为什么要用这个了
          const isAccord =
            blobInfo.blob().type === "image/jpeg" ||
            blobInfo.blob().type === "image/png" ||
            blobInfo.blob().type === "image/GIF" ||
            blobInfo.blob().type === "image/jpg" ||
            blobInfo.blob().type === "image/BMP";
          if (blobInfo.blob().size / 1024 / 1024 > 2) {
            failure("上传失败，图片大小请控制在 2M 以内");
          } else if (blobInfo.blob().type == isAccord) {
            failure("图片格式错误");
          } else {
            let formData = new FormData();
            // 服务端接收文件的参数名，文件数据，文件名
            formData.append("image-file", blobInfo.blob(), blobInfo.filename());
            window.$_http.post("/image/upload", formData).then(res => {
              console.log("--upload--" + JSON.stringify(res));
              success(res.data.url);
            });
          }
        },
        // file_picker_callback: function(callback, value, meta) {
        //   //文件分类
        //   var filetype =
        //     ".pdf, .txt, .zip, .rar, .7z, .doc, .docx, .xls, .xlsx, .ppt, .pptx, .mp3, .mp4";
        //   //后端接收上传文件的地址
        //   //为不同插件指定文件类型及后端地址
        //   let bucket = "jtxt-file-public";
        //   let ossPath = "file/";
        //   switch (meta.filetype) {
        //     case "image":
        //       filetype = ".jpg, .jpeg, .png, .gif";
        //       ossPath = "image/";
        //       break;
        //     case "media":
        //       bucket = "jtxt-video-public";
        //       filetype = ".mp3, .mp4";
        //       ossPath = "media/";
        //       break;
        //     case "file":
        //       bucket = "jtxt-file-public";
        //       filetype =
        //         ".pdf, .txt, .zip, .rar, .7z, .doc, .docx, .xls, .xlsx, .ppt, .pptx";
        //       ossPath = "file/";
        //       break;
        //     default:
        //   }
        //   //模拟出一个input用于添加本地文件
        //   var input = document.createElement("input");
        //   input.setAttribute("type", "file");
        //   input.setAttribute("accept", filetype);
        //   input.onchange = function(res) {
        //     console.log("change----" + JSON.stringify(res));
        //     let file = res.target.files[0];
        //     window.$_http.get("/assume-oss-writer").then(res => {
        //       console.log("--oss-writer--" + JSON.stringify(res));
        //       const client = new OSS({
        //         // yourRegion填写Bucket所在地域。以华东1（杭州）为例，Region填写为oss-cn-hangzhou。
        //         region: "oss-cn-beijing",
        //         // 从STS服务获取的临时访问密钥（AccessKey ID和AccessKey Secret）。
        //         accessKeyId: res.data.accessKeyId,
        //         accessKeySecret: res.data.accessKeySecret,
        //         // 从STS服务获取的安全令牌（SecurityToken）。
        //         stsToken: res.data.securityToken,
        //         // 填写Bucket名称。
        //         bucket: bucket
        //       });
        //       // 上传oss

        //       try {
        //         client.put(ossPath + file.name, file).then(res => {
        //           console.log(res);
        //           callback(res.url);
        //         });
        //       } catch (e) {
        //         console.error(e);
        //       }
        //       // 回调
        //     });
        //   };
        //   input.click();
        // },

        menu: {
          file: { title: "File", items: "newdocument" },

          edit: {
            title: "Edit",
            items: "undo redo | cut copy pastetext | selectall"
          },

          insert: { title: "Insert", items: "link image media | template hr" },

          view: { title: "View", items: "visualaid" },

          format: {
            title: "Format",
            items:
              "bold italic underline strikethrough superscript subscript | removeformat"
          },

          table: {
            title: "Table",
            items: "inserttable tableprops deletetable | cell row column"
          },

          tools: { title: "Tools", items: "spellchecker code" }
        }
      }
    };
  },
  watch: {
    //监听内容变化
    value(newValue) {
      this.myValue = newValue == null ? "" : newValue;
    },
    myValue(newValue) {
      if (this.triggerChange) {
        this.$emit("change", newValue);
      } else {
        this.$emit("input", newValue);
      }
    }
  },
  mounted() {
    tinymce.init({});
  },
  methods: {
    onClick(e) {
      this.$emit("onClick", e, tinymce);
    },
    //清空内容
    clear() {
      this.myValue = "";
    }
  }
};
</script>

<style lang="less" scoped>
@import "~@/styles/common/variable.less";
</style>