Vue中引入tinymce富文本

Vue中引入tinymce富文本

1、npm install tinymce -S 安装插件
2、编辑器配置

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

<script>
import tinymce from "tinymce/tinymce";
const Editor =()=>import( "@tinymce/tinymce-vue");
import "tinymce/themes/silver/theme";
import "tinymce/plugins/image";
import "tinymce/plugins/media";
import "tinymce/plugins/table";
import "tinymce/plugins/lists";
import "tinymce/plugins/contextmenu";
import "tinymce/plugins/wordcount";
import "tinymce/plugins/colorpicker";
import "tinymce/plugins/textcolor";
// import "tinymce/icons/default/icons"
import GlobalNames from "@/js/GlobalNames.js";
import AjaxUtil from "@/js/AjaxUtil.js";
import GSURL from "@/js/GSURL.js";
import PubUtil from "@/js/PubUtil.js";
import $ from "jquery";

export default {
  components: { Editor },
  props: {
    value: {
      type: String,
      default: ""
    },
    disabled: {
      type: Boolean,
      default: false
    },
    plugins: {
      type: [String, Array],
      default: "lists image media table textcolor wordcount contextmenu"
    },
    toolbar: {
      type: [String, Array],
      default:
        "undo redo |  formatselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | lists image media table | removeformat"
    },
    xzxksxbh: {
      type: String,
      default: ""
    },
    fjlb: {
      type: String,
      default: ""
    }
  },
  data() {
    return {
      fileType: {
        img: "bmp,dib,gif,jfif,jpe,jpeg,jpg,png,tif,tiff,ico",
        media: "mp4,avi,mov,rmvb,rm,FLV,3GP"
      },
      init: {
        that: this,
        language_url: process.env.BASE_URL + "tinymce/langs/zh_CN.js",
        language: "zh_CN",
        skin_url: process.env.BASE_URL +'tinymce/skins/ui/oxide',
        content_css: process.env.BASE_URL + 'tinymce/skins/content/default',
        // language_url: process.env.BASE_URL + 'tinymce/langs/zh_CN.js',
        height: 70 + "vh",
        plugins: this.plugins, // 加载的插件
        toolbar: this.toolbar,
        branding: false, // 是否禁用“Powered by TinyMCE”
        menubar: true,
        media_live_embeds: true,
        file_picker_types: "media", // 文件选择器的使用场景 file,image和media
        media_url_resolver: function(data, resolve) {
          try {
            let videoUri = encodeURI(data.url);
            let embedHtml = `<p>
                  <span
                    class="mce-object mce-object-video"
                    data-mce-selected="0"
                    data-mce-object="video"
                    data-mce-p-width= "auto"
                    data-mce-p-height= "auto"
                    data-mce-p-controls="controls"
                    data-mce-p-controlslist="nodownload"
                    data-mce-p-allowfullscreen="true"
                    data-mce-preview-object="true"
                    data-mce-p-src=${videoUri} >
                    <video data-mce-selected="0" width="100%" height="auto" controls="controls" controlslist="nodownload">
                      <source src=${data.url} type="video/mp4">
                    </video>
                  </span>
                </p>
                <p style="text-align: left;"></p>`;
            resolve({ html: embedHtml });
          } catch (e) {
            resolve({ html: "" });
          }
        },
        file_picker_callback: (cb, value, meta) => {
          this.uploadMedia(cb, value, meta, this);
        },
        images_upload_handler: (blobInfo, success, failure) => {
          // 图片上传
          this.uploadImg(blobInfo, success, failure, this);
        }
        // auto_focus: true,  // 自动获取焦点
      },
      myValue: this.value,
      imageUploadUrl: "",
      uploadFileList: [],
      imgLocation: "",
      fileLocation: ""
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {
    value(newValue) {
      this.myValue = newValue;
    },
    myValue(newValue) {
      this.$emit("input", newValue);
    }
  },
  methods: {
    uploadMedia(cb, value, meta, that) {
      //当点击meidia图标上传时,判断meta.filetype == 'media'有必要，因为file_picker_callback是media(媒体)、image(图片)、file(文件)的共同入口
      if (meta.filetype == "media") {
        //创建一个隐藏的type=file的文件选择input
        let input = document.createElement("input");
        input.id = "my-file";
        input.setAttribute("type", "file");
        var my_files = document.getElementById("my-file");
        input.click();
        input.onchange = function() {
          // let file = input.files[0];//只选取第一个文件。如果要选取全部，后面注意做修改
          that.uploadFileList[0] = input.files[0];
          that.upload(cb, value, meta, that, "media");
        };
      }
    },
    upload(cb, value, meta, that, type) {
      that.$Loading.start();
      var url = new GSURL("/Sys/addFileForFJ");
      this.imageUploadUrl = url.getFileUploadURLString();
      var twlsh = PubUtil.getNewSeq("tw");
      var urlString = url.getFileUploadURLString();
      let fileFormData = new FormData();
      if (type == "media") {
        fileFormData.append("uploadfile", this.uploadFileList[0]);
        fileFormData.append("filename", encodeURI(this.uploadFileList[0].name));
      } else {
        fileFormData.append("uploadfile", cb.blob());
        fileFormData.append("filename", encodeURI(cb.filename()));
      }
      fileFormData.append("dxbh", this.xzxksxbh);
      fileFormData.append("fjlb", this.fjlb);
      fileFormData.append("onlyone", "0");

      fileFormData.append("type", this.fileType[type]);
      let requestConfig = {
        headers: {
          "Content-Type": "multipart/form-data"
        }
      };
      $.ajax({
        xhrFields: {
          //这句话是为了session共享
          withCredentials: true
        },
        url: urlString,
        method: "POST",
        data: fileFormData,
        contentType: false,
        processData: false,
        cache: false,
        success: function(data) {
          if (!AjaxUtil.checkException(data)) {
            AjaxUtil.showException(data);
            that.uploadFileList = [];
            that.$Loading.finish();
            if (type == "img") {
              meta();
            }
            return;
          }
          var jsonData = PubUtil.j2o(data);
          that.fileLocation =
            GlobalNames.GSurl +
            "/wjgl.do?method=viewAttachPage&zlid=" +
            jsonData.zlid;
          if (type == "media") {
            cb(that.fileLocation, { title: that.uploadFileList[0].name });
          } else {
            value(that.fileLocation);
          }
          this.uploadFileList = [];
        },
        error: function(e) {
          if (type == "img") {
            meta();
          }
          that.$Modal.warning({
            title: "提示",
            content: "上传文件失败，请稍后再试",
            okText: "确定"
          });
          that.uploadFileList = [];
        }
      })
        .done(function() {
          that.$Loading.finish();
          this.uploadFileList = [];
        })
        .fail(function() {
          that.uploadFileList = [];
        })
        .always(function() {});
    },
    uploadImg(blobInfo, success, failure, that) {
      this.upload(blobInfo, success, failure, that, "img");
    },

    onClick(e) {
      this.$emit("onClick", e, tinymce);
    },
    clear() {
      this.myValue = "";
    }
  },

  mounted() {
    tinymce.init({});
    console.log('----------------');
    console.log(process.env);
  }
};
</script>
<style>
>>>.tox,
>>>.tox-silver-sink,
>>>.tox-tinymce-aux {
  z-index: 9999 !important;
}
.tox-tinymce-aux {
  z-index: 9999 !important;
}
</style>

3、使用编辑器
html

 <tinymce-editor 
        v-if="msg"
        :disabled="disabled"
        :value="editorValue"
        @input="handleInput"
        :xzxksxbh="xzxksxbh"
        :fjlb="'sxjj'"
        ref="editor"></tinymce-editor>

js

handleInput(value){
      this.editorValue = value;
    },

// 5.0版本遇到过遇到plugin图标显示不出的问题，当时是升级到了5.2.2自己好了，后来看到别人说，升级到5.3.X,然后 import “tinymce/icons/default/icons” ，手动引入图标