How to grab content typed in a div text editor - Quill rich editor
I'm trying to get content that was injected into the Quill editor div http://quilljs.com/examples/ using jquery codes, but that doesn't seem to work. It works for other text inputs, but not the editor div. Below is the illustration below.
$(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>
I want it when I click the submit button. It also displays content typed in a text editor div and issues warnings about value types.
Any help would be appreciated
source to share
Quill has its own API for finding content. Replacing the click method with the following code should allow you to get the plain text value from your Quill instance.
$(document).on("click", "#SubmitButton", function(e) {
e.preventDefault();
var question = advancedEditor.getText();
var title = $("#title").val();
console.log(title, question);
});
source to share
First add all libraries for quilljs and use getText method to get content.
<!-- 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>
source to share
I see that the question is focused on jQuery, but the JavaScript concept is quite parallel. This is how I did it, for you express people. It seems to have worked very well in combination with the express cleaning disinfectant.
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 )
My view only has one form, so I used document.forms[0]
, but if you have multiple or might expand your view in the future to have multiple forms, check out the MDN link.
What we are doing here is creating a hidden form input that we assign to the content of the Quill Div and then we load the form submit and pass it through our function to complete it.
Now to test it, make a post with <script>alert()</script>
in it and you don't have to worry about injection exploits.
That's all it takes.
In my opinion, you want to focus on the
document.querySelector('.ql-editor').innerHTML
Punch to be in yoursconsole.log()
and you will see HTML.
source to share