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

Question

我试图使用jQuery代码来获取已在编辑器div编辑器中输入的内容，但它似乎不起作用。它适用于其他文本输入，但不适用于编辑器div。下面有一个正在运行的插图。

$(function(){ 
 
$(document).on("click", "#SubmitButton", function(e) { 
 
e.preventDefault(); 
 

 
{ \t \t \t \t 
 
\t \t var question = $("#question").val(); \t \t 
 
     var title = $("#title").val(); 
 
\t \t 
 
     alert (question); 
 
    \t \t alert (title); 
 
\t \t \t 
 
\t \t e.preventDefault(); \t 
 
} 
 
}); \t 
 
}); 
 

 
advancedEditor = new Quill('#question', { 
 
    modules: { 
 
    'toolbar': 
 
\t { 
 
\t \t container: '#toolbar' 
 
    }, 
 
    'link-tooltip': true, 
 
    'image-tooltip': true, 
 
    'multi-cursor': true 
 
    }, 
 
    styles: false, 
 
    theme: 'snow' 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="http://cdn.quilljs.com/0.20.1/quill.js"></script> 
 
<link href="http://cdn.quilljs.com/0.20.1/quill.snow.css" rel="stylesheet"/> 
 

 
<form id="postform" name="postform" action=""> 
 

 
Title 
 
<input type="text" name="title" id="title"> 
 
<br> 
 
     
 
     
 
<div class="advanced-wrapper" id="qs" style="width:95%; padding:0px; margin:0px;"> 
 
     <div class="toolbar-container" id="toolbar"><span class="ql-format-group"> 
 
      <select title="Font" class="ql-font"> 
 
       <option value="sans-serif" selected>Sans Serif</option> 
 
       <option value="Georgia, serif">Serif</option> 
 
       <option value="Monaco, 'Courier New', monospace">Monospace</option> 
 
      </select> 
 
      <select title="Size" class="ql-size"> 
 
       <option value="10px">Small</option> 
 
       <option value="13px" selected>Normal</option> 
 
       <option value="18px">Large</option> 
 
       <option value="32px">Huge</option> 
 
      </select></span><span class="ql-format-group"><span title="Bold" class="ql-format-button ql-bold"></span><span class="ql-format-separator"></span><span title="Italic" class="ql-format-button ql-italic"></span><span class="ql-format-separator"></span><span title="Underline" class="ql-format-button ql-underline"></span></span><span class="ql-format-group"> 
 
      <select title="Text Color" class="ql-color"> 
 
    
 
       <option value="rgb(187, 187, 187)"></option> 
 
       <option value="rgb(161, 0, 0)"></option> 
 
       
 
      </select><span class="ql-format-separator"></span> 
 
      <select title="Background Color" class="ql-background"> 
 
       <option value="rgb(0, 0, 0)"></option> 
 
       <option value="rgb(230, 0, 0)"></option> 
 
      </select><span class="ql-format-separator"></span> 
 
      <select title="Text Alignment" class="ql-align"> 
 
       <option value="left" selected></option> 
 
       <option value="center"></option> 
 
       <option value="right"></option> 
 
       <option value="justify"></option> 
 
      </select></span><span class="ql-format-group"><span title="Link" class="ql-format-button ql-link"></span><span class="ql-format-separator"></span><span title="Image" class="ql-format-button ql-image"></span><span class="ql-format-separator"></span><span title="List" class="ql-format-button ql-list"></span></span></div> 
 
      <div id="question" class="editor-container"></div> 
 
     </div> 
 

 
<input type="submit" class="btn btn-info" id="SubmitButton" value="Post Your Question" /> 
 
     </form>

我想，当我点击提交按钮，它还捕捉在文本编辑器DIV和警报值类型输入的内容。

任何帮助将不胜感激

Answer 1

奎尔有它自己的内容检索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

我看到的问题是，jQuery的导向，但JavaScript的概念相当平行。这就是我为什么做的，为你表达的人。它似乎与express-sanitizer一起工作得很好。

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。