如何捕獲在富文本編輯器 div 中鍵入的內容 - Quill 富文本編輯器

Question

我正在嘗試使用 jquery 代碼獲取在 quill 編輯器http://quilljs.com/examples/的編輯器 div 中輸入的內容，但它似乎不起作用。 它適用於其他文本輸入，但不適用於編輯器 div。 我在下面有一個正在運行的插圖。

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

 <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

Quill 有自己的 API 用於內容檢索。 用下面的代碼替換你的 click 方法應該允許你從你的 Quill 實例中獲取純文本值。

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

這是 Quill 檢索方法文檔的鏈接

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 的人。 它似乎與 express-sanitizer 結合使用效果很好。

應用程序.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
 })

新的.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。

Answer 4

我對 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);