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

文章目录

• • 前言
  • 步骤
  • • [1. 构造好前端模版](#1. 构造好前端模版)
    • [2. 搭建后端存储](#2. 搭建后端存储)
    • [3. 调试](#3. 调试)

前言

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

步骤

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

1. 构造好前端模版

安装模版

模版安装参考：https://www.wangeditor.com/v5/for-frame.html#调用-api

上传图片参考：https://www.wangeditor.com/v5/menu-config.html#图片

项目代码：

<template>
  <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>
</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() {
      // 编辑器实例，必须用 shallowRef
      const editorRef = shallowRef()

      // 内容 HTML
      const 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.value
        if (editor == null) return
        editor.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 Image

class 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. 调试