How To Capture Content Typed In A Rich Text Editor Div - Quill Rich Editor
Solution 1:
Quill has it's own API for content retrieval. Replacing your click method with 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);
});
Here's a link to Quill's documentation for retrieval methods
Solution 2:
First add all the libraries for quilljs and use getText method to get the contents.
<!-- Theme included stylesheets --><linkhref="//cdn.quilljs.com/1.3.0/quill.snow.css"rel="stylesheet"><linkhref="//cdn.quilljs.com/1.3.0/quill.bubble.css"rel="stylesheet"><!-- Core build with no theme, formatting, non-essential modules --><linkhref="//cdn.quilljs.com/1.3.0/quill.core.css"rel="stylesheet"><scriptsrc="//cdn.quilljs.com/1.3.0/quill.core.js"></script><!-- Include stylesheet --><linkhref="https://cdn.quilljs.com/1.3.0/quill.snow.css"rel="stylesheet"><scriptsrc="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>Solution 3:
I see the question is jQuery-oriented, but the JavaScript concept is fairly parallel. Here is how I did it, for you Express folks. It seems to have worked very well in conjunction with express-sanitizer.
app.js
import expressSanitizer from'express-sanitizer'
app.use(expressSanitizer())
app.post('/route', async (req, res) => {
const title = req.body.article.titleconst content = req.sanitize(req.body.article.content)
// Do stuff with content
})
new.ejs
<head><linkhref="https://cdn.quilljs.com/1.3.2/quill.snow.css"rel="stylesheet"></head>
...
<formaction="/route"method="POST"><inputtype="text"name="article[title]"placeholder="Enter Title"><divid="editor"></div><inputtype="submit"onclick="return quillContents()" /></form>
...
<scriptsrc="https://cdn.quilljs.com/1.3.2/quill.js"></script><script>const quill = newQuill('#editor', {
theme: 'snow'
})
constquillContents = () => {
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 may extend your view in the future to have multiple forms, check out the MDN reference.
What we are doing here is creating a hidden form input that we assign the contents of the Quill Div, and then we bootleg the form submit and pass it through our function to finish it off.
Now, to test it, make a post with <script>alert()</script> in it, and you won't have to worry about injection exploits.
That's all there is to it.
What you want to focus on, in my opinion, is
document.querySelector('.ql-editor').innerHTMLPunch that into yourconsole.log()and you will see the HTML.
Solution 4:
My solution for version 1.2.2 is:
First import css and js in HEAD
<linkhref="https://cdn.quilljs.com/1.2.2/quill.snow.css"rel="stylesheet" /><scriptsrc="https://cdn.quilljs.com/1.2.2/quill.js"></script>In your HTML body declare a div with id
<div id="content_email" name="content_email"></div>
In your scripts section declare the editor
<script>var quill = newQuill('#content_email', {
theme: 'snow'
});
</script>And finally to get the content with HTML tags, put this inside an onclick function:
var content = document.querySelector('.ql-editor').innerHTML;
console.log("content: ", content);
Post a Comment for "How To Capture Content Typed In A Rich Text Editor Div - Quill Rich Editor"