1.下载wangEditor
npm install @wangeditor/editor --save
2.前端代码(RichTextEditor.vue)
这里我创建RichTextEditor.vue文件来保存富文本,用 <rich-text-editor></rich-text-editor>将富文本放到你想放的位置进行了
<!-- 富文本组件 -->
<template>
<div>
<Toolbar :editor="editorRef" :defaultConfig="toolbarConfig" :mode="mode"
style="border-bottom: 1px solid #ccc" />
<Editor :defaultConfig="editorConfig" :mode="mode" v-model="valueHtml" style="height: 400px; overflow-y: hidden"
@onCreated="handleCreated" @onChange="handleChange" />
</div>
</template>
<script setup>
import '@wangeditor/editor/dist/css/style.css';
import { ref, reactive, inject, onMounted, onBeforeUnmount, shallowRef } from 'vue'
import { Editor, Toolbar } from '@wangeditor/editor-for-vue';
const server_url = inject("server_url")
// 编辑器实例,必须用 shallowRef,重要!
const editorRef = shallowRef();
const toolbarConfig = { excludeKeys:["uploadVideo"] };
const editorConfig = { placeholder: '请输入内容...' };
editorConfig.MENU_CONF = {}
const server_url ="http://localhost:3000"
editorConfig.MENU_CONF['uploadImage'] = {
base64LimitSize: 10 * 1024, // 10kb
server: server_url+'/upload/file',
}
//对于后端返回的url只有/upload后端的内容,并没有http://localhost:3000,所以这里做个处理。
editorConfig.MENU_CONF['insertImage'] ={
parseImageSrc:(src) =>{
if(src.indexOf("http") !==0){
return `${server_url}${src}`
}
return src
}
}
const mode = ref("default")
const valueHtml = ref("")
const props = defineProps({
modelValue: {
type: String,
default: ""
}
})
const emit = defineEmits(["update:model-value"])
let initFinished = false
onMounted(() => {
setTimeout(() => {
valueHtml.value = props.modelValue;
initFinished = true;
}, 10);
});
// 组件销毁时,也及时销毁编辑器,重要!
onBeforeUnmount(() => {
const editor = editorRef.value;
if (editor == null) return;
editor.destroy();
});
// 编辑器回调函数
const handleCreated = (editor) => {
console.log('created', editor);
editorRef.value = editor; // 记录 editor 实例,重要!
};
const handleChange = (editor) => {
if (initFinished) {
emit("update:model-value", valueHtml.value)
}
};
</script>
<style lang="scss" scoped>
</style>
2.后端代码(UploadRouter.js)
我用的是nodejs中express和formidable模块进行图片上传的。所以先下载好环境
npm i nodejs
npm i express
npm i formidable
const express = require('express')
const router = express.Router()
const path = require('path')
const formidable = require('formidable');
// 实现文件上传的路由
router.post("/file", async (req, res) => {
// console.log(req)
// 创建formidable表单解析对象
const form = new formidable.IncomingForm({
//配置上传文件的存放位置
uploadDir: path.join(__dirname, '../', 'public', 'uploads'),
//保留上传文件后缀
keepExtensions: true,
})
form.parse(req, (err, fields, files) => {
// 将客户端传递过来的文件地址响应到客户端
if(err){
return res.send(
{
errno:1,
message:"出现异常",
err
}
)
}
// console.log(files['wangeditor-uploaded-image'].filepath.split('public')[1])
return res.send({
errno:0,
data:{
url:files['wangeditor-uploaded-image'].filepath.split('public')[1],
alt:'无'
}
});
});
})
module.exports = router
3.创建public文件夹储存图片(与package.json文件同级)
上传成功时出现图片