#3203 quill + embed

embed.php

@@ -0,0 +1,20 @@
+<?php
+/**
+ * Copyright (c) UNA, Inc - https://una.io
+ * MIT License - https://opensource.org/licenses/MIT
+ *
+ * @defgroup    UnaCore UNA Core
+ * @{
+ */
+
+require_once('./inc/header.inc.php');
+require_once(BX_DIRECTORY_PATH_INC . "design.inc.php");
+bx_import('BxDolEmbed');
+
+if (bx_get('a') == 'get_link'){
+    $sLink = bx_get('l');
+
+    $oEmbed = BxDolEmbed::getObjectInstance();
+    if ($oEmbed)
+        echoJson(['code' => $oEmbed->getLinkHTML($sLink), 'js' => strip_tags($oEmbed->addProcessLinkMethod())]);
+}

inc/classes/BxDolHTMLPurifierFilterEmbed.php

@@ -0,0 +1,36 @@
+<?php
+
+class BxDolHTMLPurifierFilterEmbed extends HTMLPurifier_Filter
+{
+
+    /**
+     * @type string
+     */
+    public $name = 'Embed';
+
+    /**
+     * @param string $html
+     * @param HTMLPurifier_Config $config
+     * @param HTMLPurifier_Context $context
+     * @return string
+     */
+    public function preFilter($html, $config, $context)
+    {
+        $pre_regex = '/<div class="bx-embed-link" source="([^"]*)">(.*)<\/div>/i';
+        $pre_replace = '<div class="bx-embed-link" source="\1">\1</div>';
+        return preg_replace($pre_regex, $pre_replace, $html);
+
+    }
+
+    /**
+     * @param string $html
+     * @param HTMLPurifier_Config $config
+     * @param HTMLPurifier_Context $context
+     * @return string
+     */
+    public function postFilter($html, $config, $context)
+    {
+        return $html;
+    }
+}
+

inc/js/classes/BxDolPage.js

@@ -10,7 +10,7 @@ function BxDolPage(oOptions) {
     this._sObject = oOptions.sObject; // page object
 
     this._sActionsUri = 'page.php';
-    this._sActionsUrl = oOptions.sRootUrl + this._sActionsUri; // actions url address
+    this._sActionsUrl = oOptions.sRootUrl; // actions url address
     this._aHtmlIds = oOptions.aHtmlIds;
 
     this._isStickyColumns = oOptions.isStickyColumns == undefined ? false : oOptions.isStickyColumns;
@@ -29,6 +29,18 @@ BxDolPage.prototype.init = function() {
             additionalMarginTop: 30
         });
     }
+    $(".bx-embed-link").each(function( index ) {
+        $obj =  $(this);
+        $.getJSON(sUrlRoot + '/embed.php?', {a: 'get_link', l: $(this).attr('source')}, function(aData){
+            
+            if ($obj.parents('.ql-editor').length == 0 || true){
+                console.log( $obj.html());
+                $obj.html(aData.code);
+                bx_embed_link();
+            }
+   
+        });
+    });
 };
 
 BxDolPage.prototype.showHelp = function(oLink, iBlockId)

inc/js/editor.quill.js

@@ -9,7 +9,31 @@ 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) {
+                    bx_prompt(_t('_sys_txt_quill_tooltip_embed_popup_header'), 'https://yandex.ru/', function(oPopup){
+                        sLink = $(oPopup).find("input[type = 'text']").val()
+                        $.getJSON(oParams.root_url + 'embed.php?', {a: 'get_link', l: sLink}, function(aData){
+                            oEditor.insertEmbed(100, 'embed-link', {source: sLink, inlinecode : aData.code});
+                            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);
+                    }
+                }
+            }
+        }
+    }
     $(oParams.selector).after("<div id='" + oParams.name + "' class='bx-def-font-inputs bx-form-input-textarea bx-form-input-html bx-form-input-html-quill " + oParams.css_class + "'>" + $(oParams.selector).val() + "</div>" );
     $(oParams.selector).hide();
     
