如何在Node.js应用中使用CKEditor？基于Handlebars的CRUD应用编辑器集成

Hey there! Let me walk you through exactly how to add CKEditor (or similar rich text editors) to your Node.js + Handlebars CRUD app—this is a super common setup, so I’ve got you covered step by step.

1. 前端集成：在Handlebars模板中加入CKEditor #

首先，我们把CKEditor添加到新增/编辑表单里。最简单的方式是用官方CDN（不用本地下载文件）：

create.hbs或edit.hbs示例 #

把普通的<textarea>替换成CKEditor容器，再加一个隐藏输入框同步内容（因为CKEditor会渲染自己的DOM结构，需要这个输入框把数据传给后端）：

<form method="POST" action="{{#if id}}/posts/{{id}}{{else}}/posts{{/if}}">
  <div class="form-group">
    <label for="post-title">标题</label>
    <input type="text" name="title" id="post-title" value="{{title}}" required>
  </div>
  <div class="form-group">
    <label for="post-content">内容</label>
    <!-- CKEditor容器 -->
    <div id="editor">{{{content}}}</div>
    <!-- 存储富文本内容的隐藏输入框 -->
    <input type="hidden" name="content" id="hidden-content">
  </div>
  <button type="submit">{{#if id}}更新文章{{else}}创建文章{{/if}}</button>
</form>

<!-- 通过CDN加载CKEditor 5经典编辑器 -->
<script src="https://cdn.ckeditor.com/ckeditor5/41.4.2/classic/ckeditor.js"></script>
<script>
  // 初始化CKEditor
  ClassicEditor
    .create(document.querySelector('#editor'))
    .then(editor => {
      // 表单提交时，把编辑器内容同步到隐藏输入框
      document.querySelector('form').addEventListener('submit', () => {
        document.querySelector('#hidden-content').value = editor.getData();
      });
      
      // 编辑页面：给编辑器填充已有内容
      {{#if content}}
      editor.setData('{{{content}}}');
      {{/if}}
    })
    .catch(error => {
      console.error('CKEditor初始化出错:', error);
    });
</script>

2. 后端处理：接收并存储富文本内容 #

在Node.js后端（假设用Express），要确保正确解析表单数据。首先添加中间件：

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

// 解析URL编码的表单数据
app.use(express.urlencoded({ extended: true }));

然后在CRUD路由里，直接从req.body.content获取富文本内容：

// 示例：创建新文章
app.post('/posts', async (req, res) => {
  const { title, content } = req.body;
  
  // 把内容存入数据库（比如MongoDB、PostgreSQL，替换成你的实际逻辑）
  await PostModel.create({ title, content });
  
  res.redirect('/posts');
});

// 示例：更新已有文章
app.post('/posts/:id', async (req, res) => {
  const { id } = req.params;
  const { title, content } = req.body;
  
  await PostModel.findByIdAndUpdate(id, { title, content });
  
  res.redirect('/posts');
});

3. 在Handlebars中展示富文本内容 #

在文章详情或列表模板（比如post.hbs）里，用三重大括号{{{content}}}禁用HTML转义，这样富文本格式才能正确渲染：

<div class="post-detail">
  <h1>{{title}}</h1>
  <div class="post-body">
    {{{content}}} <!-- 三重大括号 = 不转义HTML -->
  </div>
</div>

重要安全提示 #

禁用HTML转义可能会让应用面临XSS攻击风险（如果用户提交恶意内容的话）。可以用xss包在存入数据库前先清理内容：

const xss = require('xss');

// 存入数据库前先 sanitize 内容
const safeContent = xss(content);
await PostModel.create({ title, content: safeContent });

4. CKEditor的替代方案 #

如果CKEditor对你的应用来说太重，这些轻量编辑器的集成逻辑类似：

• TinyMCE: 功能丰富，和CKEditor类似，有免费CDN版本
• Quill: 轻量、高度可定制，适合简单场景
• SimpleMDE: 专注Markdown的编辑器，适合偏好带样式纯文本的应用

5. 进阶：添加图片上传功能 #

如果想让用户通过CKEditor上传图片，可以用multer搭建后端上传接口：

第一步：前端配置 #

更新CKEditor初始化代码，加入上传设置：

ClassicEditor
  .create(document.querySelector('#editor'), {
    ckfinder: {
      uploadUrl: '/api/upload-image' // 你的后端上传接口地址
    }
  })
  .then(editor => { ... })

第二步：后端上传路由 #

const multer = require('multer');
// 配置图片存储路径和文件名
const storage = multer.diskStorage({
  destination: (req, file, cb) => {
    cb(null, 'public/uploads/'); // 图片存在public/uploads文件夹
  },
  filename: (req, file, cb) => {
    cb(null, Date.now() + '-' + file.originalname); // 生成唯一文件名
  }
});
const upload = multer({ storage });

// 提供静态文件服务，让上传的图片能被访问
app.use(express.static('public'));

// 图片上传接口
app.post('/api/upload-image', upload.single('upload'), (req, res) => {
  // 按CKEditor要求的格式返回图片URL
  res.json({
    url: `/uploads/${req.file.filename}`
  });
});

Hope this helps you get rich text editing up and running smoothly in your CRUD app! If you run into any specific issues (like database integration quirks), feel free to dig into those details.

内容的提问来源于stack exchange，提问作者user3869304