【问题标题】:How do I post contents of a Quill editor in a form?如何在表单中发布 Quill 编辑器的内容?
【发布时间】:2017-06-09 21:53:18
【问题描述】:

我有一个我认为很常见的情况。我通常会有这种形式:

<form method="post">

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

</form>

然后使用 PHP,我会从表单 ($_POST['text']) 中捕获数据,然后我可以在另一个变量中使用它。

现在,我想使用Quill,这样用户就有了一个不错的富文本编辑器。 Quill 似乎非常适合这一点,并且文档非常详细。但是,由于某种原因,我找不到如何将数据“发布”到表单。有一个single sample page 可以满足我的要求,但我无法在我的示例中完全实现这一点,并且在quick start guide 中没有讨论这个相当基本的(对我而言)主题,我找不到这个在文档中。

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>

【问题讨论】:

  • 我一直在研究这个问题,但似乎 Quill 并不是为此而生的 (github.com/quilljs/quill/issues/774)。令人遗憾的是,对于让用户键入富文本并将 HTML 保存在数据库中,Quill 似乎不是一个好的解决方案。但我仍然不完全理解为什么或是否真的是这种情况,所以如果有人能说明情况,请这样做。
  • 这是最近的讨论 (github.com/quilljs/quill/issues/1234)。建议是保存 innerHTML 和 deltas 数组。 To post the innerHTML see this answer 但将 var question = advancedEditor.getText() 替换为 editor.container.innerHTML

标签: javascript php quill


【解决方案1】:
<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() 代替 HTML 来获取增量。

【讨论】:

  • 如果只想获取内容,可以在选择器中添加.ql-editor$("#hiddenArea").val($("#quillArea .ql-editor").html());
  • 使用 getContents() 检索增量时,还应将其字符串化为 json,否则将发送 [Object object]。 $("#hiddenArea").val(JSON.stringify(quill.getContents()))
【解决方案2】:

你可以查看相关讨论https://github.com/quilljs/quill/issues/87

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

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

【讨论】:

  • 谢谢。为什么这么难?这种事情这么难实现,Quill的目的是什么?
  • 这个答案似乎很简单... +1
  • 这是我在向 Google 寻求解决方案之前的处理方式。看起来很简单。
  • 对我来说问题是一样的。他们创造了如此惊人的工具,多年来没有人做过。但他们并没有告诉如何获取数据以形成和发布!这个插件的本质是什么 :) 聪明!不是!
  • 它是否回答了问题并将所有内容添加到提供的文本字段中?我在答案中看不到任何方法。只收集数据。谢谢!
【解决方案3】:

在这里解决

How to save Quill.js values to Database Laravel 5.6

添加隐藏输入:

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

js代码:

var form = document.getElementById("FormId");

form.onsubmit = function() {
  var name = document.querySelector('input[name=body]');
  name.value = JSON.stringify(quill.getContents());

  return true; // submit form
}

要将内容设置为羽毛笔,请执行以下操作:

quill.setContents({!! $post->body !!});

