在MySQL数据库中存储TinyMCE表单数据并按原样返回

，可以通过以下步骤实现：

创建数据库表：首先，创建一个用于存储TinyMCE表单数据的数据库表。可以使用MySQL的命令行工具或者图形化界面工具（如phpMyAdmin）来执行SQL语句创建表。以下是一个示例的SQL语句：

CREATE TABLE tinymce_data (
    id INT AUTO_INCREMENT PRIMARY KEY,
    content TEXT
);

上述SQL语句创建了一个名为tinymce_data的表，包含两个字段：id和content。id字段是自增的主键，content字段用于存储TinyMCE表单数据。

后端开发：在后端开发中，可以使用任何喜欢的编程语言和框架来处理表单数据的存储和返回。以下是一个示例使用Node.js和Express框架的后端代码：

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

const app = express();

// 创建MySQL数据库连接
const connection = mysql.createConnection({
    host: 'localhost',
    user: 'username',
    password: 'password',
    database: 'database_name'
});

// 处理POST请求，将表单数据存储到数据库
app.post('/save', (req, res) => {
    const content = req.body.content;

    // 执行数据库插入操作
    const query = 'INSERT INTO tinymce_data (content) VALUES (?)';
    connection.query(query, [content], (error, results) => {
        if (error) {
            console.error(error);
            res.status(500).send('Error saving data');
        } else {
            res.send('Data saved successfully');
        }
    });
});

// 处理GET请求，从数据库中获取表单数据并返回
app.get('/data', (req, res) => {
    // 执行数据库查询操作
    const query = 'SELECT content FROM tinymce_data ORDER BY id DESC LIMIT 1';
    connection.query(query, (error, results) => {
        if (error) {
            console.error(error);
            res.status(500).send('Error retrieving data');
        } else {
            if (results.length > 0) {
                const content = results[0].content;
                res.send(content);
            } else {
                res.send('No data found');
            }
        }
    });
});

// 启动服务器
app.listen(3000, () => {
    console.log('Server is running on port 3000');
});

上述代码创建了一个基于Express框架的Node.js服务器，监听在端口3000上。其中，/save路由用于将表单数据存储到数据库，/data路由用于从数据库中获取表单数据并返回。

前端开发：在前端开发中，可以使用任何喜欢的前端框架或纯JavaScript来处理表单数据的发送和接收。以下是一个示例使用纯JavaScript的前端代码：

<!DOCTYPE html>
<html>
<head>
    <title>TinyMCE Form</title>
    <script src="https://cdn.tiny.cloud/1/apikey/tinymce/5/tinymce.min.js" referrerpolicy="origin"></script>
    <script>
        document.addEventListener("DOMContentLoaded", function() {
            tinymce.init({
                selector: '#myTextarea'
            });
        });

        function saveData() {
            const content = tinymce.get('myTextarea').getContent();

            // 发送POST请求将表单数据存储到后端
            fetch('/save', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify({ content: content })
            })
            .then(response => response.text())
            .then(data => {
                console.log(data);
            })
            .catch(error => {
                console.error(error);
            });
        }

        function loadData() {
            // 发送GET请求从后端获取表单数据
            fetch('/data')
            .then(response => response.text())
            .then(data => {
                tinymce.get('myTextarea').setContent(data);
            })
            .catch(error => {
                console.error(error);
            });
        }
    </script>
</head>
<body>
    <textarea id="myTextarea"></textarea>
    <br>
    <button onclick="saveData()">Save</button>
    <button onclick="loadData()">Load</button>
</body>
</html>

上述代码创建了一个包含一个TinyMCE编辑器和两个按钮的HTML页面。其中，saveData()函数用于将表单数据发送到后端进行存储，loadData()函数用于从后端获取表单数据并在TinyMCE编辑器中显示。

通过以上步骤，可以实现在MySQL数据库中存储TinyMCE表单数据并按原样返回。请注意，以上代码仅为示例，实际应用中可能需要根据具体需求进行适当的修改和优化。

在MySQL数据库中存储TinyMCE表单数据并按原样返回

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