赞
踩
WangEditor的基本使用,图片上传功能
没详细讲解,只是做个记录。
<template> <div style="border: 1px solid #ccc;"> <Toolbar style="border-bottom: 1px solid #ccc" :editor="editorRef" :defaultConfig="toolbarConfig" mode="default" /> <Editor :style="{ 'height': height + 'px', 'overflow': 'hidden' }" v-model="newValue" :defaultConfig="editorConfig" mode="default" @onCreated="handleCreated" /> </div> </template> <script setup> import { defineProps, computed, shallowRef, defineEmits } from 'vue' import { Editor, Toolbar } from '@wangeditor/editor-for-vue' import Cookies from 'js-cookie' import '@wangeditor/editor/dist/css/style.css' // 引入 css const props = defineProps({ // 父组件 v-model 绑定的值 modelValue: { type: String }, // 富文本的高 height: { type: [Number, String], default: 400 } }) const editorRef = shallowRef() const emit = defineEmits(['update:modelValue']) const toolbarConfig = {} const editorConfig = { placeholder: '请输入内容...', MENU_CONF: {} } editorConfig.MENU_CONF['uploadImage'] = { // 上传图片 fieldName: 'file', // headers头部 需要添加不需要删掉 headers: { Authorization: Cookies.get('Token'), ContentType: 'application/json;charset=utf-8' }, // 图片上传的路径 server: import.meta.env.VITE_APP_BASE_API + '/image/upload', // 图片上传返回的数据 customInsert(res, insertFn) { let src = import.meta.env.VITE_APP_BASE_API + res.data.url // 有的会返回带域名的路径也有不带的根据自己的实际情况 insertFn(src) }, } editorConfig.MENU_CONF['uploadVideo'] = { } const newValue = computed({ get() { return props.modelValue }, set(value) { emit('update:modelValue', value) } }) const handleCreated = (editor) => { editorRef.value = editor // 记录 editor 实例,重要! // console.log(editor.getAllMenuKeys()) // 这里输出可以看到 富文本中所有的功能 } </script> <style lang="scss" scoped></style>
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。