由于需要上传文件所以前端先封装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':