Explorar o código

#3612 Quill: Allow to insert images with Ctrl+v and use custom uploader.

RomanL %!s(int64=4) %!d(string=hai) anos
pai
achega
1e755bff84
Modificáronse 2 ficheiros con 73 adicións e 42 borrados
  1. 51 41
      inc/js/editor.quill.js
  2. 22 1
      modules/boonex/timeline/js/post.js

+ 51 - 41
inc/js/editor.quill.js

@@ -9,38 +9,39 @@ function bx_editor_init(oEditor, oParams){
     hljs.configure({   
         languages: ['javascript', 'php', 'html', 'css']
     });
-    if (oParams.toolbar){
-        oParams.toolbar = {
-            container: oParams.toolbar,
-                handlers: {
-                'embed': function(value) {
-                    var range = oEditor.getSelection();
-                    bx_prompt(_t('_sys_txt_quill_tooltip_embed_popup_header'), '', function(oPopup){
-                        sLink = $(oPopup).find("input[type = 'text']").val()
-                        $.getJSON(oParams.root_url + 'embed.php?', {a: 'get_link', l: sLink}, function(aData){
-                            if (range) {
-                                oEditor.clipboard.dangerouslyPasteHTML(range.index, "</p>&#8205; <p>&#8205; </p>", 'api');
-                                oEditor.insertEmbed(range.index+2, 'embed-link', {source: sLink, inlinecode : aData.code}, 'api');
-                            }
-                            else{
-                                 oEditor.insertEmbed(0, 'embed-link', {source: sLink, inlinecode : aData.code}, 'api');
-                            }
+
+    bEmptyToolbar = oParams.toolbar == false ? true : false
+
+    oParams.toolbar = {
+        container: bEmptyToolbar ? [] : oParams.toolbar,
+            handlers: {
+            'embed': function(value) {
+                var range = oEditor.getSelection();
+                bx_prompt(_t('_sys_txt_quill_tooltip_embed_popup_header'), '', function(oPopup){
+                    sLink = $(oPopup).find("input[type = 'text']").val()
+                    $.getJSON(oParams.root_url + 'embed.php?', {a: 'get_link', l: sLink}, function(aData){
+                        if (range) {
+                            oEditor.clipboard.dangerouslyPasteHTML(range.index, "</p>&#8205; <p>&#8205; </p>", 'api');
+                            oEditor.insertEmbed(range.index+2, 'embed-link', {source: sLink, inlinecode : aData.code}, 'api');
+                        }
+                        else{
+                            oEditor.insertEmbed(0, 'embed-link', {source: sLink, inlinecode : aData.code}, 'api');
+                        }
                             
-                            if ($(oParams.selector).next().next().find('.bx-embed-link a[href="' + aData.link + '"]').length > 0)
-                                bx_embed_link($(oParams.selector).next().next().find('.bx-embed-link a[href="' + aData.link + '"]')[0]);
-                            else
-                                bx_embed_link();
-                        });
+                        if ($(oParams.selector).next().next().find('.bx-embed-link a[href="' + aData.link + '"]').length > 0)
+                            bx_embed_link($(oParams.selector).next().next().find('.bx-embed-link a[href="' + aData.link + '"]')[0]);
+                        else
+                            bx_embed_link();
                     });
-                },
-                'link': function(value) {
-                    if (value) {
-                        bx_prompt(_t('_sys_txt_quill_tooltip_link_popup_header'), '', function(oPopup){
-                            oEditor.format('link', $(oPopup).find("input[type = 'text']").val());
-                        });
-                    } else {
-                        oEditor.format('link', false);
-                    }
+                });
+            },
+            'link': function(value) {
+                if (value) {
+                    bx_prompt(_t('_sys_txt_quill_tooltip_link_popup_header'), '', function(oPopup){
+                        oEditor.format('link', $(oPopup).find("input[type = 'text']").val());
+                    });
+                } else {
+                    oEditor.format('link', false);
                 }
             }
         }
@@ -50,7 +51,7 @@ function bx_editor_init(oEditor, oParams){
     
     $(oParams.selector).attr('object_editor', oParams.name);
                 
-    if (typeof bQuillRegistred === 'undefined' && oParams.toolbar) {
+    if (typeof bQuillRegistred === 'undefined' ) {
         
         var Embed = Quill.import('blots/embed');
         
@@ -139,14 +140,12 @@ function bx_editor_init(oEditor, oParams){
             'formats/embed-link': EmbedCode
         });
         
-        
-        
         bQuillRegistred = true; 
         
         var icons = Quill.import('ui/icons');
         icons['embed'] = '<svg class="fr-svg" focusable="false" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path class="ql-fill" d="M20.73889,15.45929a3.4768,3.4768,0,0,0-5.45965-.28662L9.5661,12.50861a3.49811,3.49811,0,0,0-.00873-1.01331l5.72174-2.66809a3.55783,3.55783,0,1,0-.84527-1.81262L8.70966,9.6839a3.50851,3.50851,0,1,0,.0111,4.63727l5.7132,2.66412a3.49763,3.49763,0,1,0,6.30493-1.526ZM18.00745,5.01056A1.49993,1.49993,0,1,1,16.39551,6.3894,1.49994,1.49994,0,0,1,18.00745,5.01056ZM5.99237,13.49536a1.49989,1.49989,0,1,1,1.61194-1.37878A1.49982,1.49982,0,0,1,5.99237,13.49536Zm11.78211,5.494a1.49993,1.49993,0,1,1,1.61193-1.37885A1.49987,1.49987,0,0,1,17.77448,18.98932Z"></path></svg>';
     }
-    
+
     var oConfig = {              
          theme: oParams.skin,
          modules: {
@@ -175,10 +174,18 @@ function bx_editor_init(oEditor, oParams){
         }
     };
     
-    if (oParams.toolbar){
-        oConfig.modules.imageUploader = {
-            upload: file => {
-                return new Promise((resolve, reject) => {
+    oConfig.modules.imageUploader = {
+        upload: file => {
+            return new Promise((resolve, reject) => {
+                if (typeof glOnInsertImageInEditor !== 'undefined' && glOnInsertImageInEditor instanceof Array) {
+                    for (var i = 0; i < glOnInsertImageInEditor.length; i++) {
+                        if (typeof glOnInsertImageInEditor[i] === "function") {
+                            glOnInsertImageInEditor[i](file);
+                        }
+                    }
+                    reject("External uploader");
+                }
+                else{
                     const formData = new FormData();
                     formData.append("file", file);
                     fetch(oParams.root_url + "storage.php?o=sys_images_editor&t=sys_images_editor&a=upload", {
@@ -193,11 +200,12 @@ function bx_editor_init(oEditor, oParams){
                     .catch(error => {
                         reject("Upload failed");
                     });
-                });
-            }
+                }
+            });
         }
     }
 
+
     oEditor = new Quill('#' + oParams.name, oConfig)
     $(oParams.selector).next().find('button.ql-bold').attr('title', _t('_sys_txt_quill_tooltip_bold'));
     $(oParams.selector).next().find('button.ql-italic').attr('title', _t('_sys_txt_quill_tooltip_italic'));
@@ -218,8 +226,10 @@ function bx_editor_init(oEditor, oParams){
     $(oParams.selector).next().find('span.ql-background').attr('title', _t('_sys_txt_quill_tooltip_background'));
     $(oParams.selector).next().find('span.ql-align').attr('title', _t('_sys_txt_quill_tooltip_align'));
     $(oParams.selector).next().find('span.ql-header').attr('title', _t('_sys_txt_quill_tooltip_header'));
-     
     
+    if (bEmptyToolbar)
+        $(oParams.selector).next().hide();
+
     oEditor.keyboard.addBinding({
         key: ' ',
         handler: function(range, context) {

+ 22 - 1
modules/boonex/timeline/js/post.js

@@ -94,8 +94,29 @@ BxTimelinePost.prototype.initFormPost = function(sFormId)
         }
     });
 
-    if(typeof window.glOnSpaceEnterInEditor === 'undefined')
+    if (typeof window.glOnSpaceEnterInEditor === 'undefined') {
         window.glOnSpaceEnterInEditor = [];
+        window.glOnInsertImageInEditor = [];
+    }
+
+    window.glOnInsertImageInEditor.push(function (oFile) {
+        console.log(oFile);
+        const formData = new FormData();
+        formData.append("file", oFile);
+        fetch("/storage.php?o=sys_images_editor&t=sys_images_editor&a=upload", {
+                method: "POST",
+                body: formData
+            }
+        )
+        .then(response => response.json())
+        .then(result => {
+            console.log(result);
+            //process success url in result.link
+        })
+        .catch(error => {
+            //process error
+        });
+    });
 
     window.glOnSpaceEnterInEditor.push(function (sData, sSelector) {
         if(!oTextarea.is(sSelector))