时间戳

首页 > 解决方案 > 如何在 php 和 javascript 中将内容表单文本编辑器保存到数据库？

javascript - 如何在 php 和 javascript 中将内容表单文本编辑器保存到数据库？

问题描述

我使用 html 和 javaScript 设计了一个文本编辑器。现在我想保存在文本编辑器上编写的内容以保存到数据库中。我想为此使用 php 和 jquery。但如果有更简单的解决方案，那么我也想尝试一下。我的数据库名称是'onlineexam'，表名是'question'。texeditor 内容的字段是“问题”。这是我在 editor.php 文件中的代码 -

    <!DOCTYPE html>
    <html>
    <head>
    <script src="https://kit.fontawesome.com/889d5ab78b.js" crossorigin="anonymous"></script>
    <body onload="enableEditMode();" style="margin-top: 100px; margin-left: 200px;">
    <div>
    <select onclick="execCommandWithArg('fontName',this.value);">
    <option value="Arial">Arial</option>
    <option value="Comic Sans Ms">Comic Sans Ms</option>
    <option value="Courier">Courier</option>
    <option value="Georgia">Georgia</option>
    <option value="Times New Roman">Times New Roman</option>
    </select>
    <button onclick="execCmd('bold');"><i class="fas fa-bold"></i></button>
    <button onclick="execCmd('italic')"><i class="fas fa-italic"></i></button>
    <button onclick="execCmd('underline')"><i class="fas fa-underline"></i></button>

    <select onclick="execCommandWithArg('formatBlock',this.value);">
    <option value=H1>H1</option>
    <option value=H2>H2</option>
    <option value=H3>H3</option>
    <option value=H4>H4</option>
    <option value=H5>H5</option>
    </select>

    Size <select onclick="execCommandWithArg('fontSize',this.value);">
    <option value=1>1</option>
    <option value=2>2</option>
    <option value=3>3</option>
    <option value=4>4</option>
    <option value=5>5</option>
    </select>

    <button onclick="execCmd('justifyFull')"><i class="fas fa-align-justify"></i></button>
    <button onclick="execCmd('justifyRight')"><i class="fas fa-align-right"></i></button>
    <button onclick="execCmd('justifyCenter')"><i class="fas fa-align-center"></i></button>
    <button onclick="execCmd('justifyLeft')"><i class="fas fa-align-left"></i></button>
    <br><br>
    <button onclick="execCmd('subscript')"><i class="fas fa-subscript"></i></button>
    <button onclick="execCmd('superscript')"><i class="fas fa-superscript"></i></button>


    <button onclick="execCmd('insertOrderedList')"><i class="fas fa-list-ol"></i></button>
    Font Color <input type="color" onchange="execCommandWithArg('foreColor', this.value);">
    Highlighter <input type="color" onchange="execCommandWithArg('hiliteColor', this.value);">
    <button onclick="execCommandWithArg('insertImage', prompt('Enter URL:', ''));"><i class="fas fa- 
    image"></i></button>



    </div><br>
    <form action="database.php" method="post">
    <div class="form form-control">
    <label for="course_id">Course Id</label> 
    <input type="number" name="course_id">
    </div>
    <div class="form form-control"> 
    <label for="question"></label>
    <input type="hidden" name="question" id="question" value="">
    </div>
    <div class="form form-control"> 
    <label form="exam_date"></label>
    <input type="date" name="exam_date">
    </div>

    <div class="form form-control"> 
    <input type="submit" value="post" name="submit">
    </div>
    </form>

    <iframe name="uzma" id="uzma" style="width: 500px; height: 250px;"></iframe>
    <script type="text/javascript">
    function enableEditMode(){
    uzma.document.designMode ='On';


    }
    function execCmd(command){

    uzma.document.execCommand(command, false, null);
    }
    function execCommandWithArg(command, arg){

    uzma.document.execCommand(command, false, arg);
    }



    </script>
    </body>
    </html>

标签： javascriptphphtmljquery

解决方案

保存到数据库需要服务器端代码。要在客户端请求运行服务器端代码，您需要一个 API。这是一个您可以使用的非常简单的示例：（我们称此文件为api.php）

if (isset($_POST['question'])) {
    $conn = new mysqli('address', 'user', 'password', 'database'); // init a db connection
    $sql = "INSERT into question (question) VALUES (?)"; //enter your MySQL query here. Where you need the data from the text editor, replace with a "?"
    $stmt = $conn->prepare($sql); // prepare statement
    $stmt->bind_param("s", $_POST['question']); //assign variable to the "?" placeholder
    $stmt->execute(); //run the MySQL query
}

在您的客户端：

function saveToDB (question) {
    let xhr = new XMLHttpRequest();
    xhr.open("POST", '/api.php', true);
    xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
    xhr.onreadystatechange = function() { // Call a function when the state changes.
        if (this.readyState === XMLHttpRequest.DONE && this.status === 200) {
            // Request finished. Do processing here.
        }
    }
    let formData = new FormData();
    formData.append("question", question); //add a field named `question` (received as $_POST['question'] in your PHP
    xhr.send(new URLSearchParams(formData).toString()); //encode formData and send the request
}

XMLHttpRequest (xhr)
PHP 预处理语句 (stmt)

请注意，在构建公共 API 时，您可能希望使用某种速率限制器，让您的 API 返回数据是否执行成功等。

推荐阅读