如何捕獲在富文本編輯器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。