リッチテキストエディタで入力されたコンテンツをキャプチャする方法div - Quillリッチエディタ

Question

クイルエディタhttp://quilljs.com/examples/のエディタdivで入力されたコンテンツをjqueryコードを使用して取得しようとしていますが、それは他のテキスト入力では機能しますが、エディタ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を持って理解されるであろう。クリックメソッドを次のコードに置き換えると、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の皆さんです。エクスプレスサニタイザーと一緒にうまく機能しているようです。

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）

私のビューには1つのフォームしかないので、document.forms[0]を使用しましたが、複数のフォームがある場合は、複数のビューが将来拡張される場合があります。

私たちがここでやっていることは、Quill Divの内容を割り当てる隠しフォーム入力を作成してから、フォームsubmitを停止し、関数を渡して終了させることです。

これをテストするには、<script>alert()</script>というポストを作成してください。注射の悪用を心配する必要はありません。

これだけです。

私の意見では、document.querySelector('.ql-editor').innerHTMLあなたのconsole.log()にパンチすれば、HTMLが表示されます。