| | |
| | | editor.className = 'editor'; |
| | | toolbar = document.createElement('div'); |
| | | toolbar.className = 'toolbar'; |
| | | const image = textarea.dataset.allowimage === true ? `<button type="button" class="ql-jvb_image">\n ${dashboardSettings.icons.image}\n </button>` : ''; |
| | | const image = textarea.dataset.allowimage === true ? `<button type="button" class="ql-jvb_image">\n ${window.getIcon('image')}\n </button>` : ''; |
| | | toolbar.id = `toolbar-${textarea.id}`; |
| | | toolbar.innerHTML = ` |
| | | <span class="ql-formats"> |
| | | <button type="button" class="ql-p"> |
| | | ${jvbSettings.icons.paragraph} |
| | | <i class="icon icon-paragraph"></i> |
| | | </button> |
| | | <button type="button" class="ql-h1"> |
| | | ${jvbSettings.icons.h1} |
| | | <i class="icon icon-text-h-one"></i> |
| | | </button> |
| | | <button type="button" class="ql-h2"> |
| | | ${jvbSettings.icons.h2} |
| | | <i class="icon icon-text-h-two"></i> |
| | | </button> |
| | | <button type="button" class="ql-h3"> |
| | | ${jvbSettings.icons.h3} |
| | | <i class="icon icon-text-h-three"></i> |
| | | </button> |
| | | </span> |
| | | <span class="ql-formats"> |
| | | <button type="button" class="ql-jvb_bold"> |
| | | ${jvbSettings.icons['bold']} |
| | | <i class="icon icon-text-b-fi"></i> |
| | | </button> |
| | | <button type="button" class="ql-jvb_italic"> |
| | | ${jvbSettings.icons['italic']} |
| | | <i class="icon icon-text-italic"></i> |
| | | </button> |
| | | <button type="button" class="ql-jvb_underline"> |
| | | ${jvbSettings.icons['underline']} |
| | | <i class="icon icon-text-underline"></i> |
| | | </button> |
| | | <button type="button" class="ql-jvb_strike"> |
| | | ${jvbSettings.icons['strike']} |
| | | <i class="icon icon-text-strikethrough"></i> |
| | | </button> |
| | | </span> |
| | | <span class="ql-formats"> |
| | | <button type="button" class="ql-jvb_list" value="bullet"> |
| | | ${jvbSettings.icons['list-bullets']} |
| | | <i class="icon icon-list-dashes"></i> |
| | | </button> |
| | | <button type="button" class="ql-jvb_list" value="ordered"> |
| | | ${jvbSettings.icons['list-numbers']} |
| | | <i class="icon icon-list-numbers"></i> |
| | | </button> |
| | | </span> |
| | | <span class="ql-formats"> |
| | | <button type="button" class="ql-jvb_align" value="left"> |
| | | ${jvbSettings.icons['align-left']} |
| | | <i class="icon icon-text-align-left"></i> |
| | | </button> |
| | | <button type="button" class="ql-jvb_align" value="center"> |
| | | ${jvbSettings.icons['align-center']} |
| | | <i class="icon icon-text-align-center"></i> |
| | | </button> |
| | | <button type="button" class="ql-jvb_align" value="right"> |
| | | ${jvbSettings.icons['align-right']} |
| | | <i class="icon icon-text-align-right"></i> |
| | | </button> |
| | | </span> |
| | | <span class="ql-formats"> |
| | | <button type="button" class="ql-jvb_link"> |
| | | ${jvbSettings.icons.link} |
| | | <i class="icon icon-link"></i> |
| | | </button> |
| | | ${image} |
| | | </span> |
| | |
| | | h1: function() { this.quill.format('header', 1); }, |
| | | h2: function() { this.quill.format('header', 2); }, |
| | | h3: function() { this.quill.format('header', 3); }, |
| | | jvb_bold: function() {this.quill.format('bold', true)}, |
| | | jvb_italic: function() {this.quill.format('italic', true)}, |
| | | jvb_strike: function() {this.quill.format('strike', true)}, |
| | | jvb_underline: function() {this.quill.format('underline', true)}, |
| | | 'jvb_bold': function() {this.quill.format('bold', true)}, |
| | | 'jvb_italic': function() {this.quill.format('italic', true)}, |
| | | 'jvb_strike': function() {this.quill.format('strike', true)}, |
| | | 'jvb_underline': function() {this.quill.format('underline', true)}, |
| | | 'jvb_align': function(value) { |
| | | this.quill.format('align', value === this.quill.getFormat().list ? false : value); |
| | | }, |
| | |
| | | if (value) { |
| | | const range = this.quill.getSelection(); |
| | | if (range == null || range.length === 0) return; |
| | | // Get the existing link if any |
| | | const preview = this.quill.getText(range.index, range.length); |
| | | const existingLink = this.quill.getFormat(range).link; |
| | | |
| | | // Create modal for link input |
| | |
| | | formData.append('post_id', objectID); |
| | | } |
| | | |
| | | // Show loading state |
| | | if (window.jvbLoading) { |
| | | window.jvbLoading.showLoading('Uploading image...', 'Processing Upload'); |
| | | } |
| | | |
| | | try { |
| | | const response = await fetch( |
| | | `${jvbSettings.api}uploads/`, |
| | | { |
| | | method: 'POST', |
| | | headers: { |
| | | 'X-WP-Nonce': jvbSettings.nonce |
| | | 'X-WP-Nonce': window.auth.getNonce() |
| | | }, |
| | | body: formData |
| | | } |
| | |
| | | 'italic': true |
| | | }, true); |
| | | } finally { |
| | | if (window.jvbLoading) { |
| | | window.jvbLoading.hide(); |
| | | } |
| | | input.remove(); |
| | | } |
| | | }; |