tinymce富文本编辑器插入图片上传到服务器

最新推荐文章于 2024-07-13 17:53:51 发布

夏天咯

最新推荐文章于 2024-07-13 17:53:51 发布

阅读量228

点赞数 2

文章标签：服务器运维

本文链接：https://blog.csdn.net/qq_37628661/article/details/138943424

版权

首先是富文本编辑器组件：

<!-- tinymce富文本编辑器组件 -->
<template>
  <editor v-model="content" :init="config" :disabled="disabled"/>
</template>

<script>
import tinymce from 'tinymce/tinymce'
import Editor from '@tinymce/tinymce-vue'
import 'tinymce/icons/default'
import 'tinymce/themes/silver'
import 'tinymce/plugins/code'
import 'tinymce/plugins/print'
import 'tinymce/plugins/preview'
import 'tinymce/plugins/fullscreen'
import 'tinymce/plugins/paste'
import 'tinymce/plugins/searchreplace'
import 'tinymce/plugins/save'
import 'tinymce/plugins/autosave'
import 'tinymce/plugins/link'
import 'tinymce/plugins/autolink'
import 'tinymce/plugins/image'
import 'tinymce/plugins/imagetools'
import 'tinymce/plugins/media'
import 'tinymce/plugins/table'
import 'tinymce/plugins/codesample'
import 'tinymce/plugins/lists'
import 'tinymce/plugins/advlist'
import 'tinymce/plugins/hr'
import 'tinymce/plugins/charmap'
import 'tinymce/plugins/emoticons'
import 'tinymce/plugins/anchor'
import 'tinymce/plugins/directionality'
import 'tinymce/plugins/pagebreak'
import 'tinymce/plugins/quickbars'
import 'tinymce/plugins/nonbreaking'
import 'tinymce/plugins/visualblocks'
import 'tinymce/plugins/visualchars'
import 'tinymce/plugins/wordcount'
import 'tinymce/plugins/emoticons/js/emojis'

export default {
  name: "TinymceEditor",
  components: {Editor},
  model: {
    prop: 'value',
    event: 'change'
  },
  props: {
    value: String,
    init: Object,
    disabled: Boolean,
  },
  data() {
    return {
      content: '',
      config: Object.assign({
        height: 300,
        branding: false,
        skin_url: '/tinymce/skins/ui/oxide',
        content_css: '/tinymce/skins/content/default/content.css',
        language_url: '/tinymce/langs/zh_CN.js',
        language: 'zh_CN',
        plugins: 'code print preview fullscreen paste searchreplace save autosave link autolink image imagetools media table codesample lists advlist hr charmap emoticons anchor directionality pagebreak quickbars nonbreaking visualblocks visualchars wordcount',
        toolbar: 'fullscreen preview code | undo redo | forecolor backcolor | bold italic underline strikethrough | alignleft aligncenter alignright alignjustify | outdent indent | numlist bullist | formatselect fontselect fontsizeselect | link image media emoticons charmap anchor pagebreak codesample | ltr rtl',
        toolbar_drawer: 'sliding',
        images_upload_handler: (blobInfo, success) => {
          success('data:image/jpeg;base64,' + blobInfo.base64());
        },
        file_picker_types: 'media',
        file_picker_callback: () => {
        }
      }, this.init)
    }
  },
  mounted() {
    tinymce.init({});
    console.log(this.config)
  },
  watch: {
    content() {
      this.$emit('change', this.content);
    },
    value() {
      this.content = this.value;
    }
  }
}
</script>

<style>
body .tox-tinymce-aux {
  z-index: 19892000;
}
</style>

使用：

<template>
    <tinymce-editor
       v-model="content"
       :init="editContent"
    />
</template>
import TinymceEditor from '@/components/TinymceEditor'
components: { TinymceEditor },
data(){
    return {
      content:'',
       
      images_upload_handler: (blobInfo, succFun, failFun) => {
        var formData;
        formData = new FormData();
        var file = blobInfo.blob(); //转化为易于理解的file对象
        formData.append("files", file);
        console.log(file,this)
        this.$http.post(你的上传地址, formData).then(res => {
          if (res.data.code === 0) {
            succFun(res.data.data[0].fullFilePath)
          } else {
            failFun(res.data.msg || '获取数据失败');
          }
        })
      }
    }
},
computed: {
    editContent () {
      return {
        menubar: false,
        images_upload_handler: this.images_upload_handler, 
      };
    }
  },