Vue 3 项目中集成 Froala 编辑器并实现图片上传

Vue 3 项目中集成 Froala 编辑器并实现图片上传

本文演示如何在 Vue 3（Composition API）项目中使用 Froala 富文本编辑器，并通过 Node.js (Express + multer) 实现本地图片上传。步骤包括：安装依赖、前端配置 Froala 组件、后端搭建上传接口并保存图片、返回 Froala 要求的 JSON 格式链接。示例代码贴近真实项目结构，便于直接使用。

安装依赖

• 使用 npm 安装 Froala 编辑器及 Vue 集成包：

  npm install froala-editor vue-froala-wysiwyg --save
  

• 安装后端所需包：express 与 multer 用于搭建接口和处理文件上传：

  npm install express multer --save
  

前端：配置 Froala 编辑器组件

在 main.js 中导入 Froala 编辑器相关文件，并注册 VueFroala 插件。例如：

// main.js
import { createApp } from 'vue';
import App from './App.vue';

// 导入 Froala 编辑器主文件和插件
import 'froala-editor/js/plugins.pkgd.min.js';
import 'froala-editor/js/third_party/embedly.min';
import 'froala-editor/js/third_party/font_awesome.min';
import 'froala-editor/js/third_party/spell_checker.min';
import 'froala-editor/js/third_party/image_tui.min';

// 导入 Froala 编辑器的样式
import 'froala-editor/css/froala_editor.pkgd.min.css';
import 'froala-editor/css/froala_style.min.css';

// 导入并使用 Vue 集成插件
import VueFroala from 'vue-froala-wysiwyg';

const app = createApp(App);
app.use(VueFroala);
app.mount('#app');

在 Vue 组件中使用 <froala> 组件渲染编辑器。例如，我们可以创建一个 FroalaEditor.vue 组件，使用 Composition API 的 setup 语法编写：

<!-- FroalaEditor.vue -->
<template>
  <!-- 这里使用 Froala 提供的 <froala> 组件，:config 传入编辑器配置 -->
  <froala :tag="'textarea'" v-model:value="content" :config="config"></froala>
</template>

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

// 绑定编辑器内容的响应式变量
const content = ref('<p>在这里输入内容</p>');

// Froala 编辑器配置项
const config = ref({
  // 指定图片上传接口 URL（指向后端）
  imageUploadURL: 'http://localhost:3000/upload_image',
  // 可选：设置允许的图片类型
  imageAllowedTypes: ['jpeg', 'jpg', 'png', 'gif'],
  // Froala 默认上传时使用的字段名为 'file':contentReference[oaicite:4]{index=4}，
  // 如果需要自定义可设置 imageUploadParam，此处保持默认无需设置
});
</script>

以上代码中，v-model:value="content" 绑定编辑器内容，:config="config" 传入 Froala 配置对象。在 config 中设置 imageUploadURL 指向本地后端上传接口即可。Froala 编辑器插入图片时会自动发送 AJAX 请求到该接口。另外，请确保设置好 webpack（或 Vite）对 CSS 的加载规则，使 Froala 的样式生效。

后端：Express + Multer 图片上传接口

在后端创建一个 Node.js 文件（如 server.js），搭建 Express 应用并使用 multer 处理图片上传。首先配置静态目录以让上传的图片可被访问，然后编写上传路由。示例代码如下：

// server.js
const express = require('express');
const multer  = require('multer');
const path = require('path');

const app = express();

// 将 /uploads 路径映射到本地 uploads 文件夹，方便通过 URL 访问图片
app.use('/uploads', express.static(path.join(__dirname, 'uploads')));

// 配置 multer 的存储方式：保存到 uploads 文件夹，并用时间戳命名文件
const storage = multer.diskStorage({
  destination: function (req, file, cb) {
    cb(null, 'uploads/');  // 保存到项目根目录下的 uploads/ 文件夹
  },
  filename: function (req, file, cb) {
    const filename = Date.now() + path.extname(file.originalname);
    cb(null, filename);
  }
});
const upload = multer({ storage: storage });

// 图片上传接口，字段名应与 Froala 默认的一致（默认为 'file':contentReference[oaicite:8]{index=8}）
app.post('/upload_image', upload.single('file'), (req, res) => {
  const file = req.file;
  if (!file) {
    return res.status(400).json({ error: '未检测到上传文件' });
  }
  // 构造图片 URL（这里假设前端和后端在同一域名下）
  const url = `${req.protocol}://${req.get('host')}/uploads/${file.filename}`;
  // Froala 要求返回的 JSON 格式为 { link: '图片访问 URL' }:contentReference[oaicite:9]{index=9}
  return res.json({ link: url });
});

// 启动服务器
app.listen(3000, () => {
  console.log('Server started on http://localhost:3000');
});

上述后端代码中，upload.single('file') 表示接收单个名为 file 的文件（Froala 默认上传字段名为 file）。上传成功后，返回形如 { link: 'http://localhost:3000/uploads/xxxxx.jpg' } 的 JSON 数据给前端。这样 Froala 编辑器就会在内容中正确插入上传后的图片。

完整流程

1. 启动后端服务器：node server.js，确保 uploads/ 文件夹存在且可写。
2. 启动 Vue 前端项目（如 npm run serve）。
3. 在浏览器中打开编辑器页面，使用 Froala 插入图片（选择本地文件）。Froala 编辑器会将图片上传到后端接口，后端保存图片并返回 {link: ...}，前端自动将返回的链接插入编辑器内容中。

通过以上配置，即可实现在 Vue 3 项目中使用 Froala 编辑器并完成本地图片上传功能。所有代码均贴近实际项目结构，便于直接复制粘贴使用。如有前后端跨域需求，可在 Express 中启用 CORS 或在前端配置代理。

具体项目可以参考 Github：https://github.com/huangwenzheng/Froala-vue

参考资料： Froala 官方文档（Vue 集成、图片上传）、Express 中间件 multer 文档。