Question

我最近在Flask上使用了Ckeditor，但是我不得不切换到更灵活的编辑器，即Quill。但是与Ckeditor不同的是，我使用扩展名Flask-Ckeditor和{{ckeditor.create（）}}来创建ID为ckeditor的编辑器容器，而我可以使用表单的其他字段正常提交该编辑器容器，Quill提供了其他方法来仅检索容器的文本，Delta或InnerHtml。从昨天开始，我在获取编辑器容器的内容（html）时遇到了一些困难。我已经在网上搜索了几个小时，发现了一些可以接受的答案，例如How do I retrieve the contents of a Quill text editor，对其他人也有用。但我想我可能做错了事

这是我的html表单：

 <h1 class="title sign-in-up-title is-4">Article Title</h1>

  <input class="input homemade-input-dark" name="articleTitle" type="text" placeholder="Article title">

 <h1 class="title sign-in-up-title is-4">Article</h1><div id="standalone-container">

 <div id="toolbar-container">

  <span class="ql-formats">

   <select class="ql-font"></select>

  </span>

  <span class="ql-formats">

   <button class="ql-bold"></button>

   <button class="ql-italic"></button>

  </span>

 <div id="editor-container"></div>

 <input type="hidden" id="articleBody" name="articleBody" value="">

 <input type="submit" name="SubmitArticle" value="submit Article" class="button is-bold is-black">

每当容器字段发生更改时，我都会尝试使用JavaScript代码将容器的值分配给隐藏的输入字段：

   var editor = new Quill('#editor-container', {

   modules: {

     formula: true,

     syntax: true,

     toolbar: '#toolbar-container'

   },

   placeholder: 'Compose an epic...',

   theme: 'snow'

   });

   articleBody = document.getElementById('articleBody');


   editor.on('text-change', function() {

     articleBody.value = editor.root.innerHTML();

   });

所有表单数据都被提交到服务器，但articleBody始终为空，当我将其值设置为诸如“某些文本”之类的静态值时，它将被提交，否则上面的小函数没有传递任何内容。我知道这听起来有点愚蠢，但是这个过程难道不像Ckeditor那样简单吗？我希望你们能帮助我解决这个问题。非常感谢。：）

如何获取Quill文本编辑器对象的内容并将其传递到隐藏的输入字段中？

0 个答案: