Nodejs 有没有好一点编辑器，支持图片上传的

wuwangju 1楼

Node.js 是否有支持图片上传的好用编辑器？

问题描述

最近在开发一个项目时，需要使用到一个编辑器，它不仅要支持富文本编辑功能，还需要能够处理图片上传。请问有没有推荐的 Node.js 编辑器可以满足这些需求？如果有相关的示例代码，那就更好了。

示例代码

下面是一个简单的示例，展示如何将这两个库结合起来，实现一个基本的图片上传功能：

安装依赖

首先，确保你已经安装了 Node.js 和 npm。然后，在你的项目目录中执行以下命令以安装所需的库：

npm install express multer quill

创建服务器

接下来，创建一个简单的 Express 服务器，并配置 Multer 来处理文件上传：

const express = require('express');
const multer = require('multer');
const path = require('path');

const app = express();
const upload = multer({ dest: 'uploads/' });

app.use(express.static(path.join(__dirname, 'public')));

// 设置上传中间件
app.post('/upload', upload.single('image'), (req, res) => {
    if (!req.file) {
        return res.status(400).send('No file uploaded.');
    }
    res.send({ imageUrl: `/uploads/${req.file.filename}` });
});

app.listen(3000, () => {
    console.log('Server is running on port 3000');
});

前端页面

最后，创建一个简单的 HTML 页面，使用 Quill 编辑器并允许用户上传图片：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Quill Editor with Image Upload</title>
    <link href="https://cdn.quilljs.com/1.3.6/quill.snow.css" rel="stylesheet">
</head>
<body>
    <div id="editor"></div>
    <form action="/upload" method="post" enctype="multipart/form-data">
        <input type="file" name="image" accept="image/*">
        <button type="submit">Upload</button>
    </form>

    <script src="https://cdn.quilljs.com/1.3.6/quill.min.js"></script>
    <script>
        const quill = new Quill('#editor', {
            theme: 'snow'
        });

        // 添加图片上传按钮
        const toolbar = quill.getModule('toolbar');
        toolbar.addHandler('image', function() {
            document.querySelector('input[type=file]').click();
        });

        document.querySelector('input[type=file]').addEventListener('change', function(e) {
            const formData = new FormData();
            formData.append('image', e.target.files[0]);
            fetch('/upload', {
                method: 'POST',
                body: formData
            }).then(response => response.json())
              .then(data => {
                  quill.insertEmbed(quill.getLength(), 'image', data.imageUrl);
              });
        });
    </script>
</body>
</html>

通过以上步骤，你可以创建一个基本的 Node.js 应用，该应用集成了 Quill 富文本编辑器和 Multer 文件上传功能，从而实现图片上传的需求。

eggper 2楼

ueditor不支持node吧，比如图片上传处理

wuwangju 3楼

对于 Node.js 开发者来说，选择一个合适的编辑器是非常重要的。虽然编辑器本身并不直接支持图片上传的功能，但你可以通过一些集成开发环境（IDE）或基于浏览器的在线编辑器来实现图片上传功能。这些工具通常会提供一些插件或扩展来支持这类功能。

示例代码

假设你想要在你的 Node.js 应用中实现图片上传功能，这里有一个简单的示例，使用 Express 和 Multer 来处理文件上传：

const express = require('express');
const multer = require('multer');

const app = express();

// 配置 Multer 存储设置
const storage = multer.diskStorage({
    destination: function (req, file, cb) {
        cb(null, 'uploads/') // 设置上传文件的保存路径
    },
    filename: function (req, file, cb) {
        cb(null, file.fieldname + '-' + Date.now()) // 设置保存的文件名
    }
});

const upload = multer({ storage: storage });

app.post('/upload', upload.single('image'), (req, res) => {
    // req.file 包含上传的文件信息
    console.log(req.file);
    res.send('文件已上传');
});

app.listen(3000, () => {
    console.log('服务器运行在 http://localhost:3000');
});

以上代码中，我们使用 Multer 中间件来处理文件上传。Multer 会将上传的文件保存到指定的目录，并且在请求对象中添加一个 file 属性，包含有关上传文件的信息。

希望这些建议对你有所帮助！如果你需要进一步的帮助或有其他问题，请随时告诉我。

Nodejs 有没有好一点编辑器，支持图片上传的

Node.js 是否有支持图片上传的好用编辑器？

问题描述

推荐方案

示例代码

推荐的编辑器

示例代码