Question

我正在尝试使用jquery代码获取已在主播编辑器http://quilljs.com/examples/的编辑器div中键入的内容，但它似乎不起作用。它适用于其他文本输入，但不适用于编辑器div。我在下面有一个正在运行的插图。

>>> import lxml.html
>>> root = lxml.html.document_fromstring('<p>stuff<p>more <br><b>stuff</b>bla')
>>> root.text_content()
'stuffmore stuffbla'

$(function(){
$(document).on("click", "#SubmitButton", function(e) {
e.preventDefault();

{				
		var question = $("#question").val();		
        var title = $("#title").val();
		
        alert (question);
  		alert (title);
			
		e.preventDefault();	
}
});	
});

advancedEditor = new Quill('#question', {
  modules: {
    'toolbar': 
	{  
		container: '#toolbar'
    },
    'link-tooltip': true,
    'image-tooltip': true,
    'multi-cursor': true
  },
  styles: false,
  theme: 'snow'
});

我希望当我点击提交按钮时，它还会捕获文本编辑器div中输入的内容并提醒值类型。

任何帮助将不胜感激

Answer 1

Quill拥有自己的内容检索API。使用以下代码替换click方法应该允许您从Quill实例中获取纯文本值。

$(document).on("click", "#SubmitButton", function(e) {
  e.preventDefault();   
  var question = advancedEditor.getText();
  var title = $("#title").val();    
  console.log(title, question);
});

Here's a link to Quill's documentation for retrieval methods

Answer 2

首先添加quilljs的所有库，并使用getText方法获取内容

    <!-- Theme included stylesheets -->
    <link href="//cdn.quilljs.com/1.3.0/quill.snow.css" rel="stylesheet">
    <link href="//cdn.quilljs.com/1.3.0/quill.bubble.css" rel="stylesheet">

    <!-- Core build with no theme, formatting, non-essential modules -->
    <link href="//cdn.quilljs.com/1.3.0/quill.core.css" rel="stylesheet">
    <script src="//cdn.quilljs.com/1.3.0/quill.core.js"></script>
    <!-- Include stylesheet -->
    <link href="https://cdn.quilljs.com/1.3.0/quill.snow.css" rel="stylesheet">
    <script src="https://cdn.quilljs.com/1.3.0/quill.js"></script>
    <script>
    document.getElementById("myBtn").addEventListener("click", function(){
        var text =quill.getText( 0, 50); 
    alert(text);
    });
    </script>

Answer 3

我对 1.2.2 版本的解决方案是：

首先在 HEAD 中导入 css 和 js

<link href="https://cdn.quilljs.com/1.2.2/quill.snow.css" rel="stylesheet" />
<script src="https://cdn.quilljs.com/1.2.2/quill.js"></script>

在你的 HTML 正文中声明一个带有 id 的 div

<div id="content_email" name="content_email"></div>

在你的脚本部分声明编辑器

<script>
  var quill = new Quill('#content_email', {
    theme: 'snow'
  });
</script>

最后为了获得带有 HTML 标签的内容，把它放在一个 onclick 函数中：

var content = document.querySelector('.ql-editor').innerHTML;
console.log("content: ", content);

Answer 4

我看到问题是面向jQuery，但JavaScript概念是相当平行的。我是这样做的，对你来说快递人。它似乎与快速消毒剂配合使用效果非常好。

<强> app.js

 import expressSanitizer from 'express-sanitizer'

 app.use(expressSanitizer())

 app.post('/route', async (req, res) => {
     const title = req.body.article.title
     const content = req.sanitize(req.body.article.content)
     // Do stuff with content
 })

<强> new.ejs

 <head>
     <link href="https://cdn.quilljs.com/1.3.2/quill.snow.css" rel="stylesheet">
 </head>

 ...

 <form action="/route" method="POST">
     <input type="text" name="article[title]" placeholder="Enter Title">
     <div id="editor"></div>
     <input type="submit" onclick="return quillContents()" />
 </form>

 ...

 <script src="https://cdn.quilljs.com/1.3.2/quill.js"></script>
 <script>
     const quill = new Quill('#editor', {
         theme: 'snow'
     })

     const quillContents = () => {
         const form = document.forms[0]
         const editor = document.createElement('input')

         editor.type = 'hidden'
         editor.name = 'article[content]'
         editor.value = document.querySelector('.ql-editor').innerHTML
         form.appendChild(editor)

         return form.submit()
     }
</script>

express-sanitizer（https://www.npmjs.com/package/express-sanitizer）

document.forms（https://developer.mozilla.org/en-US/docs/Web/API/Document/forms）

我的视图只有一个表单，因此我使用了document.forms[0]，但是如果你有多个或者可能会在将来扩展你的视图以拥有多个表单，请查看MDN参考。

我们在这里做的是创建一个隐藏的表单输入，我们分配Quill Div的内容，然后我们将表单提交，并通过我们的函数传递给它以完成它。

现在，要测试它，请在其中发布<script>alert()</script>的帖子，您不必担心注入漏洞。

这就是它的全部内容。

我认为，您要关注的是document.querySelector('.ql-editor').innerHTML将其打入您的console.log()，您将看到HTML。

如何捕获在富文本编辑器div中键入的内容 - Quill rich editor

4 个答案: