yunyubang-web/src/components/XyTinymce/index.vue

<template>
  <div class="tinymce">
    <Editor v-model="myValue" :init="init" :disabled="disabled"></Editor>
    <EditorImage
      :show="showImg"
      class="tinymce__upload"
      @successCBK="imageSuccessCBK"
      @updateshow="updateshow"
    ></EditorImage>
  </div>
</template>

<script>
import EditorImage from "@/components/XyTinymce/EditorImage.vue";
import tinymce from "tinymce/tinymce";
import Editor from "@tinymce/tinymce-vue";
import "tinymce/skins/ui/oxide/skin.css";
import "@/assets/tinymce/langs/zh_CN";
import "tinymce/themes/silver/theme";
import "tinymce/plugins/media";
import "tinymce/plugins/lists";
import "tinymce/plugins/table";
import "tinymce/plugins/hr";
import "tinymce/plugins/autolink";
import "tinymce/plugins/help";
import "tinymce/plugins/visualblocks";
import "tinymce/plugins/fullscreen";
import "tinymce/plugins/textpattern";
import "tinymce/plugins/contextmenu";
import "tinymce/plugins/wordcount";
import "tinymce/plugins/colorpicker";
import "tinymce/plugins/textcolor";
import "tinymce/icons/default"
export default {
  components: {
    Editor,
    EditorImage,
  },
  props: {
    height: {
      type: Number,
      default: 300,
    },
    value: {
      type: String,
      default: "",
    },
    disabled: {
      type: Boolean,
      default: false,
    },
    plugins: {
      type: [String, Array],
      default:
        "paste preview searchreplace autolink directionality visualblocks visualchars fullscreen image   template  codesample table charmap hr pagebreak nonbreaking anchor insertdatetime advlist lists wordcount imagetools textpattern help emoticons autosave ",
    },
    toolbar: {
      type: [String, Array],
      default: ` undo redo restoredraft | assignment | cut copy paste pastetext | forecolor backcolor bold italic underline strikethrough  anchor | alignleft aligncenter alignright alignjustify outdent indent |
                styleselect formatselect fontselect fontsizeselect | table image  charmap emoticons hr pagebreak |bullist numlist | blockquote subscript superscript removeformat |
                 insertdatetime print preview | fullscreen | bdmap indent2em lineheight formatpainter axupimgs`,
    },
    menubar: {
      type: String,
      default: "edit insert view format table CardBtn",
    },
  },
  data() {
    return {
      myValue: this.value,
      showImg:false,
      init: {
        language_url: "@/asset/tinymce/langs/zh_CN.js", // 这里需要单独处理
        language: "zh_CN",
        height: this.height,
        plugins: this.plugins,
        fontsize_formats: "8px 10px 12px 14px 16px 18px 24px 28px 36px",
        toolbar: this.toolbar,
        branding: false,
        menubar: this.menubar,
        setup: (editor) => {
          let _this = this
          //定义一个名为 assignment 的toolbar
          editor.ui.registry.addButton('assignment', {
            text: `<i class="el-icon-position" style="font-size: 16px">上传</i>`,
            // tooltip: '图片上传',
            onAction: () => {
              this.showImg = true
              // _this.showEdit = true
            },
          })
        },
        //此处为图片上传处理函数，这个直接用了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)
        // },
      },
    };
  },
  methods: {
    updateshow(val){
      this.showImg = val
    },
    imageSuccessCBK(arr) {
      arr.forEach(
        (v) => (this.myValue += `<img class="wscnph" src="${v.url}" >`)
      );
    },
  },
  computed: {},
  mounted() {
    tinymce.init({});
  },
  watch: {
    value(newValue) {
      this.myValue = newValue;
    },
    myValue(newValue) {
      this.$emit("input", newValue);
    },
  },
};
</script>

<style scoped lang="scss">
.tinymce {
  position: relative;
  &__upload {
    z-index: 2;
    position: absolute;
    right: 4px;
    top: 0px;
  }
  ::v-deep .tox.tox-tinymce.tox-fullscreen{
    z-index:0
  }
}
</style>