Vue3 + UEditorPlus + Laravel 全栈富文本编辑器集成指南

UEditorPlus 简介

UEditorPlus 是百度 UEditor 的现代化升级版，提供丰富的富文本编辑功能：

• 支持图片/视频/文件上传
• 表格、代码块、公式编辑
• 多平台兼容
• 完善的API接口

前端集成步骤（Vue3）

安装依赖

npm i vue-ueditor-wrap@3.x

目录结构准备

复制 UEditorPlus 的 public 到项目静态资源目录：

public/
  └── static/
       └── UEditorPlus/
            ├── ueditor.config.js
            ├── ueditor.all.js
            └── ...其他资源文件

Vue组件实现

<template>
  <vue-ueditor-wrap
    v-model="content"
    :config="editorConfig"
    :editor-id="editorId"
    @ready="onEditorReady"
  />
</template>

<script setup>
import { ref } from 'vue';

const content = ref('');
const editorId = ref(`editor_${Date.now()}`);

const editorConfig = {
  serverUrl: `${import.meta.env.VITE_API_BASE}/admin/ueditor`,
  serverHeaders: { 
    Authorization: `Bearer ${localStorage.getItem('token')}` 
  },
  UEDITOR_HOME_URL: '/static/UEditorPlus/',
  initialFrameHeight: 500,
  autoHeightEnabled: false,
  // 其他配置...
};
</script>

关键配置说明

Laravel后端实现

控制器核心方法

public function index(Request $request)
{
    $actions = [
        'config' => 'getConfig',
        'upload' => 'handleUpload',
        'crawl' => 'handleCrawl',
        'listImage' => 'listImages'
    ];
    
    $action = $request->input('action');
    return $actions[$action]($request);
}

// 获取编辑器配置
private function getConfig()
{
    return response()->json([
        'imageMaxSize' => 10 * 1024 * 1024,
        'imageAllowFiles' => ['.png', '.jpg', '.jpeg'],
        'videoAllowFiles' => ['.mp4'],
        // ...其他配置
    ]);
}

// 文件上传处理
private function handleUpload(Request $request)
{
    $file = $request->file('file');
    $type = $request->input('action'); // image/video/file
    
    $path = $file->store("ueditor/{$type}/".date('Ym'));
    $url = Storage::url($path);

    return response()->json([
        'state' => 'SUCCESS',
        'url' => $url,
        'title' => basename($path),
        'original' => $file->getClientOriginalName()
    ]);
}

// 涂鸦图片处理
private function handleCrawl(Request $request)
{
    $base64 = $request->input('file');
    $image = base64_decode(preg_replace('#^data:image/\w+;base64,#i', '', $base64));
    
    $filename = 'scrawl_'.time().'.png';
    Storage::put("ueditor/scrawl/{$filename}", $image);
    
    return response()->json([
        'state' => 'SUCCESS',
        'url' => Storage::url("ueditor/scrawl/{$filename}")
    ]);
}

路由设置

Route::any('/admin/ueditor', [UEditorController::class, 'index']);

安全增强方案

文件类型验证

$allowTypes = [
    'image' => ['jpg', 'png', 'jpeg', 'gif'],
    'video' => ['mp4', 'mov'],
    'file' => ['pdf', 'doc', 'xlsx']
];

if (!in_array($ext, $allowTypes[$type])) {
    return ['state' => '文件类型不允许'];
}

大小限制

$maxSize = [
    'image' => 10 * 1024 * 1024, // 10MB
    'video' => 100 * 1024 * 1024 // 100MB
];

if ($file->getSize() > $maxSize[$type]) {
    return ['state' => '文件大小超过限制'];
}

XSS过滤

// 前端提交时过滤危险标签
editor.addListener('beforeSubmit', () => {
    const content = editor.getContent();
    const clean = content.replace(/<script.*?>.*?<\/script>/gi, '');
    editor.setContent(clean);
});

常见问题解决

编辑器不显示

• 检查 UEDITOR_HOME_URL 路径是否正确
• 确认浏览器控制台是否有404资源错误

上传失败

• 检查后端路由是否可访问
• 验证请求头Authorization是否正确传递
• 查看Laravel日志中的错误信息

跨域问题

在Laravel中配置CORS：

// config/cors.php
'paths' => ['api/*', 'admin/ueditor'],
'allowed_origins' => ['*'],

图片管理扩展

private function listImages(Request $request)
{
    $files = Storage::files('ueditor/images');
    $list = array_map(fn($file) => [
        'url' => Storage::url($file),
        'mtime' => Storage::lastModified($file)
    ], $files);

    return [
        'state' => 'SUCCESS',
        'list' => $list,
        'start' => 0,
        'total' => count($list)
    ];
}

总结

通过本文方案可实现：

• Vue3项目无缝集成UEditorPlus编辑器 ✅
• Laravel后端统一处理文件上传 ✅
• 完整的身份验证和文件管理 ✅
• 响应式设计适配多设备 ✅