Javascript 如何在表单中发布羽毛笔编辑器的内容？_Javascript_Php_Quill

Javascript 如何在表单中发布羽毛笔编辑器的内容？

javascript php

Javascript 如何在表单中发布羽毛笔编辑器的内容？,javascript,php,quill,Javascript,Php,Quill,我认为这是一种非常常见的情况。我通常会有以下表格： <form method="post"> <textarea name="text"></textarea> <input type="submit" value="Save" /> </form> 然后使用PHP，我将从表单（$_POST['text']）中捕获数据，并将其用于另一个变量中现在，我想使用，这样用户就有了一个不错的富文本编辑器。羽毛笔似乎非常适合这种情况，文

我认为这是一种非常常见的情况。我通常会有以下表格：

<form method="post">

<textarea name="text"></textarea>
<input type="submit" value="Save" />

</form>

然后使用PHP，我将从表单（$_POST['text']）中捕获数据，并将其用于另一个变量中

现在，我想使用，这样用户就有了一个不错的富文本编辑器。羽毛笔似乎非常适合这种情况，文档也非常详细。然而，由于某些原因，我无法找到如何将数据“发布”到表单中。有一个可以满足我的需求，但我无法在我的示例中完全实现这一点，在本文中，没有讨论这个相当基本的（对我来说）主题，我也无法在文档中找到这一点

羽毛笔应该这样用吗？我在监督什么吗？有没有一个推荐的方法来实现这一点

这就是我目前拥有的：

<!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>


试验
大胆的
斜体
你好，世界
变量编辑器=新羽毛笔（“#编辑器”{
模块：{toolbar:'#toolbar'}，
主题：“雪”
});

您可以查看关于它的相关讨论

虽然这不是一个理想的解决方案：

var myEditor = document.querySelector('#editor')
var html = myEditor.children[0].innerHTML

您可以使用quill.getContents（）代替HTML来获取增量。

以下是我用来实现此目的的代码：

$（文档）.ready（函数（）{
$（“#表单”）。关于（“提交”，函数（）{
var hvalue=$（'.ql editor'）.html（）；
$（this.append（“+hvalue+”）；
});
});请尝试以下操作：
<!-- 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>


var quill=新的quill（“#编辑器”{
模块：{
工具栏：[
[“粗体”、“斜体”]，
['link'，'blockquote'，'code block'，'image']，
[{
列表：“已订购”
}, {
列表：“子弹”
}]
]
},
占位符：“创作史诗…”，
主题：“雪”
});
$（“#表单”）.submit（函数（）{
$（“#description”）.val（quill.getContents（））；
});
这对我很有用：
<!-- 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>


var quill=新的quill（“#编辑器”{
模块：{
工具栏：[
[“粗体”、“斜体”]，
['link'，'blockquote'，'code block'，'image']，
[{
列表：“已订购”
}, {
列表：“子弹”
}]
]
},
占位符：“创作史诗…”，
主题：“雪”
});
$（“#表单”）.submit（函数（）{
$（“#description”）.val（quill.getContents（））；
});
我提出的一个解决方案是创建一个包装器类
class羽绒机{
/**
*@param targetDivId{string}编辑器将位于的div的id。
*@param targetInputId{string}隐藏输入的id
*@param quillOptions{any}quill的选项
*/
构造函数（targetDivId、targetInputId、quillOptions）{
//验证目标div是否存在
this.targetDiv=document.getElementById（targetDivId）；
如果（！this.targetDiv）抛出“Target div id无效”；
//验证目标输入是否存在
this.targetInput=document.getElementById（targetInputId）；
如果（！this.targetInput）抛出“目标输入id无效”；
//毛笔
this.quill=新的quill（“#”+targetDivId，quillOptions）；
//通过侦听on change事件将两个容器绑定在一起
this.quill.on（'text-change'，
() => {
this.targetInput.value=this.targetDiv.children[0].innerHTML；
});
}
}

只需在页面的某个位置包含该类，然后使用以下方法初始化它：
let scopeEditor=new QuillWrapper（“scopeEditor”、“Scope”、{theme:“snow”}）；

您的html大致如下所示：

我正在这样做：
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>

我知道这个问题已经解决，但我想补充一点信息。要获取Quill中的数据，不需要jQuery或其他技巧。我建议大家看看这个答案：

我还应该在这里指出：作者的问题至少是两年前提出的。所以，今天，我相信这是解决这个问题最可行的方法
有关Quill的更多信息、案例研究示例以及常见问题和答案，请访问以下链接：
这个解决方案对我来说很好：
    <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>


$（文档）.ready（函数（）{
$（“#emailForm”）。在（“提交”上，函数（）{
var hvalue=$（'.editor'）.text（）；
$（this.append（“+hvalue+”）；
});
});
此处已解决

添加隐藏的输入：
<input type="hidden" name="body"/>

这就是我所使用的，您所要做的就是为编辑器标记提供数据名
属性。这将创建一个隐藏的输入作为编辑器标记的同级，并将html内容放入其中。您可以获取内容的其他格式，如果您需要知道如何获取它们，我会保留未使用的变量
html:
我一直在研究这一点，似乎羽毛笔并不是专门为这一点设计的（）。令人遗憾的是，对于让用户键入富文本并将HTML保存在数据库中来说，Quill并不是一个好的解决方案。但是我仍然不完全理解为什么会这样，或者是否真的是这样，所以如果有人能够解释情况，请这样做。建议保存innerHTML和delta数组。但是将var question=advancedEditor.getText（）
替换为editor.container.innerHTML。谢谢。为什么这么难？如果这类事情很难实现，那么羽毛笔的用途是什么？这个答案似乎很简单+1在寻求谷歌解决方案之前，我就是这样做的。看起来很直截了当。对我来说问题也是一样的。他们已经创造了如此惊人的工具，但还没有完成
    <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>

<input type="hidden" name="body"/>

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 !!});

<div class="field editor" data-name="experience"></div>

let quill_element = document.querySelector('.editor')
let quill = new Quill(quill_element, {
    modules: {
        toolbar: '#toolbar'
    },
    placeholder: document.querySelector('.editor').getAttribute('data-placeholder'),
    theme: 'bubble',
});

let hiddenInput = document.createElement('input');
hiddenInput.type = 'hidden';
hiddenInput.name = quill_element.getAttribute('data-name');
quill_element.parentElement.appendChild(hiddenInput);

quill.on('text-change', function () {
    let justHtml = quill.root.innerHTML;
    hiddenInput.value = justHtml;
    // other formats if you like to use..
    var delta = editor.getContents();
    var text = editor.getText();
});