Vue3中集成富文本插件wangEditor
1、安装
npm install @wangeditor/editor --save
npm install @wangeditor/editor-for-vue@next --save
2、创建组件文件
在components下创建文件夹WangEditor,再创建index.vue文件
<template>
<el-row>
<div style="border: 1px solid #ccc">
<Toolbar
style="border-bottom: 1px solid #ccc"
:editor="editorRef"
:defaultConfig="toolbarConfig"
:mode="mode"
/>
<Editor
style="height: 500px; overflow-y: hidden;"
v-model="valueHtml"
:defaultConfig="editorConfig"
:mode="mode"
@onCreated="handleCreated"
/>
</div>
</el-row>
</template>
<script setup>
import '@wangeditor/editor/dist/css/style.css' // 引入 css
import { onBeforeUnmount, ref, shallowRef, onMounted, watchEffect, watch } from 'vue'
import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
import { getToken } from "@/utils/auth";
const uploadUrl = ref(import.meta.env.VITE_APP_BASE_API + "/common/uploadWangEditor"); // 上传文件服务器地址
const headers = ref({
Authorization: "Bearer " + getToken()
});
// 声明 props
const props = defineProps({
modelValue: {
type: String,
default: '',
}
})
// 声明事件消息emits
const emits = defineEmits(["update:modelValue"]);
// 编辑器实例,必须用 shallowRef
const editorRef = shallowRef()
// 内容 HTML
const valueHtml = ref('')
// 当属性变化时,自动赋值给valuesHtml
watchEffect(() => {
if (props.modelValue) {
valueHtml.value = props.modelValue;
}
})
// 当内容变化时,自动赋值给props.modelValue
watch(valueHtml, (newHtml) => {
emits('update:modelValue', newHtml);
})
const toolbarConfig = {}
const editorConfig = {
placeholder: '请输入内容...',
MENU_CONF:{
uploadImage: {
fieldName: 'file',
//服务器地址
server: uploadUrl.value,
// 上传请求头部
headers: headers.value,
// 单个文件的最大体积限制,默认为 2M
maxFileSize: 5 * 1024 * 1024, // 5M
// 最多可上传几个文件,默认为 100
maxNumberOfFiles: 10,
// 选择文件时的类型限制,默认为 ['image/*'] 。如不想限制,则设置为 []
allowedFileTypes: ['image/*']
},
uploadVideo: {
fieldName: 'file',
//服务器地址
server: uploadUrl.value,
// 上传请求头部
headers: headers.value,
// 单个文件的最大体积限制,默认为 2M
maxFileSize: 20 * 1024 * 1024, // 20M
// 最多可上传几个文件,默认为 5
maxNumberOfFiles: 3,
// 选择文件时的类型限制,默认为 ['video/*'] 。如不想限制,则设置为 []
allowedFileTypes: ['video/*']
}
}
}
// 组件销毁时,也及时销毁编辑器
onBeforeUnmount(() => {
const editor = editorRef.value
if (editor == null) return
editor.destroy()
})
const handleCreated = (editor) => {
editorRef.value = editor // 记录 editor 实例,重要!
}
</script>
3、引入组件到main.js
// 引入wangEditor富文本组件
import WangEditor from '@/components/WangEditor'
// 全局组件挂载
app.component('WangEditor', WangEditor)
4、页面调用
<el-form-item label="内容" prop="content">
<wang-editor v-model="form.content" />
</el-form-item>
5、后端上传接口
在CommonController添加uploadWangEditor方法,保证返回值满足官网的要求
/**
*
* wangEditor 富文本文件上传
*
* @param file
* @return
* @throws Exception
*/
@PostMapping("/uploadWangEditor")
public AjaxResult uploadWangEditorFile(MultipartFile file) throws Exception
{
try
{
// 上传文件路径
String filePath = YxaConfig.getUploadPath();
// 上传并返回新文件名称
String fileName = FileUploadUtils.upload2(filePath, file);
String url = serverConfig.getUrl() + fileName;
AjaxResult ajax = AjaxResult.success();
JSONObject data = new JSONObject();
data.put("url", url);
data.put("alt", fileName);
data.put("href", url);
ajax.put("data", data);
ajax.put("errno", 0);
return ajax;
}
catch (Exception e)
{
AjaxResult ajax = AjaxResult.success();
ajax.put("errno", 1);
ajax.put("message", e.getMessage());
return ajax;
}
}