@@ -17,25 +41,105 @@ function bx_editor_init(oEditor, oParams){
                 
     if (typeof bQuillRegistred === 'undefined' && oParams.toolbar) {
         Quill.register("modules/imageUploader", ImageUploader); 
+        var Embed = Quill.import('blots/embed');
+        
+        class MenthionLink extends Embed {
+            static create(value) {
+                let node = super.create(value);
+                if (value.id && value.value){
+                    node.setAttribute('href', value.id);
+                    node.innerHTML = '@' + value.value;
+                    node.setAttribute('title', '@' + value.value);
+                }
+                return node;
+            }
+            
+            format(name, value) {
+                console.log('format'+name+"!"+value)
+                if (name === 'href' || name === 'title') {
+                    if (value) {
+                        this.domNode.setAttribute(name, value);
+                        if (name === 'title'){
+                            this.domNode.innerHTML = value;
+                        }
+                    } else {
+                        this.domNode.removeAttribute(name, value);
+                    }
+                } 
+                else {
+                    super.format(name, value);
+                }
+            };
+                
+            static formats(node) {
+                console.log(node+"x");
+                let format = {};
+                if (node.hasAttribute('href')) {
+                    format.href = node.getAttribute('href');
+                }
+                if (node.hasAttribute('title')) {
+                    format.title = node.getAttribute('title');
+                }
+                return format;
+            }  
+            
+        }
+        MenthionLink.blotName = 'menthion-link'; 
+        MenthionLink.className = 'bx-menthion-link';
+        MenthionLink.tagName = 'a';                
+        Quill.register({
+            'formats/menthion-link': MenthionLink
+        });
+        
+        class EmbedCode extends Embed {
+            static create(value) {
+                let node = super.create(value);
+                if (value.source && value.inlinecode){
+                    node.setAttribute('source', value.source);
+                    node.innerHTML = value.inlinecode;
+                    return node;
+                }
+                return node;
+            };
+           
+            format(name, value) {
+                if (name === 'source') {
+                    if (value) {
+                        this.domNode.setAttribute(name, value);
+                    } else {
+                        this.domNode.removeAttribute(name, value);
+                    }
+                } 
+                else {
+                    super.format(name, value);
+                }
+            };
+                
+            static formats(node) {
+                let format = {};
+                if (node.hasAttribute('source')) {
+                  format.source = node.getAttribute('source');
+                }
+                return format;
+            }    
+        }
+        EmbedCode.className = 'bx-embed-link';
+        EmbedCode.blotName = 'embed-link'; 
+        EmbedCode.tagName = 'div';                
+        Quill.register({
+            '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 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 Embed = Quill.import('blots/embed');
-    class EmbedLink extends Embed {
-        static create(value) {
-            let node = super.create(value);
-            node.setAttribute('href', value.id);
-            node.innerHTML = '@' + value.value;
-            return node;
-        }
-    }
-    EmbedLink.blotName = 'embed-link'; 
-    EmbedLink.className = 'embed-link';
-    EmbedLink.tagName = 'a';                
-    Quill.register({
-        'formats/embed-link': EmbedLink
-    });
 
+    
     var oConfig = {              
          theme: oParams.skin,
          modules: {
@@ -46,7 +150,7 @@ function bx_editor_init(oEditor, oParams){
                 allowedChars: /^[A-Za-z\sÅÄÖåäö]*$/,
                 mentionDenotationChars: ["@"],
                 showDenotationChar: false,
-                blotName: 'embed-link',
+                blotName: 'menthion-link',
                 source: function (searchTerm, renderList, mentionChar) {
                   $.getJSON(oParams.root_url + 'searchExtended.php?action=get_authors&', { term: searchTerm}, function(data){
                     renderList(data, searchTerm);
@@ -137,9 +241,9 @@ function bx_editor_insert_html (sEditorId, sImgId, sHtml)
     if ($('#' + sEditorId) &&  $('#' + sEditorId).attr('object_editor')){
         eval ('oEditor = ' + $('#' + sEditorId).attr('object_editor'));
         if (oEditor.getSelection())
-            oEditor.clipboard.dangerouslyPasteHTML(oEditor.getSelection().index,sHtml, 'api');
+            oEditor.clipboard.dangerouslyPasteHTML(oEditor.getSelection().index, sHtml, 'api');
         else
-             oEditor.clipboard.dangerouslyPasteHTML(0,sHtml, 'api');
+             oEditor.clipboard.dangerouslyPasteHTML(0, sHtml, 'api');
     }
 }
 
@@ -160,8 +264,7 @@ function bx_editor_on_space_enter (oEditor, sEditorId)
         glBxEditorOnSpaceEnterTimer = undefined;
         if (typeof glOnSpaceEnterInEditor !== 'undefined' && glOnSpaceEnterInEditor instanceof Array) {
             for (var i = 0; i < glOnSpaceEnterInEditor.length; i++) {
-                if (typeof glOnSpaceEnterInEditor[i] === "function") {;
-                    console.log(oEditor.container.firstChild.innerHTML);                                                  
+                if (typeof glOnSpaceEnterInEditor[i] === "function") {;                                             
                     glOnSpaceEnterInEditor[i](oEditor.container.firstChild.innerHTML, sEditorId);
                 }
             }

inc/utils.inc.php

@@ -571,8 +571,7 @@ function clear_xss($val)
 {
     // HTML Purifier plugin
     global $oHtmlPurifier;
-    if (!isset($oHtmlPurifier) && !$GLOBALS['logged']['admin']) {
-
+    if (!isset($oHtmlPurifier) /*&& !$GLOBALS['logged']['admin']*/) {
         HTMLPurifier_Bootstrap::registerAutoload();
 
         $oConfig = HTMLPurifier_Config::createDefault();
@@ -591,10 +590,18 @@ function clear_xss($val)
             $oConfig->set('HTML.Nofollow', 'true');
         }
 
-        $oConfig->set('Filter.Custom', array (new BxDolHTMLPurifierFilterYouTube(), new BxDolHTMLPurifierFilterYoutubeIframe(), new BxDolHTMLPurifierFilterAddBxLinksClass(), new BxDolHTMLPurifierFilterLocalIframe()));
-
+        $oConfig->set('Filter.Custom', array (
+            new BxDolHTMLPurifierFilterYouTube(), 
+            new BxDolHTMLPurifierFilterYoutubeIframe(), 
+            new BxDolHTMLPurifierFilterAddBxLinksClass(), 
+            new BxDolHTMLPurifierFilterLocalIframe(),
+            new BxDolHTMLPurifierFilterEmbed(),
+        ));
+   
+        $oConfig->set('Cache.DefinitionImpl', null); // chear cache
 	    $oConfig->set('HTML.DefinitionID', 'html5-definitions');
 		$oConfig->set('HTML.DefinitionRev', 1);
+      
 		if ($def = $oConfig->maybeGetRawHTMLDefinition()) {
 		    $def->addElement('section', 'Block', 'Flow', 'Common');
 		    $def->addElement('nav',     'Block', 'Flow', 'Common');
@@ -616,12 +623,13 @@ function clear_xss($val)
 		        'type' => 'Text',
             ));
             $def->addAttribute('a', 'data-profile-id', 'Number');
+            $def->addAttribute('div', 'source', 'Text');
 		}
 
         $oHtmlPurifier = new HTMLPurifier($oConfig);
     }
 
-    if (!$GLOBALS['logged']['admin'])
+    //if (!$GLOBALS['logged']['admin'])
         $val = $oHtmlPurifier->purify($val);
 
     bx_alert('system', 'clear_xss', 0, 0, array('oHtmlPurifier' => $oHtmlPurifier, 'return_data' => &$val));

modules/boonex/english/data/langs/system/en.xml

@@ -3570,6 +3570,9 @@ If it is not enabled then please consider implement this optimization, since it
     <string name="_sys_txt_quill_tooltip_background"><![CDATA[Select a background color]]></string>
     <string name="_sys_txt_quill_tooltip_align"><![CDATA[Text alignment]]></string>
     <string name="_sys_txt_quill_tooltip_header"><![CDATA[Select the text style]]></string>
+    <string name="_sys_txt_quill_tooltip_embed"><![CDATA[Insert an embed]]></string>
+    <string name="_sys_txt_quill_tooltip_embed_popup_header"><![CDATA[Paste an URL for embed]]></string>
+    <string name="_sys_txt_quill_tooltip_link_popup_header"><![CDATA[Paste an URL]]></string>
     
 </resources>
 

template/scripts/BxBaseEditorQuill.php

@@ -113,6 +113,9 @@ class BxBaseEditorQuill extends BxDolEditor
             '_sys_txt_quill_tooltip_background',
             '_sys_txt_quill_tooltip_align',
             '_sys_txt_quill_tooltip_header',
+            '_sys_txt_quill_tooltip_embed',
+            '_sys_txt_quill_tooltip_embed_popup_header',
+            '_sys_txt_quill_tooltip_link_popup_header',
         ]);
         // initialize editor
         $sInitEditor = $this->_replaceMarkers(self::$CONF_COMMON, array(