Tinymce Vue3+Springboot+Mysql 富文本组件封装支持文件上传，图片上传！

Cragent

于 2024-09-02 04:23:44 发布

阅读量230

点赞数 8

文章标签： vue.js javascript 前端 springboot java

本文链接：https://blog.csdn.net/m0_74338197/article/details/141793941

版权

由于需要上传文件所以前端先封装axios,这个baseUrl tinymce配置也要用到，为了后期统一管理，就写在这里了

import axios from "axios";

export const baseURL = "http://localhost:8080";

export const http = axios.create({
    baseURL: baseURL,
    timeout: 2000,
});

接下来是Tinymce组件

<template>
    <Editor
        api-key="xxxxxxxxxx"  //这里的key去官网注册账号免费获取
        :init="{
        selector: 'textarea',
        toolbar_mode: 'sliding',
        max_height: 800,
        min_height: 400,
        width: '100%',

        //图片上传地址
        images_upload_url: baseURL+'/api/vip/user/upload',
        // 文件上传
        file_picker_types: 'file image media',
        file_picker_callback: handleUploadFile,
        plugins: [
          'autoresize',
          'codesample',
          'emoticons',
          'link',
          'lists',
          'wordcount',
          'table',
          'anchor',
          'autolink',
          'image',
          'media',
          'preview',
          'searchreplace'
        ],
        toolbar: 'undo redo preview styles bold italic emoticons numlist bullist table| image media  link codesample anchor searchreplace',

      }"
    />

    <!-- 隐藏的文件输入框 -->
    <input
        type="file"
        ref="fileInput"
        :accept="acceptFileTypes"
        v-show="false"
        @change="handleFileChange"
    />
</template>

<script setup>
import {ref} from 'vue'
import Editor from '@tinymce/tinymce-vue'
import {baseURL, http} from "../../axios/index.js"

const fileInput = ref(null)
const acceptFileTypes = ref('')
const filePickerCallback = ref(null)  // 用来存储回调函数

function handleUploadFile(callback, value, meta) {
  filePickerCallback.value = callback;  // 存储回调函数

  switch (meta.filetype) {
    case 'file':