hospital/admin-ui/src/components/editor.vue

<template>
  <div><vue-tinymce v-model="contentValue" :setting="setting" v-if="open" /></div>
</template>

<script>
import { uploadFile } from '@/api/common';
export default {
  props: {
    readonly: {
      type: Boolean,
      default: false
    },
    height: {
      type: Number,
      default: 450
    },
    value: {
      default: ''
    }
  },
  data() {
    return {
      open: false,
      contentValue: this.value,
      baseUrl: process.env.VUE_APP_BASE_API,
      setting: {
        menubar: false,
        ProgressState: true,
        readonly: this.readonly,
        toolbar:
          'fullscreen preview code | undo redo | lineheight bold italic underline strikethrough | alignleft aligncenter alignright alignjustify | numlist bullist | upfile image axupimgs media importword table | formatselect fontselect fontsizeselect forecolor backcolor | indent outdent | superscript subscript | removeformat | wordcount | help',
        toolbar_drawer: 'sliding',
        quickbars_selection_toolbar: 'removeformat | bold italic underline strikethrough | fontsizeselect forecolor backcolor',
        plugins: 'preview code lineheight wordcount upfile image axupimgs imagetools media table lists fullscreen quickbars help',
        language: 'zh_CN',
        content_style: 'img {max-width:100%;}', //编辑器内限制图片大小
        convert_urls: false,
        height: this.height,
        paste_data_images: true,
        //图片上传
        images_upload_handler: (blobInfo, succFun, failFun) => {
          let formData = new FormData();
          formData.append('file', blobInfo.blob());
          uploadFile(formData)
            .then((response) => {
              this.$modal.msgSuccess('上传成功');
              succFun(this.baseUrl + response.fileName);
            })
            .catch(() => {});
        },
        file_callback: (file, succFun) => {
          let formData = new FormData();
          formData.append('file', file);
          uploadFile(formData)
            .then((response) => {
              this.$modal.msgSuccess('上传成功');
              succFun(this.baseUrl + response.fileName);
            })
            .catch(() => {});
        },
        //文件上传
        file_picker_callback: (callback, value, meta) => {
          //文件分类
          let filetype;
          //为不同插件指定文件类型及后端地址
          switch (meta.filetype) {
            case 'image':
              filetype = '.jpg, .jpeg, .png, .gif';
              break;
            case 'media':
              filetype = '.mp3, .mp4';
              break;
            case 'file':
            default:
          }
          //模拟出一个input用于添加本地文件
          let input = document.createElement('input');
          input.setAttribute('type', 'file');
          input.setAttribute('accept', filetype);
          input.click();
          input.onchange = () => {
            let file = input.files[0];
            let formData = new FormData();
            formData.append('file', file, file.name);
            uploadFile(formData)
              .then((response) => {
                this.$modal.msgSuccess('上传成功');
                callback(this.baseUrl + response.fileName);
              })
              .catch(() => {});
          };
        }
      }
    };
  },
  watch: {
    value(newValue) {
      if (newValue) {
        this.contentValue = newValue;
      }
    },
    contentValue(newValue) {
      this.$emit('input', newValue);
    }
  },
  mounted() {
    setTimeout(() => {
      this.open = true;
    }, 1000);
  },
  beforeDestroy() {
    this.open = false;
  },
  methods: {}
};
</script>

<style lang="scss">
.tox.tox-tinymce.tox-fullscreen {
  width: 100% !important;
}
.tox-shadowhost.tox-fullscreen,
.tox.tox-tinymce.tox-fullscreen {
  z-index: 1200000 !important;
}
</style>