Использование Quill в форме и передача данных в базу данных MySQL
У меня есть очень простая форма, которая имеет поле для заголовка и использует перо для входа в обсуждение. Я перепробовал все, что мог придумать, но все еще не могу заполнить базу данных 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» в поле заголовка и «cute» в поле обсуждения quill, операторы echo в php-файле дадут такой результат:
название Дениз
содержание обсуждения: {«ops»: [{«insert»: «Cute \ n»}]}
Ничего не хранится в базе данных.
Буду признателен за помощь или комментарии. Спасибо
Решение
Пожалуйста, попробуйте следующее. Это может помочь решить проблему:
var quill = new Quill (‘# comment’);
var cc = quill.container.firstChild.innerHTML;
Теперь cc будет хранить данные вашего элемента div. Они могут быть вставлены в DB. Это всего лишь пример. Вы можете использовать, если это поможет вам.
Другие решения
Используйте метод getText (), если вам просто нужно значение Text из редактора quill, как показано ниже:
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.
После дальнейшей очистки, вставьте данные в БД (либо HTML, либо TEXT).
Надеюсь, поможет 🙂