QuillJS is a beautiful open-source text editor for web applications. In this tutorial I’m going to show you how to configure it, and in the second step we will get the typed text.
You can find the full code here: https://jsfiddle.net/nfandrich/kdhjbo6m/
Step 1: Import QuillJS
Add the following script and the stylesheets to your header
element. I recommend downloading the files and uploading them to your web server.
<script src="https://cdn.quilljs.com/1.3.6/quill.min.js"></script> <link href="https://cdn.quilljs.com/1.3.6/quill.snow.css" rel="stylesheet"> <link href="https://cdn.quilljs.com/1.3.6/quill.bubble.css" rel="stylesheet">
Add the jquery library before the closing body
tag.
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js" integrity="sha512-bLT0Qm9VnAYZDflyKcBaQ2gg0hSYNQrJ8RilYldYQ1FxQYoCLtUjuuRuZo+fjqhx/qtq/1itJ0C2ejDxltZVFg==" crossorigin="anonymous"></script>
Step 2: Initialize Quill
Add a div
container where the editor will be loaded.
<div id="editor"></div>
To show quill editor in this container, add a inline script before the closing body
tag. What you will get is a basic quill editor. Let’s configure it.
<script> var editor = new Quill('#editor', { theme: 'snow' }); </script>
Step 3: Configure quill
Let’s change and extend the script from step 2 like this:
<script> // The activated editor functions var toolbarOptions = [ ['bold', 'italic'], [{ 'list': 'ordered'}, { 'list': 'bullet' }], ['link', 'underline', 'blockquote', 'code-block'] ]; // Quill configuration var options = { modules: { toolbar: toolbarOptions }, placeholder: 'Type something...', readOnly: false, theme: 'snow' }; // The quill instance var editor = new Quill('#editor', options); </script>
Explanation
- The
toolbarOptions
array includes all editor functions we want to offer to our users. - The
options
array includes some configuration settings. We can choose the editor theme, the placeholder text and much more.
Step 4: Get text from editor
With a simple button, a div container and three lines of javascript we can get the text from the editor like this:
<button id="submit" class="btn btn-primary mt-2">Submit</button> <div id="editorContent"></div>
Place the following javascript code below the quill instance:
// The quill instance var editor = new Quill('#editor', options); $(document).on('click', '#submit', function() { $('#editorContent').html(editor.root.innerHTML); });
If you type something and press the submit button, you will see the text from editor below the button.
Full code here: https://jsfiddle.net/nfandrich/kdhjbo6m/
Sources
- QuillJS Website (https://quilljs.com)
Struggling with image upload in PHP? In this post I explained how to upload images using the package Intervention Image.
Kommentar verfassen