A Pen by Sina Bahrami on CodePen.
Created
January 11, 2023 07:21
-
-
Save mshahin364/c3b40b012d33381ed01c9b31d671bf52 to your computer and use it in GitHub Desktop.
Quill templating
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <div class="row" style="padding:1rem;"> | |
| <div class="col-sm-3"> | |
| <select class="custom-select ql-insertCustomTags"> | |
| <option value="">Guest</option> | |
| <option value="first_name" data-marker="[first_name]" data-title="FIRST NAME" data-colour="warning">First Name</option> | |
| <option value="last_name" data-marker="[last_name]" data-title="LAST NAME" data-colour="warning">Last Name</option> | |
| <option value="full_name" data-marker="[full_name]" data-title="FULL NAME" data-colour="warning">Full Name</option> | |
| </select> | |
| <p> | |
| <div id="editor"></div> | |
| </p> | |
| </div> | |
| </div> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| var Embed = Quill.import('blots/embed'); | |
| class TemplateMarker extends Embed { | |
| static create(value) { | |
| let node = super.create(value); | |
| node.setAttribute('class', 'badge badge-' + value.colour); | |
| //Set up the badge, and badge colour | |
| node.setAttribute('data-marker', value.marker); | |
| //The marker is the $ rel_table[id] reference | |
| node.setAttribute('data-title', value.title); | |
| // | |
| node.innerHTML = value.title; | |
| //The title is what the user sees in their editor | |
| return node; | |
| } | |
| static value(node) { | |
| return { | |
| marker: node.getAttribute('data-marker'), | |
| title: node.getAttribute('data-title'), | |
| }; | |
| } | |
| } | |
| TemplateMarker.blotName = 'TemplateMarker'; | |
| TemplateMarker.tagName = 'span'; | |
| Quill.register({ | |
| 'formats/TemplateMarker': TemplateMarker | |
| }); | |
| var toolbarOptions = ['bold', 'italic', 'underline', 'strike']; | |
| var options = { | |
| modules: { | |
| toolbar: toolbarOptions | |
| }, | |
| placeholder: 'This is where the magic happens...', | |
| theme: 'snow' | |
| }; | |
| var quill = new Quill('#editor', options); | |
| $('.ql-insertCustomTags').on('change', function() { | |
| let range = quill.getSelection(true); | |
| quill.insertEmbed( | |
| range.index, | |
| //Insert the TemplateMarker in the same range as the cursor is | |
| 'TemplateMarker', | |
| //This is the name of the Embed | |
| { | |
| colour: $(this).find(':selected').data('colour'), | |
| marker: $(this).find(':selected').data('marker'), | |
| title: $(this).find(':selected').data('title') | |
| }, | |
| //These are the variables to enter | |
| ); | |
| quill.insertText(range.index + 1, ' ', Quill.sources.USER); | |
| //Add a space after the marker | |
| quill.setSelection(range.index + 2, Quill.sources.SILENT); | |
| //Take the cursor to the end of the inserted TemplateMarker | |
| $(this).val(""); | |
| //Reset the dropdown | |
| }); | |
| quill.on('text-change', function(delta, oldDelta, source) { | |
| var delta = quill.getContents(); | |
| var delta_json = JSON.stringify(delta); | |
| console.log(delta_json); | |
| // This is what you store in the DB so that you can edit the template later | |
| var qdc = new window.QuillDeltaToHtmlConverter(delta.ops, window.opts_ || {}); | |
| // This requires the Quill Delta to HTML converter js | |
| // customOp is your custom blot op | |
| // contextOp is the block op that wraps this op, if any. | |
| // If, for example, your custom blot is located inside a list item, | |
| // then contextOp would provide that op. | |
| qdc.renderCustomWith(function(customOp, contextOp){ | |
| if (customOp.insert.type === 'TemplateMarker') { | |
| let val = customOp.insert.value; | |
| return val.marker; | |
| } | |
| }); | |
| var html = qdc.convert(); | |
| //Convert the Delta JSON to HTML | |
| console.log(html); | |
| //This is what will be used to render the template | |
| //You also need to store this in your DB | |
| }); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/quill/1.3.6/quill.min.js"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/browser/QuillDeltaToHtmlConverter.bundle.js"></script> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.2/css/bootstrap.min.css" rel="stylesheet" /> | |
| <link href="https://cdn.quilljs.com/1.3.4/quill.snow.css" rel="stylesheet" /> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment