wangEditor富文本编辑器，Laravel上传图片配置和使用

前言

由于最近写项目需要使用富文本编辑器，使用的是VUE3.0版本所以很多不兼容，实际测试以后推荐使用wangEditor

步骤

1. 构造好前端模版
2. 搭建后端存储
3. 调试

1. 构造好前端模版

安装模版
模版安装参考：https://www.wangeditor.com/v5/for-frame.html#%E8%B0%83%E7%94%A8-api

上传图片参考：https://www.wangeditor.com/v5/menu-config.html#%E5%9B%BE%E7%89%87

项目代码：

<template><div style="border: 1px solid #ccc"><Toolbarstyle="border-bottom: 1px solid #ccc":editor="editorRef":defaultConfig="toolbarConfig":mode="mode"/><Editorstyle="height: 500px; overflow-y: hidden;"v-model="valueHtml":defaultConfig="editorConfig":mode="mode"@onCreated="handleCreated"/></div>
</template><script>
import '@wangeditor/editor/dist/css/style.css' // 引入 css
import { onBeforeUnmount, ref, shallowRef, onMounted } from 'vue'
import { Editor, Toolbar } from '@wangeditor/editor-for-vue'export default {components: { Editor, Toolbar },setup() {// 编辑器实例，必须用 shallowRefconst editorRef = shallowRef()// 内容 HTMLconst valueHtml = ref('<p>hello</p>')// 模拟 ajax 异步获取内容onMounted(() => {setTimeout(() => {valueHtml.value = '<p>模拟 Ajax 异步设置内容</p>'}, 1500)})const toolbarConfig = {}const editorConfig = { placeholder: '请输入内容...',MENU_CONF: {uploadImage:{fieldName: 'images',server: '/api/uploadImage',maxSize: 5 * 1024 * 1024, // 5MB}}}// 组件销毁时，也及时销毁编辑器onBeforeUnmount(() => {const editor = editorRef.valueif (editor == null) returneditor.destroy()})const handleCreated = (editor) => {editorRef.value = editor // 记录 editor 实例，重要！}return {editorRef,valueHtml,mode: 'default', // 或 'simple'toolbarConfig,editorConfig,handleCreated,}},}
</script>
<style></style>

2. 搭建后端存储

这边使用的是Laravel框架

namespace App\Http\Controllers\Api;use App\Models\ProductTable;  // 引入模型
use Illuminate\Http\Request;
use App\Http\Controllers\Controller;
use Illuminate\Support\Facades\Storage;
use Illuminate\Support\Facades\Validator;
use Intervention\Image\Facades\Image;  // 引入 Intervention Imageclass ProductTableController extends Controller
{public function uploadImage(Request $request){// 验证请求数据$validator = Validator::make($request->all(), ['images' => 'required|image|mimes:jpeg,png,jpg,gif|max:5120',  // 图片字段必填，且文件类型、大小需要满足要求]);// 如果验证失败，返回错误信息if ($validator->fails()) {return response()->json(['errno' => 1, // 错误码为 1'message' => 'Validation failed: ' . $validator->errors()->first(),], 422);}try {// 获取上传的文件$file = $request->file('images');// 生成唯一的文件名，防止文件名重复$filename = uniqid() . '.' . $file->getClientOriginalExtension();// 保存图片到 storage/app/public/images 目录，使用生成的文件名$path = $file->store('images', 'public');// 获取完整的文件 URL，包含 IP 地址或域名$url = request()->getSchemeAndHttpHost() . Storage::url($path);// 返回响应，符合要求的格式return response()->json(['errno' => 0, // 错误码为 0，表示成功'data' => ['url' => $url,  // 图片 URL'alt' => $filename,  // 图片的描述，可以使用文件名作为描述'href' => '', // 图片的链接，可选，暂时为空]], 200);} catch (\Exception $e) {// 捕获异常并返回错误信息return response()->json(['errno' => 1, // 错误码为 1'message' => 'Failed to upload image: ' . $e->getMessage(), // 错误信息], 500);}}
}

注意配置的上传images地址，config/filesystems.php

3. 调试