Javascript 如何在表单中发布 Quill 编辑器的内容？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/44467204/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How do I post contents of a Quill editor in a form?
提问by user32421
I have what I think is a very common scenario. I would normally have this form:
我有我认为非常常见的情况。我通常会有这种形式：
<form method="post">
<textarea name="text"></textarea>
<input type="submit" value="Save" />
</form>
Then with PHP I would capture the data from the form ($_POST['text']) and I could use that in another variable.
然后使用 PHP，我将从表单 ($_POST['text']) 中捕获数据，然后我可以在另一个变量中使用它。
Now, I'd like to use Quillso users have a nice rich text editor instead. Quill seems very well suited for this and the documentation is very detailed. However, for some reason I can not find how I can "post" the data to the form. There is one single sample pagethat sort of does what I want, but I am unable to fully implement this in my sample, and in the quick start guidethis rather fundamental (to me) topic is not discussed, and I can not find this in the documentation either.
现在，我想使用Quill，以便用户拥有一个不错的富文本编辑器。Quill 似乎非常适合于此，并且文档非常详细。但是，由于某种原因，我找不到如何将数据“发布”到表单中。有一个示例页面可以满足我的要求，但是我无法在我的示例中完全实现这一点，并且在快速入门指南中没有讨论这个相当基本的（对我来说）主题，我找不到这个在文档中。
Is Quill supposed to be used like this? Am I overseeing something? Is there a recommended way to make this work?
Quill 应该这样使用吗？我在监督什么吗？有没有推荐的方法来完成这项工作？
This is what I currently have:
这是我目前拥有的：
<!doctype html>
<html>
<head>
<title>Test</title>
<meta charset="UTF-8" />
<link href="https://cdn.quilljs.com/1.0.0/quill.snow.css" rel="stylesheet">
</head>
<body>
<form method="post">
<!-- Create the toolbar container -->
<div id="toolbar">
<button class="ql-bold">Bold</button>
<button class="ql-italic">Italic</button>
</div>
<form method="post">
<!-- Create the editor container -->
<div id="editor">
<p>Hello World!</p>
</div>
<input type="submit" value="Save" />
</form>
<!-- Include the Quill library -->
<script src="https://cdn.quilljs.com/1.0.0/quill.js"></script>
<!-- Initialize Quill editor -->
<script>
var editor = new Quill('#editor', {
modules: { toolbar: '#toolbar' },
theme: 'snow'
});
</script>
</body>
</html>
回答by erw13n
You can check related discussion about it https://github.com/quilljs/quill/issues/87
你可以查看相关讨论https://github.com/quilljs/quill/issues/87
While this is not an ideal solution :
虽然这不是一个理想的解决方案：
var myEditor = document.querySelector('#editor')
var html = myEditor.children[0].innerHTML
回答by GazEdBro
<form method="post" id="identifier">
<div id="quillArea"></div>
<textarea name="text" style="display:none" id="hiddenArea"></textarea>
<input type="submit" value="Save" />
</form>
If you give the form an identifier, then using jQuery you can do the following:
如果您给表单一个标识符，那么使用 jQuery 您可以执行以下操作：
var quill = new Quill ({...}) //definition of the quill
$("#identifier").on("submit",function(){
$("#hiddenArea").val($("#quillArea").html());
})
Instead of the HTML you could use quill.getContents() to get the delta.
您可以使用 quill.getContents() 来获取增量，而不是 HTML。
回答by eLeMeNOhPi
Here's the code I used to do this:
这是我用来执行此操作的代码：
$(document).ready(function(){
$("#theform").on("submit", function () {
var hvalue = $('.ql-editor').html();
$(this).append("<textarea name='content' style='display:none'>"+hvalue+"</textarea>");
});
});Basically, what it does is to add a hidden textarea to your form and copy the content of the "ql-editor" container (This is automatically made by Quill Editor in the container div) to it. The textarea will then be submitted with the form. You need to change the IDs used in the code to the id of your container tags.
基本上，它所做的是向表单添加一个隐藏的文本区域，并将“ql-editor”容器（这是由容器 div 中的 Quill Editor 自动制作）的内容复制到其中。然后 textarea 将与表单一起提交。您需要将代码中使用的 ID 更改为容器标签的 ID。
回答by Maxwell Devos
A solution I came up with was to make a wrapper class.
我想出的一个解决方案是制作一个包装类。
class QuillWrapper {
/**
* @param targetDivId { string } The id of the div the editor will be in.
* @param targetInputId { string } The id of the hidden input
* @param quillOptions { any } The options for quill
*/
constructor(targetDivId, targetInputId, quillOptions) {
//Validate target div existence
this.targetDiv = document.getElementById(targetDivId);
if (!this.targetDiv) throw "Target div id was invalid";
//Validate target input existence
this.targetInput = document.getElementById(targetInputId);
if (!this.targetInput) throw "Target input id was invalid";
//Init Quill
this.quill = new Quill("#" + targetDivId, quillOptions);
//Bind the two containers together by listening to the on-change event
this.quill.on('text-change',
() => {
this.targetInput.value = this.targetDiv.children[0].innerHTML;
});
}
}
Simply include the class somewhere on your page and then use the following to initilize it:
只需将类包含在页面上的某处，然后使用以下内容来初始化它：
let scopeEditor = new QuillWrapper("ScopeEditor", "Scope", { theme: "snow" });
Your html would look roughly like this:
您的 html 大致如下所示：
<div class="form-group">
<label asp-for="Scope" class="control-label col-md-2"></label>
<div id="ScopeEditor"></div>
<input type="hidden" asp-for="Scope" class="form-control" />
</div>
回答by Emeka Mbah
I'm doing this:
我这样做：
var quill = new Quill('.quill-textarea', {
placeholder: 'Enter Detail',
theme: 'snow',
modules: {
toolbar: [
['bold', 'italic', 'underline', 'strike'],
[{ 'list': 'ordered'}, { 'list': 'bullet' }],
[{ 'indent': '-1'}, { 'indent': '+1' }]
]
}
});
quill.on('text-change', function(delta, oldDelta, source) {
console.log(quill.container.firstChild.innerHTML)
$('#detail').val(quill.container.firstChild.innerHTML);
});
Somewhere on the form:
表格上的某处：
<div class="quill-textarea"></div>
<textarea style="display: none" id="detail" name="detail"></textarea>
回答by Loa
I know this problem has already been resolved, but I would like to add a little more information. To obtain the data present in Quill, You don't need jQuery, or a different trick. I recommend looking at this answer:
我知道这个问题已经解决了，但我想补充一点信息。要获取 Quill 中存在的数据，您不需要 jQuery 或其他技巧。我建议看看这个答案：
https://stackoverflow.com/a/42541886/2910546
https://stackoverflow.com/a/42541886/2910546
I should also make a note here: The author's question was asked at least 2 years ago. So, today, I believe this is to be the most viable way to address the question.
我还应该在这里做个笔记：作者的问题至少在 2 年前就被问到了。所以，今天，我相信这是解决这个问题的最可行的方法。
For more information on Quill, with case study examples, and common questions with answers, please kindly visit the following link:
有关 Quill 的更多信息、案例研究示例以及常见问题和答案，请访问以下链接：
回答by Mahmoud
this solution works fine for me:
这个解决方案对我来说很好用：
<script type="text/javascript">
$(document).ready(function(){
$("#emailForm").on("submit", function () {
var hvalue = $('.editor').text();
$(this).append("<textarea name='message' style='display:none'>"+hvalue+"</textarea>");
});
});
</script>
回答by ztvmark
Solved here
在这里解决
How to save Quill.js values to Database Laravel 5.6
如何将 Quill.js 值保存到 Laravel 5.6 数据库
Add a hidden input :
添加隐藏输入：
<input type="hidden" name="body"/>
Js code :
JS代码：
var form = document.getElementById("FormId"); // get form by ID
form.onsubmit = function() { // onsubmit do this first
var name = document.querySelector('input[name=body]'); // set name input var
name.value = JSON.stringify(quill.getContents()); // populate name input with quill data
return true; // submit form
}
To set contents to quill do this :
quill.setContents({!! $post->body !!});
回答by Erich García
Try this:
尝试这个：
<!-- Include the Quill library -->
<script src="https://cdn.quilljs.com/1.3.6/quill.js"></script>
<!-- Initialize Quill editor -->
<script>
var quill = new Quill('#editor', {
modules: {
toolbar: [
['bold', 'italic'],
['link', 'blockquote', 'code-block', 'image'],
[{
list: 'ordered'
}, {
list: 'bullet'
}]
]
},
placeholder: 'Compose an epic...',
theme: 'snow'
});
$("#form").submit(function() {
$("#description").val(quill.getContents());
});
</script>
回答by Erich García
This worked for me:
这对我有用：
<!-- Include the Quill library -->
<script src="https://cdn.quilljs.com/1.3.6/quill.js"></script>
<!-- Initialize Quill editor -->
<script>
var quill = new Quill('#editor', {
modules: {
toolbar: [
['bold', 'italic'],
['link', 'blockquote', 'code-block', 'image'],
[{
list: 'ordered'
}, {
list: 'bullet'
}]
]
},
placeholder: 'Compose an epic...',
theme: 'snow'
});
$("#form").submit(function() {
$("#description").val(quill.getContents());
});
</script>