【讨论】:

    【解决方案4】:

    我想出的一个解决方案是制作一个包装类。

    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>
    

    【讨论】:

      【解决方案5】:

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

      https://stackoverflow.com/a/42541886/2910546

      我还应该在这里做一个说明:作者的问题至少是在 2 年前提出的。所以,今天,我相信这是解决这个问题的最可行的方法。

      有关 Quill 的更多信息、案例研究示例以及常见问题及答案,请访问以下链接:

      https://github.com/loagit/Quill-Examples-and-FAQ

      【讨论】:

      • 您知道是否可以获取 HTML 内容,但尊重文档中的新行?因为似乎默认情况下,编辑器会在初始化后立即将所有 HTML 放在一行中。
      • @DigitalNinja 我认为 Quill 本身没有该功能,但您可以使用任何 HTML Beautifier 获得您想要的。有online tools 能够执行这种类型的过程,以及javascript 中的库,例如highlight js。两者都可以给你想要的结果。
      【解决方案6】:

      我正在这样做:

      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>
      

      【讨论】:

        【解决方案7】:

        这就是我使用的,您所要做的就是为您的编辑器标签提供data-name 属性。这将创建一个隐藏输入作为编辑器标签的兄弟,并将 html 内容放入其中。您可以获取其他格式的内容,如果您需要知道如何获取它们,我会留下未使用的变量。

        html:

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

        js:

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

        【讨论】:

          【解决方案8】:

          这是我用来执行此操作的代码:

          $(document).ready(function(){
            $("#theform").on("submit", function () {
              var hvalue = $('.ql-editor').html();
              $(this).append("<textarea name='content' style='display:none'>"+hvalue+"</textarea>");
             });
          });

          基本上,它的作用是在表单中添加一个隐藏的文本区域,并将“ql-editor”容器的内容(这是由 Quill Editor 在容器 div 中自动生成的)复制到它。然后文本区域将与表单一起提交。您需要将代码中使用的 ID 更改为容器标签的 ID。

          【讨论】:

            【解决方案9】:

            链接 CSS:

            <!-- CSS Implementing Plugins -->
            <link rel="stylesheet" href="https://htmlstream.com/preview/front-v4.2/html/assets/css/vendor.min.css">
            <link rel="stylesheet" href="https://htmlstream.com/preview/front-v4.2/html/assets/vendor/bootstrap-icons/font/bootstrap-icons.css">
            <!-- CSS Front Template -->
            <link rel="stylesheet" href="https://htmlstream.com/preview/front-v4.2/html/assets/css/theme.min.css?v=1.0">
            

            链接 JS:

            <!-- JS Implementing Plugins -->
            <script src="https://htmlstream.com/preview/front-v4.2/html/assets/js/vendor.min.js"></script>
            <!-- JS Front -->
            <script src="https://htmlstream.com/preview/front-v4.2/html/assets/js/theme.min.js"></script>
            

            en mi html:

            <form id="form-perfil" name="form-perfil" method="POST">
              <!-- Form Group -->
              <div class="row form-group">
                <label class="col-sm-3 col-form-label input-label">BIO</label>
            
                <div class="col-sm-9">
                  <!-- Quill -->
                  <div class="quill-custom">
                    <div
                      class="js-quill"
                      style="min-height: 15rem;"
                      data-hs-quill-options='{
                                   "placeholder": "Type your message...",
                                    "modules": {
                                      "toolbar": [
                                        ["bold", "italic", "underline", "strike", "link", "image", "blockquote", "code", {"list": "bullet"}]
                                      ]
                                    }
                                   }'
                    >
                      Creative mind at Htmlstream
                    </div>
                  </div>
                  <!-- End Quill -->
                  <textarea name="text_quill" style="display: none;" id="text_quill"></textarea>
                </div>
              </div>
              <!-- End Form Group -->
            
              <button type="submit" class="mt-3 float-right btn btn-primary">Enviar formulario</button>
              <!-- End Form Group -->
            </form>
            

            恩米 JS:

            // INITIALIZATION OF QUILLJS EDITOR
            // =======================================================
            var quill = $.HSCore.components.HSQuill.init('.js-quill');
            
            // =======================================================
            $("#form-perfil").on("submit", function (e) { 
              e.preventDefault(); //No se activará la acción predeterminada del evento
            
              $("#text_quill").val($(".ql-editor").html());
            
              var formData = new FormData($("#form-perfil")[0]);
              $.ajax({
                url: "ajax/pago_administrador.php",
                type: "POST",
                data: formData,
                contentType: false,
                processData: false,
                success: function (datos) {  },             
              });
            });
            

            【讨论】:

            • 此答案没有提供其他答案未涵盖的任何新内容,也不包括对代码的用途的任何解释。
            【解决方案10】:

            试试这个:

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

            【讨论】:

              【解决方案11】:

              这个解决方案对我来说很好:

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

              【讨论】:

                【解决方案12】:

                我解决了这个问题如下。

                在将成为编辑器容器的元素中,我设置了一个 like 属性 data-input-name="something"

                在实例化编辑器之后,我只编写了一个简单的代码,将羽毛笔的内部值分配给隐藏的输入

                quill.on('text-change', function() {
                  const content = quill.root.innerHTML.trim();
                  const targetId = quill.container.dataset.inputName
                  document.querySelector(`#${targetId}`).setAttribute("value", content);
                });
                

                【讨论】:

                  【解决方案13】:

                  查看这个 repo,它可能会有所帮助。它很容易安装。

                  https://github.com/tangien/quilljs-textarea

                  AutoInitialize Quilljs 只需将属性 data-quilljs 添加到 textarea 元素,其余的插件将处理它。

                  就是这样!

                  【讨论】:

                    猜你喜欢
                    • 2021-08-05
                    • 1970-01-01
                    • 1970-01-01
                    • 2014-09-09
                    • 1970-01-01
                    • 1970-01-01
                    • 1970-01-01
                    • 1970-01-01
                    • 2019-04-29
                    相关资源
                    最近更新 更多