基于Node.js构建轻量级内容管理面板并集成WYSIWYG编辑器
基于Node.js构建轻量级内容管理面板并集成WYSIWYG编辑器，可以快速满足小型网站的内容更新需求，无需依赖臃肿的第三方CMS系统，整个实现过程灵活可控，适配各类定制化场景。
环境准备与项目初始化
首先确保本地已经安装Node.js环境，然后创建项目目录并初始化项目，安装所需的依赖包。本次使用Express作为Node.js的Web框架，使用tinymce作为WYSIWYG编辑器，同时使用sqlite3作为轻量级数据库存储内容。
# 创建项目目录 mkdir node-cms-panel && cd node-cms-panel # 初始化项目 npm init -y # 安装依赖 npm install express sqlite3 tinymce express-static body-parser
搭建基础后端服务
先搭建基础的Express服务，配置静态资源目录和请求体解析中间件，同时初始化数据库连接，创建存储内容的表结构。
const express = require('express');
const bodyParser = require('body-parser');
const sqlite3 = require('sqlite3').verbose();
const path = require('path');
const app = express();
// 配置静态资源目录，存放前端页面和编辑器资源
app.use(express.static(path.join(__dirname, 'public')));
// 解析application/x-www-form-urlencoded类型的请求体
app.use(bodyParser.urlencoded({ extended: false }));
// 解析application/json类型的请求体
app.use(bodyParser.json());
// 初始化数据库，创建内容存储表
const db = new sqlite3.Database('./cms.db', (err) => {
if (err) {
console.error('数据库连接失败:', err.message);
} else {
console.log('数据库连接成功');
// 创建存储页面内容的表，包含id、页面标识、内容字段
db.run(`CREATE TABLE IF NOT EXISTS page_content (
id INTEGER PRIMARY KEY AUTOINCREMENT,
page_key TEXT NOT NULL UNIQUE,
content TEXT
)`);
}
});
// 启动服务，监听3000端口
const PORT = 3000;
app.listen(PORT, () => {
console.log(`服务已启动，访问地址: http://127.0.0.1:${PORT}`);
});集成WYSIWYG编辑器
将tinymce编辑器的资源文件放到项目的public目录下，然后创建编辑页面，在页面中引入编辑器并初始化配置，同时将编辑后的内容通过接口保存到数据库。
前端编辑页面实现
创建public/edit.html文件，页面中引入tinymce编辑器，配置编辑器的基础功能，同时添加保存按钮，将编辑后的内容提交到后端接口。页面加载时会自动从后端拉取已有的页面内容填充到编辑器中，避免重复编辑。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>内容编辑面板</title>
<!-- 引入tinymce编辑器 -->
<script src="/tinymce/tinymce.min.js"></script>
<style>
.container { max-width: 1200px; margin: 20px auto; padding: 0 20px; }
.save-btn { margin-top: 10px; padding: 8px 20px; background: #007bff; color: #fff; border: none; border-radius: 4px; cursor: pointer; }
.save-btn:hover { background: #0056b3; }
</style>
</head>
<body>
<div class="container">
<h2>页面内容编辑</h2>
<!-- 编辑器容器 -->
<textarea id="editor"></textarea>
<button class="save-btn" onclick="saveContent()">保存内容</button>
</div>
<script>
// 初始化tinymce编辑器
tinymce.init({
selector: '#editor',
height: 500,
plugins: 'anchor autolink charmap codesample emoticons image link lists searchreplace table visualblocks wordcount',
toolbar: 'undo redo | blocks fontfamily fontsize | bold italic underline strikethrough | link image table | align lineheight | numlist bullist indent outdent | emoticons charmap | removeformat',
// 从后端获取已有内容填充编辑器
setup: function(editor) {
editor.on('init', function() {
fetch('/api/content?page_key=home')
.then(res => res.json())
.then(data => {
if (data.content) {
editor.setContent(data.content);
}
});
});
}
});
// 保存编辑内容到后端
function saveContent() {
const content = tinymce.activeEditor.getContent();
fetch('/api/content', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({
page_key: 'home',
content: content
})
})
.then(res => res.json())
.then(data => {
if (data.success) {
alert('内容保存成功');
} else {
alert('内容保存失败: ' + data.message);
}
});
}
</script>
</body>
</html>后端内容接口实现
在Express服务中添加内容获取和保存的接口，操作数据库实现内容的读写功能。接口采用查询时判断内容是否存在的方式，存在则执行更新操作，不存在则执行插入操作，避免重复数据产生。
// 获取页面内容接口
app.get('/api/content', (req, res) => {
const pageKey = req.query.page_key;
if (!pageKey) {
return res.json({ success: false, message: '缺少页面标识参数' });
}
db.get('SELECT content FROM page_content WHERE page_key = ?', [pageKey], (err, row) => {
if (err) {
return res.json({ success: false, message: '查询内容失败' });
}
res.json({ success: true, content: row ? row.content : '' });
});
});
// 保存页面内容接口
app.post('/api/content', (req, res) => {
const { page_key, content } = req.body;
if (!page_key || content === undefined) {
return res.json({ success: false, message: '参数不完整' });
}
// 先查询是否存在该页面的内容，存在则更新，不存在则插入
db.get('SELECT id FROM page_content WHERE page_key = ?', [page_key], (err, row) => {
if (err) {
return res.json({ success: false, message: '查询失败' });
}
if (row) {
// 更新内容
db.run('UPDATE page_content SET content = ? WHERE page_key = ?', [content, page_key], (err) => {
if (err) {
return res.json({ success: false, message: '更新内容失败' });
}
res.json({ success: true });
});
} else {
// 插入新内容
db.run('INSERT INTO page_content (page_key, content) VALUES (?, ?)', [page_key, content], (err) => {
if (err) {
return res.json({ success: false, message: '插入内容失败' });
}
res.json({ success: true });
});
}
});
});内容展示页面实现
创建public/index.html作为前端展示页面，从后端获取编辑好的内容并渲染到页面中，实现编辑内容的实时展示。页面底部提供跳转编辑面板的入口，方便运营人员快速进入编辑界面修改内容。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>首页</title>
<style>
.container { max-width: 1200px; margin: 20px auto; padding: 0 20px; }
.edit-link { margin-top: 20px; display: inline-block; color: #007bff; }
</style>
</head>
<body>
<div class="container">
<h2>首页内容</h2>
<!-- 内容展示区域 -->
<div id="content-area"></div>
<a href="/edit.html" class="edit-link">进入编辑面板</a>
</div>
<script>
// 获取并展示内容
fetch('/api/content?page_key=home')
.then(res => res.json())
.then(data => {
if (data.success && data.content) {
document.getElementById('content-area').innerHTML = data.content;
} else {
document.getElementById('content-area').innerHTML = '暂无内容，请进入编辑面板添加内容';
}
});
</script>
</body>
</html>项目运行与测试
将tinymce的编辑器资源文件放到public/tinymce目录下，然后启动Node.js服务，访问http://127.0.0.1:3000即可看到内容展示页面，点击进入编辑面板就可以使用WYSIWYG编辑器编辑内容，保存后刷新展示页面即可看到更新后的效果。
整个方案体积小、扩展性强，开发者可以根据需求添加新的编辑器功能、增加更多页面的内容管理、添加用户登录鉴权等能力，适配更多场景的使用需求。
Node.jsExpressWYSIWYG_editorcontent_management_panel修改时间：2026-06-05 03:02:54