use*_*421 8 javascript php quill
我认为这是一个非常常见的情况.我通常会有这样的形式:
<form method="post">
<textarea name="text"></textarea>
<input type="submit" value="Save" />
</form>
然后用PHP我会从表单中捕获数据($ _POST ['text']),我可以在另一个变量中使用它.
现在,我想使用Quill,因此用户可以使用一个很好的富文本编辑器.Quill似乎非常适合这个,文档非常详细.但是,出于某种原因,我无法找到如何将数据"发布"到表单中.有一个单一的样本页面可以满足我的需求,但我无法在我的示例中完全实现这一点,而在快速入门指南中,这个相当基本的(对我而言)主题没有讨论,我找不到这个在文档中也是.
Quill应该像这样使用吗？我在监督什么吗？是否有推荐的方法使这项工作？
这就是我目前拥有的:
<!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>
小智 12
您可以查看有关它的相关讨论https://github.com/quilljs/quill/issues/87
虽然这不是一个理想的解决方案:
var myEditor = document.querySelector('#editor')
var html = myEditor.children[0].innerHTML
小智 12
<form method="post" id="identifier">
<div id="quillArea"></div>
<textarea name="text" style="display:none" id="hiddenArea"></textarea>
<input type="submit" value="Save" />
</form>
如果您为表单提供标识符,那么使用jQuery可以执行以下操作:
var quill = new Quill ({...}) //definition of the quill
$("#identifier").on("submit",function(){
$("#hiddenArea").val($("#quillArea").html());
})
您可以使用quill.getContents()来获取delta,而不是HTML.
小智 5
这是我用来执行此操作的代码：
$(document).ready(function(){
$("#theform").on("submit", function () {
var hvalue = $('.ql-editor').html();
$(this).append("<textarea name='content' style='display:none'>"+hvalue+"</textarea>");
});
});基本上，它的作用是在表单中添加一个隐藏的textarea，然后将“ ql-editor”容器的内容（由Quill Editor在容器div中自动创建）复制到该容器中。然后将文本区域与表格一起提交。您需要将代码中使用的ID更改为容器标签的ID。
小智 5
我想出的一个解决方案是制作一个包装类。
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;
});
}
}
只需将类包含在页面上的某处，然后使用以下内容来初始化它：
let scopeEditor = new QuillWrapper("ScopeEditor", "Scope", { theme: "snow" });
您的 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>
我这样做：
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);
});
表格上的某处：
<div class="quill-textarea"></div>
<textarea style="display: none" id="detail" name="detail"></textarea>