如何將內容表單文本編輯器保存到 php 和 javascript 中的數據庫？

Question

我使用 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>

Answer 1

保存到數據庫需要服務器端代碼。 要在客戶端請求運行服務器端代碼，您需要一個 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 返回數據是否執行成功等。

如何將內容表單文本編輯器保存到 php 和 javascript 中的數據庫？

問題描述

1 個解決方案

解決方案1
0 2021-02-28 08:15:28

如何將內容表單文本編輯器保存到 php 和 javascript 中的數據庫？

問題描述

1 個解決方案

解決方案1 0 2021-02-28 08:15:28

解決方案1
0 2021-02-28 08:15:28