评论是编辑ID。

Question

我有一个非常简单的表单，其中包含一个标题字段，并使用quill进入讨论。我已经尝试了我能想到的一切，但仍然无法用信息填充mysql数据库。我想我已经接近了，但还没到那里。我认为问题在于我使用了json和ajax。

这是我创建表单的html文件：

<!DOCTYPE>
<html>
    <head>
        <title>Discussions</title>
        <meta charset="UTF-8">
        <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
        <link href="https://cdn.quilljs.com/1.2.2/quill.snow.css" rel="stylesheet">
        <link href = "../css/discussionsEditor.css" rel = "stylesheet">
        <script src="https://cdn.quilljs.com/1.2.2/quill.js"></script>
    </head>
    <body>
    <div id="form-container" class="container">
        <form id="discussionForm" method = "post" action ="discussionsEditor.php" role="form">
            <div class="row">
                <div class="col-xs-8">
                    <div class="form-group">
                        <input class="form-control" name="title" type="text" placeholder="Title">
                    </div>
                </div>
            </div>
            <div class="row form-group">
                <input name="discussionContent" type="hidden">
                <div id="editor-container">
                </div>
            </div>
            <div class="row">
                <button class="btn btn-primary" type="submit">Submit</button>
            </div>
        </form>
    </div>

        <script>
            var quill = new Quill('#editor-container', {
                modules: {
                toolbar: [
                ['bold', 'italic'],
                ['link', 'blockquote', 'code-block', 'image'],
                [{ list: 'ordered' }, { list: 'bullet' }]
                ]
                },
                placeholder: 'Compose an epic...',
                theme: 'snow' 
                });
        </script>
        <script src="https://code.jquery.com/jquery-1.12.0.min.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
        <script src="../js/discussionsEditor.js"></script>

    </body>
</html>

这是我的javascript文件，我尝试使用json和ajax传输数据。

var form = document.querySelector('form');
form.onsubmit = function() {
  // Populate hidden form on submit
    var discussionContent = document.querySelector('input[name=discussionContent]');
    discussionContent.value = JSON.stringify(quill.getContents());

    var url ="discussionsEditor.php";
    var data = stringify(quill.getContents());
    alert( "the data is " + data);
        $.ajax({
        type: "POST",
        url : url,
        data : discussionContent,

        success: function ()
        {
            alert("Successfully sent to database");
        },
        error: function()
        {
        alert("Could not send to database");
        }       
    });
    return false;
};

最后这是我的php文件

<?php
            try
            {
                $pdo = new PDO('mysql:host=localhost; dbname=mydb', "user", "password");
                $pdo->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
                $pdo->exec('SET NAMES "utf8"');
            }
            catch (PDOException $e)
            {
                $output = 'Unable to connect to the database server:' . $e->getMessage();
                include '../output.html.php';
                exit();
            }

    $title = $_POST['title'];
    echo "<br />";
    echo "the title is " . $title;
            $discussionContent = $_POST['discussionContent'];
    echo "<br />";
    echo "the discussion content is ". $discussionContent;


    $sql = 'INSERT INTO Discussions(Title, DiscussionContent)
    Values(:Title, :DiscussionContent)';
    $statement = $pdo -> prepare($sql);
    $statement -> execute(array(':Title' => $title, ':DiscussionContent' => $discussionContent));

?>

如果我把'Denise＆＃39;在标题栏中，可爱的＆＃39;在quill讨论区域中，php文件中的echo语句给出了这个结果：

标题是Denise

讨论内容为{＆＃34; ops＆＃34;：[{＆＃34; insert＆＃34;：＆＃34; Cute \ n＆＃34;}}}

数据库中没有存储任何内容。

我将非常感谢，帮助或评论。谢谢

Answer 1

请尝试以下操作。它可能有助于解决问题：

评论是编辑ID。

var quill = new Quill（＆＃39;＃comment＆＃39;）; var cc = quill.container.firstChild.innerHTML;

现在cc将保存你的div元素的数据。可以插入到DB中。这只是一个例子。你可以使用它，如果它可以帮助你。

Answer 2

如果只需要从羽毛笔编辑器中获取Text值，则使用getText（）方法，如下所示：

var quillText = quill.getText();

如果您打算在数据库使用中存储HTML数据

var quillHtml = quill.root.innerHTML.trim();

将值传递给您的ajax数据，如下所示：

$.ajax({
    type: "POST",
    url : url,
    data: {editorContent : quillText },
    success: function (data,status, xhr)
    {
      if(xhr.status == 200) {
        alert("Successfully sent to database");
      }
    },error: function() {
       alert("Could not send to database");
    }       
});

之所以要发布为“ editorContent”，是因为您只需通过

即可获取发布的值

$_POST['editorContent']

在您的PHP脚本中。

进一步消毒后，将数据插入DB（HTML或TEXT）。希望对您有所帮助：-）

在表单中使用Quill并将数据传输到mysql数据库

2 个答案:

评论是编辑ID。