Added quill editor

resources/views/app/patient/send_email.blade.php

@@ -1,3 +1,8 @@
+<style>
+#outgoingEmailTemplate .ql-editor {
+    padding: 0 15px 15px 15px;
+}
+</style>
 <div class="d-inline" id="outgoingEmailTemplate">
     <div moe wide center class="ml-auto">
         <a show href="" start>Send Email</a>
@@ -31,7 +36,8 @@
                 </div>
                 <div class="form-group">
                     <label for="" class="control-label">Body</label>
-                    <textarea rte class="form-control " name="htmlBody" v-model="template.default_message_body_tpl"></textarea>
+                    <div id="htmlBody"></div>
+                    <input type="hidden" name="htmlBody" v-model="template.default_message_body_tpl" />
                 </div>
             </div>
             <div class="form-group">
@@ -49,33 +55,44 @@
             var outgoingEmailTemplate = new Vue({
                 el: '#outgoingEmailTemplateComponent',
                 data: {
-                    templates:[],
-                    template:{
-                        default_from_email:'carelink@leadershiphealth.org'
+                    templates: [],
+                    template: {
+                        default_from_email: 'carelink@leadershiphealth.org'
                     },
-                    fromEmailAddresses:[
+                    fromEmailAddresses: [
                         'carelink@leadershiphealth.org'
                     ]
                 },
                 methods: {
-                    setTemplate: function(evt){
+                    setTemplate: function(evt) {
                         var self = this;
                         var input = evt.target;
                         var value = parseInt(evt.target.value);
-                        if(isNaN(value)){
+                        if (isNaN(value)) {
                             self.template = {};
                             return;
                         }
                         self.template = self.templates[value];
+                        self.quill.root.innerHTML = self.template.default_message_body_tpl;
                     },
-                    loadOugoingEmailTemplates: function(){
+                    loadOugoingEmailTemplates: function() {
                         var self = this;
-                        $.get("{{ route('outgoingEmailTemplates') }}", {}, function(response){
+                        $.get("{{ route('outgoingEmailTemplates') }}", {}, function(response) {
                             self.templates = response.data;
                         }, 'json');
                     },
+                    initQuillEditor: function() {
+                        var self = this;
+                        self.quill = new Quill('#htmlBody', {
+                            theme: 'snow',
+                        });
+                        self.quill.on('text-change', function (delta, oldDelta, source) {
+                            $('[name="htmlBody"]').val(self.quill.root.innerHTML);
+                        });
+                    },
                     init: function() {
                         this.loadOugoingEmailTemplates();
+                        this.initQuillEditor();
                     }
                 },
                 mounted: function() {