#3203 quill

install/sql/system.sql

@@ -1459,6 +1459,38 @@ CREATE TABLE `sys_images_resized` (
   UNIQUE KEY `remote_id` (`remote_id`)
 );
 
+CREATE TABLE `sys_images_editor` (
+  `id` int(11) NOT NULL AUTO_INCREMENT,
+  `profile_id` int(10) unsigned NOT NULL,
+  `remote_id` varchar(128) NOT NULL,
+  `path` varchar(255) NOT NULL,
+  `file_name` varchar(255) NOT NULL,
+  `mime_type` varchar(128) NOT NULL,
+  `ext` varchar(32) NOT NULL,
+  `size` bigint(20) NOT NULL,
+  `added` int(11) NOT NULL,
+  `modified` int(11) NOT NULL,
+  `private` int(11) NOT NULL,
+  PRIMARY KEY (`id`),
+  UNIQUE KEY `remote_id` (`remote_id`)
+);
+
+CREATE TABLE `sys_images_editor_resized` (
+  `id` int(11) NOT NULL AUTO_INCREMENT,
+  `profile_id` int(10) unsigned NOT NULL,
+  `remote_id` varchar(128) NOT NULL,
+  `path` varchar(255) NOT NULL,
+  `file_name` varchar(255) NOT NULL,
+  `mime_type` varchar(128) NOT NULL,
+  `ext` varchar(32) NOT NULL,
+  `size` bigint(20) NOT NULL,
+  `added` int(11) NOT NULL,
+  `modified` int(11) NOT NULL,
+  `private` int(11) NOT NULL,
+  PRIMARY KEY (`id`),
+  UNIQUE KEY `remote_id` (`remote_id`)
+);
+
 -- --------------------------------------------------------
 
 
@@ -2081,7 +2113,9 @@ INSERT INTO `sys_objects_storage` (`object`, `engine`, `params`, `token_life`, `
 ('sys_cmts_images', 'Local', '', 360, 2592000, 3, 'sys_cmts_images', 'allow-deny', 'jpg,jpeg,jpe,gif,png', '', 0, 0, 0, 0, 0, 0),
 ('sys_cmts_images_preview', 'Local', '', 360, 2592000, 3, 'sys_cmts_images_preview', 'allow-deny', 'jpg,jpeg,jpe,gif,png', '', 0, 0, 0, 0, 0, 0),
 ('sys_transcoder_queue_files', 'Local', '', 3600, 2592000, 0, 'sys_transcoder_queue_files', 'allow-deny', 'avi,flv,mpg,mpeg,wmv,mp4,m4v,mov,divx,xvid,3gp,webm,jpg', '', 0, 0, 0, 0, 0, 0),
-('sys_files', 'Local', '', 360, 2592000, 3, 'sys_files', 'deny-allow', '', 'action,apk,app,bat,bin,cmd,com,command,cpl,csh,exe,gadget,inf,ins,inx,ipa,isu,job,jse,ksh,lnk,msc,msi,msp,mst,osx,out,paf,pif,prg,ps1,reg,rgs,run,sct,shb,shs,u3p,vb,vbe,vbs,vbscript,workflow,ws,wsf', 0, 0, 0, 0, 0, 0);
+('sys_files', 'Local', '', 360, 2592000, 3, 'sys_files', 'deny-allow', '', 'action,apk,app,bat,bin,cmd,com,command,cpl,csh,exe,gadget,inf,ins,inx,ipa,isu,job,jse,ksh,lnk,msc,msi,msp,mst,osx,out,paf,pif,prg,ps1,reg,rgs,run,sct,shb,shs,u3p,vb,vbe,vbs,vbscript,workflow,ws,wsf', 0, 0, 0, 0, 0, 0),
+('sys_images_editor', 'Local', '', 360, 2592000, 3, 'sys_images_editor', 'allow-deny', 'jpg,jpeg,jpe,gif,png', '', 0, 0, 0, 0, 0, 0),
+('sys_images_editor_resized', 'Local', '', 360, 2592000, 3, 'sys_images_editor_resized', 'allow-deny', 'jpg,jpeg,jpe,gif,png', '', 0, 0, 0, 0, 0, 0);
 
 CREATE TABLE IF NOT EXISTS `sys_storage_user_quotas` (
   `profile_id` int(11) NOT NULL,
@@ -4848,7 +4882,8 @@ INSERT INTO `sys_objects_transcoder` (`object`, `storage_object`, `source_type`,
 ('sys_builder_page_preview', 'sys_images_resized', 'Storage', 'a:1:{s:6:"object";s:10:"sys_images";}', 'no', '1', '2592000', '0', '', ''),
 ('sys_builder_page_embed', 'sys_images_resized', 'Storage', 'a:1:{s:6:"object";s:10:"sys_images";}', 'no', '1', '2592000', '0', '', ''),
 ('sys_cmts_images_preview', 'sys_cmts_images_preview', 'Storage', 'a:1:{s:6:"object";s:15:"sys_cmts_images";}', 'no', '1', '2592000', '0', '', ''),
-('sys_custom_images', 'sys_images_resized', 'Storage', 'a:1:{s:6:"object";s:17:"sys_images_custom";}', 'no', '1', '2592000', '0', '', '');
+('sys_custom_images', 'sys_images_resized', 'Storage', 'a:1:{s:6:"object";s:17:"sys_images_custom";}', 'no', '1', '2592000', '0', '', ''),
+('sys_images_editor', 'sys_images_editor_resized', 'Storage', 'a:1:{s:6:"object";s:17:"sys_images_editor";}', 'no', '1', '2592000', '0', '', '');
 
 
 CREATE TABLE IF NOT EXISTS `sys_transcoder_images_files` (
@@ -4904,7 +4939,8 @@ INSERT INTO `sys_transcoder_filters` (`transcoder_object`, `filter`, `filter_par
 ('sys_builder_page_preview', 'Resize', 'a:4:{s:1:"w";s:3:"128";s:1:"h";s:3:"128";s:13:"square_resize";s:1:"1";s:10:"force_type";s:3:"jpg";}', '0'),
 ('sys_builder_page_embed', 'ResizeVar', '', '0'),
 ('sys_cmts_images_preview', 'Resize', 'a:4:{s:1:"w";s:3:"100";s:1:"h";s:3:"100";s:13:"square_resize";s:1:"1";s:10:"force_type";s:3:"jpg";}', '0'),
-('sys_custom_images', 'ResizeVar', '', '0');
+('sys_custom_images', 'ResizeVar', '', '0'),
+('sys_images_editor', 'Resize', 'a:2:{s:1:"w";s:4:"1600";s:1:"h";s:4:"1600";}', '0');
 
 
 CREATE TABLE IF NOT EXISTS `sys_transcoder_queue` (

modules/boonex/decorous/data/template/system/scripts/BxTemplEditorQuill.php

@@ -0,0 +1,21 @@
+<?php defined('BX_DOL') or die('hack attempt');
+/**
+ * Copyright (c) UNA, Inc - https://una.io
+ * MIT License - https://opensource.org/licenses/MIT
+ *
+ * @defgroup    UnaTemplate UNA Template Classes
+ * @{
+ */
+
+/**
+ * @see BxDolEditor
+ */
+class BxTemplEditorQuill extends BxBaseEditorQuill
+{
+    public function __construct ($aObject, $oTemplate = false)
+    {
+        parent::__construct ($aObject, $oTemplate);
+    }
+}
+
+/** @} */

modules/boonex/timeline/classes/BxTimelineFormPost.php

@@ -152,7 +152,7 @@ class BxTimelineFormPost extends BxBaseModGeneralFormEntry
         if(!$this->_oModule->_oConfig->isEditorToolbar())
         	$oEditor->setCustomToolbarButtons('');
 
-        $this->_sCodeAdd .= $oEditor->attachEditor ('#' . $this->aFormAttrs['id'] . ' [name='.$aInput['name'].']', $iViewMode, $this->_bDynamicMode);
+        $this->_sCodeAdd .= $oEditor->attachEditor ('#' . $this->aFormAttrs['id'] . ' [name='.$aInput['name'].']', $iViewMode, $this->_bDynamicMode, ['form_id' => $this->aFormAttrs['id'], 'element_name' => $aInput['name']]);
 
         return true;
     }

plugins_public/highlight/default.min.css

@@ -0,0 +1,9 @@
+/*!
+  Theme: Default
+  Description: Original highlight.js style
+  Author: (c) Ivan Sagalaev <maniac@softwaremaniacs.org>
+  Maintainer: @highlightjs/core-team
+  Website: https://highlightjs.org/
+  License: see project LICENSE
+  Touched: 2021
+*/pre code.hljs{display:block;overflow-x:auto;padding:1em}code.hljs{padding:3px 5px}.hljs{background:#f0f0f0;color:#444}.hljs-comment{color:#888}.hljs-punctuation,.hljs-tag{color:#444a}.hljs-tag .hljs-attr,.hljs-tag .hljs-name{color:#444}.hljs-attribute,.hljs-doctag,.hljs-keyword,.hljs-meta .hljs-keyword,.hljs-name,.hljs-selector-tag{font-weight:700}.hljs-deletion,.hljs-number,.hljs-quote,.hljs-selector-class,.hljs-selector-id,.hljs-string,.hljs-template-tag,.hljs-type{color:#800}.hljs-section,.hljs-title{color:#800;font-weight:700}.hljs-link,.hljs-operator,.hljs-regexp,.hljs-selector-attr,.hljs-selector-pseudo,.hljs-symbol,.hljs-template-variable,.hljs-variable{color:#bc6060}.hljs-literal{color:#78a960}.hljs-addition,.hljs-built_in,.hljs-bullet,.hljs-code{color:#397300}.hljs-meta{color:#1f7199}.hljs-meta .hljs-string{color:#4d99bf}.hljs-emphasis{font-style:italic}.hljs-strong{font-weight:700}

plugins_public/quill/quill.custom.css

@@ -0,0 +1,27 @@
+.ql-editor{
+    background: #fff;
+}    
+.ql-container{
+    height: 150px;
+}
+@media (prefers-color-scheme: dark) {
+	.ql-stroke{
+		stroke: orange !important;
+	}
+	.ql-fill{
+		fill: orange !important;
+	}
+	.ql-picker{
+		color: orange !important;
+	}
+	.ql-toolbar{
+		background:#444;
+	}
+	.ql-editor{
+		background:#444;
+		color: #fff;
+	}
+	.ql-editor.ql-blank::before{
+	    color: rgba(255,255,255,0.6);
+	}
+}

plugins_public/quill/quill.imageUploader.min.css

@@ -0,0 +1,33 @@
+.image-uploading {
+  position: relative;
+  display: inline-block;
+}
+
+.image-uploading img {
+  max-width: 98% !important;
+  filter: blur(5px);
+  opacity: 0.3;
+}
+
+.image-uploading::before {
+  content: "";
+  box-sizing: border-box;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: 30px;
+  height: 30px;
+  margin-top: -15px;
+  margin-left: -15px;
+  border-radius: 50%;
+  border: 3px solid #ccc;
+  border-top-color: #1e986c;
+  z-index: 1;
+  animation: spinner 0.6s linear infinite;
+}
+
+@keyframes spinner {
+  to {
+    transform: rotate(360deg);
+  }
+}

plugins_public/quill/quill.mention.css

@@ -0,0 +1,54 @@
+.ql-mention-list-container {
+  width: 270px;
+  border: 1px solid #f0f0f0;
+  border-radius: 4px;
+  background-color: #ffffff;
+  box-shadow: 0 2px 12px 0 rgba(30, 30, 30, 0.08);
+  z-index: 9001;
+  overflow: auto;
+}
+
+.ql-mention-loading {
+  line-height: 44px;
+  padding: 0 20px;
+  vertical-align: middle;
+  font-size: 16px;
+}
+
+.ql-mention-list {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  overflow: hidden;
+}
+
+.ql-mention-list-item {
+  cursor: pointer;
+  line-height: 44px;
+  font-size: 16px;
+  padding: 0 20px;
+  vertical-align: middle;
+}
+
+.ql-mention-list-item.disabled {
+  cursor: auto;
+}
+
+.ql-mention-list-item.selected {
+  background-color: #d3e1eb;
+  text-decoration: none;
+}
+
+.mention {
+  height: 24px;
+  width: 65px;
+  border-radius: 6px;
+  background-color: #d3e1eb;
+  padding: 3px 0;
+  margin-right: 2px;
+  user-select: all;
+}
+
+.mention > span {
+  margin: 0 3px;
+}

plugins_public/quill/quill.snow.css

@@ -942,26 +942,4 @@
 }
 .ql-container.ql-snow {
   border: 1px solid #ccc;
-}
-
-@media (prefers-color-scheme: dark) {
-	.ql-stroke{
-		stroke: orange !important;
-	}
-	.ql-fill{
-		fill: orange !important;
-	}
-	.ql-picker{
-		color: orange !important;
-	}
-	.ql-toolbar{
-		background:#444;
-	}
-	.ql-editor{
-		background:#444;
-		color: #fff;
-	}
-	.ql-editor.ql-blank::before{
-	    color: rgba(255,255,255,0.6);
-	}
 }

storage.php

@@ -14,6 +14,31 @@ $sFile = bx_process_input(bx_get('f'));
 $sToken = bx_process_input(bx_get('t'));
 
 $oStorage = BxDolStorage::getObjectInstance($sStorageObject);
+// upload action implementation
+if ($oStorage && bx_get('a') == 'upload' && bx_get('t')) {
+    header('Content-Type: application/json; charset=utf-8');
+
+    $iProfileId = bx_get_logged_profile_id();
+
+    if (!($iId = $oStorage->storeFileFromForm($_FILES['file'], false, $iProfileId))) {
+        echo json_encode(array('error' => '1'));
+        exit;
+    }
+
+    $oStorage->afterUploadCleanup($iId, $iProfileId);
+
+    $aFileInfo = $oStorage->getFile($iId);
+    if ($aFileInfo && in_array($aFileInfo['ext'], array('jpg', 'jpeg', 'jpe', 'png'))) {
+        $oTranscoder = BxDolTranscoderImage::getObjectInstance(bx_get('t'));
+        $sUrl = $oTranscoder->getFileUrl($iId);
+    }
+    else {
+        $sUrl = $oStorage->getFileUrlById($iId);
+    }
+
+    echo json_encode(array('link' => $sUrl));
+    exit;
+}
 
 if (!$oStorage || !method_exists($oStorage, 'download')) {
     ob_end_clean();

template/scripts/BxBaseEditorQuill.php

@@ -18,105 +18,85 @@ class BxBaseEditorQuill extends BxDolEditor
      */
     
     protected static $CONF_COMMON = <<<EOS
-                    quill = new Quill(
-                        '{bx_var_selector}',
-                         {
-                         placeholder: 'Compose an epic...', theme: '{bx_var_skin}',
-                         modules: {toolbar: [{bx_var_plugins}]}
-                         }
-                    );          
-    EOS;
-   /* protected static $CONF_COMMON = <<<EOS
-                    jQuery('{bx_var_selector}').tinymce({
-                        {bx_var_custom_init}
-                        {bx_var_custom_conf}
-                        document_base_url: '{bx_url_root}',
-                        theme_url: '{bx_url_tinymce}themes/modern/theme.min.js',
-                        skin_url: '{bx_url_tinymce}skins/{bx_var_skin}/',
-                        language_url: '{bx_url_tinymce}langs/{bx_var_lang}.js',
-                        content_css: '{bx_var_css_path}',
-                        entity_encoding: 'raw',
-                        browser_spellcheck: true,
-                        branding: false,
-                        link_assume_external_targets: true,
-                        body_class: 'bx-def-color-bg-block',
-                        codesample_languages: [
-                            {text: 'HTML/XML', value: 'markup'},
-                            {text: 'JavaScript', value: 'javascript'},
-                            {text: 'CSS', value: 'css'},
-                            {text: 'PHP', value: 'php'},
-                        ],
-                        init_instance_callback: function(editor) {
-                            $(editor.contentDocument.activeElement).atwho({
-                                searchKey: 'label',
-                                at: "@", 
-                                limit: 20,
-                                displayTpl: '<li class="bx-mention-row" data-value="\${value}"><span>\${label}</span> <img class="bx-def-round-corners" src="\${thumb}" /></li>',
-                                insertTpl: '<a class="bx-mention" data-profile-id="\${value}" href="\${url}">\${label}</a>',
-                                callbacks: {
-                                    remoteFilter: function(query, callback) {
-                                        $.getJSON("{bx_url_root}searchExtended.php?action=get_authors", {term: query}, function(data) {
-                                            callback(data);
-                                        });
-                                    }
-                                },
-
-                            });
-
-                            bx_editor_on_init('{bx_var_selector}');
+    
+                hljs.configure({   // optionally configure hljs
+                  languages: ['javascript', 'php', 'html', 'css']
+                });
+    
+                $( "{bx_var_selector}" ).after( "<div id='editor_{bx_var_editor_name}' class='bx-def-font-inputs bx-form-input-textarea bx-form-input-html'>" + $( "{bx_var_selector}" ).val() + "</div>" );
+                $( "{bx_var_selector}" ).hide();
+                
+                if (typeof bQuillRegistred === 'undefined') {
+                    Quill.register("modules/imageUploader", ImageUploader); 
+                    bQuillRegistred = true;
+                }
+                
+                var quill_{bx_var_editor_name} = new Quill('#editor_{bx_var_editor_name}', {
+                     theme: '{bx_var_skin}',
+                     modules: {
+                        syntax: true, 
+                        toolbar: [{toolbar}],
+                        mention: {
+                           // allowedChars: /^[A-Za-z\sÅÄÖåäö]*$/,
+                            mentionDenotationChars: ["@"],
+                            source: function (searchTerm, renderList, mentionChar) {
+                              $.getJSON('{bx_url_root}searchExtended.php?action=get_authors&', { term: searchTerm}, function(data){
+                                renderList(data, searchTerm);
+                              });
+                            },
+                            renderItem: function(item, searchTerm){
+                                item.value = '<a href="' + item.url + '" target="_blank" >' + item.label + '</a>';
+                                return '<a href="' + item.url + '" target="_blank" >@' + item.label + '</a>';
+                            },
+                            onSelect: function(item, insertItem){
+                                insertItem(item)
+                            }
                         },
-                        setup: function(editor) {
-                            editor.on('keydown', function(e) {
-                                if (e.keyCode == 13 && $(editor.contentDocument.activeElement).atwho('isSelecting'))
-                                    return false;
-                            });
+                        imageUploader: {
+                            upload: file => {
+                                return new Promise((resolve, reject) => {
+                                    const formData = new FormData();
+                                    formData.append("file", file);
+                                    fetch("{bx_url_root}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);
+                                        resolve(result.link);
+                                    })
+                                    .catch(error => {
+                                        reject("Upload failed");
+                                        console.error("Error:", error);
+                                    });
+                                });
+                            }
                         }
-                    });
-EOS;
-*/
+                    }
+                });
+                
+                quill_{bx_var_editor_name}.on('text-change', function(delta, oldDelta, source) {
+                    $('{bx_var_selector}').val(quill_{bx_var_editor_name}.container.firstChild.innerHTML);
+                });
+    EOS;
+   
 
     /**
      * Standard view initialization params
      */
-    protected static $CONF_STANDARD = "
-                        external_plugins: {plugins},
-                        width: '100%',
-                        height: '270',
-                        toolbar: {toolbar},
-                        statusbar: true,
-                        resize: true,
-    ";
+    protected static $CONF_STANDARD = "";
 
     /**
      * Minimal view initialization params
      */
-    protected static $CONF_MINI = "
-                        menubar: false,
-                        external_plugins: {plugins},
-                        width: '100%',
-                        height: '150',                        
-                        toolbar: {toolbar},
-                        statusbar: true,
-                        resize: true,
-    ";
+    protected static $CONF_MINI = "";
 
     /**
      * Full view initialization params
      */
-    protected static $CONF_FULL = "
-                        external_plugins: {plugins},
-                        width: '100%',
-                        height: '320',
-                        toolbar: {toolbar},
-                        statusbar: true,
-                        resize: true,
-                        image_advtab: true,
-    ";
-
-    /**
-     * Available editor languages
-     */
-    /*protected static $CONF_LANGS = array('af_ZA' => 1, 'ar' => 1, 'az' => 1, 'be' => 1, 'bg_BG' => 1, 'bn_BD' => 1, 'ca' => 1, 'cs' => 1, 'cs_CZ' => 1, 'cy' => 1, 'da' => 1, 'de' => 1, 'de_AT' => 1, 'dv' => 1, 'el' => 1, 'en' => 1, 'en_CA' => 1, 'en_GB' => 1, 'es' => 1, 'es_MX' => 1, 'et' => 1, 'eu' => 1, 'fa_IR' => 1, 'fi' => 1, 'fr_FR' => 1, 'ga' => 1, 'gl' => 1, 'he_IL' => 1, 'hr' => 1, 'hu_HU' => 1, 'id' => 1, 'it' => 1, 'ja' => 1, 'ka_GE' => 1, 'kab' => 1, 'kk' => 1, 'km_KH' => 1, 'ko_KR' => 1, 'lt' => 1, 'lv' => 1, 'nb_NO' => 1, 'nl' => 1, 'pl' => 1, 'pt_BR' => 1, 'pt_PT' => 1, 'ro' => 1, 'ru' => 1, 'sk' => 1, 'sl_SI' => 1, 'sr' => 1, 'sv_SE' => 1, 'ta' => 1, 'ta_IN' => 1, 'th_TH' => 1, 'tr' => 1, 'tr_TR' => 1, 'ug' => 1, 'uk' => 1, 'uk_UA' => 1, 'uz' => 1, 'vi_VN' => 1, 'zh_CN' => 1, 'zh_TW' => 1);*/
+    protected static $CONF_FULL = "";
 
     protected $_oTemplate;
     protected $_bJsCssAdded = false;
@@ -137,82 +117,74 @@ EOS;
      * @param $iViewMode - editor view mode: BX_EDITOR_STANDARD, BX_EDITOR_MINI, BX_EDITOR_FULL
      * @param $bDynamicMode - is AJAX mode or not, the HTML with editor area is loaded dynamically.
      */
-    public function attachEditor ($sSelector, $iViewMode = BX_EDITOR_STANDARD, $bDynamicMode = false)
+    public function attachEditor ($sSelector, $iViewMode = BX_EDITOR_STANDARD, $bDynamicMode = false, $aAttrs = [])
     {
         // set visual mode
         switch ($iViewMode) {
         case BX_EDITOR_MINI:
                 $sToolbarItems = getParam('sys_quill_toolbar_mini');
-              //  $sPlugins = getParam('sys_tinymce_plugins_mini');
                 $sCustomInit = self::$CONF_MINI;
                 break;
+                
             case BX_EDITOR_FULL:
                 $sToolbarItems = getParam('sys_quill_toolbar_full');
-               // $sPlugins = getParam('sys_tinymce_plugins_full');
                 $sCustomInit = self::$CONF_FULL;
             break;
+                
             case BX_EDITOR_STANDARD:
             default:
                 $sToolbarItems = getParam('sys_quill_toolbar_standard');
-              //  $sPlugins = getParam('sys_tinymce_plugins_standard');
                 $sCustomInit = self::$CONF_STANDARD;
         }
         
         if ($this->_sButtonsCustom !== false) {
             $sToolbarItems = $this->_sButtonsCustom;
         }
-        /*
-        if ($this->_sPluginsCustom !== false) {
-            $sPlugins = $this->_sPluginsCustom;
-        }
-        else {
-            $a = explode(',', $sPlugins);            
-            foreach ($a as $sPlugin)
-                $aPlugins[$sPlugin] = "{bx_url_tinymce}plugins/$sPlugin/plugin.min.js";
-            $sPlugins = json_encode($aPlugins);
-        }
         
-        $sCustomInit = str_replace('{toolbar}', $sToolbarItems ? $sToolbarItems : "[]", $sCustomInit);
-        $sCustomInit = str_replace('{plugins}', $sPlugins, $sCustomInit);
-        
-        // detect language
-        $sLang = BxDolLanguages::getInstance()->detectLanguageFromArray (self::$CONF_LANGS);
-
         $sCss = 'editor.less';
         $aCss = BxDolTemplate::getInstance()->_lessCss(array(
         	'path' => $this->_oTemplate->getCssPath($sCss),
         	'url' => $this->_oTemplate->getCssUrl($sCss)
         ));
-*/
-        
         // initialize editor
         $sInitEditor = $this->_replaceMarkers(self::$CONF_COMMON, array(
+            'bx_var_custom_init' => $sCustomInit,
             'bx_var_selector' => bx_js_string($sSelector, BX_ESCAPE_STR_APOS),
+            'bx_var_form_id' => $aAttrs['form_id'],
+            'toolbar' => $sToolbarItems ? $sToolbarItems : "[]",
+            'bx_var_element_name' => str_replace(['-', ' '], '_', $aAttrs['element_name']),
+            'bx_var_editor_name' => str_replace(['-', ' '], '_', $aAttrs['form_id'] . '_' . $aAttrs['element_name']),
             'bx_var_skin' => bx_js_string($this->_aObject['skin'], BX_ESCAPE_STR_APOS),
-            'bx_var_plugins' => $sToolbarItems,
-      /*      'bx_var_custom_init' => $sCustomInit,
-            'bx_var_custom_conf' => $this->_sConfCustom,
-            'bx_var_plugins_path' => bx_js_string(BX_DOL_URL_PLUGINS_PUBLIC, BX_ESCAPE_STR_APOS),
-            'bx_var_css_path' => bx_js_string($aCss['url'], BX_ESCAPE_STR_APOS),
-            'bx_var_skin' => bx_js_string($this->_aObject['skin'], BX_ESCAPE_STR_APOS),
-            'bx_var_lang' => bx_js_string($sLang, BX_ESCAPE_STR_APOS),
-            
             'bx_url_root' => bx_js_string(BX_DOL_URL_ROOT, BX_ESCAPE_STR_APOS),
-            'bx_url_tinymce' => bx_js_string(BX_DOL_URL_PLUGINS_PUBLIC . 'tinymce/', BX_ESCAPE_STR_APOS),*/
+            'bx_var_css_path' => bx_js_string($aCss['url'], BX_ESCAPE_STR_APOS),
         ));
 
         if ($bDynamicMode) {
 
-            $sScript = "<script>
-                if ('undefined' == typeof(jQuery(document).quill)) {
-                    window.quillPreInit = {base : '" . bx_js_string(BX_DOL_URL_PLUGINS_PUBLIC . 'quill', BX_ESCAPE_STR_APOS) . "', suffix : '.min', query : ''};
-                    $.getScript('" . bx_js_string(BX_DOL_URL_ROOT . 'inc/js/editor.quill.js', BX_ESCAPE_STR_APOS) . "');
-                    $.getScript('" . bx_js_string(BX_DOL_URL_PLUGINS_PUBLIC . 'quill/quill.min.js', BX_ESCAPE_STR_APOS) . "', function(data, textStatus, jqxhr) {});
+            list($aJs, $aCss) = $this->_getJsCss(true);
+            $sCss = $this->_oTemplate->addCss($aCss, true);
+            
+            $sCss = $this->_oTemplate->addCss([
+                BX_DIRECTORY_PATH_PLUGINS_PUBLIC . 'quill/|quill.' . $this->_aObject['skin'] . '.css', 
+                BX_DIRECTORY_PATH_PLUGINS_PUBLIC . 'quill/|quill.custom.css', 
+                BX_DIRECTORY_PATH_PLUGINS_PUBLIC . 'quill/|quill.mention.css', 
+                BX_DIRECTORY_PATH_PLUGINS_PUBLIC . 'highlight/|default.min.css',
+                BX_DIRECTORY_PATH_PLUGINS_PUBLIC . 'quill/quill.imageUploader.min.css'
+            ], true);
+            $sScript = $sCss . "<script>
+                if (typeof bQuillEditorInited === 'undefined') {
+                    bx_get_scripts(" . json_encode($aJs) . ", function () {
+                        bQuillEditorInited = true;
+                        $sInitEditor
+                    });
                 } else {
                 	setTimeout(function () {
+                     console.log(999);
                     	$sInitEditor
                     }, 10); // wait while html is rendered in case of dynamic adding html with tinymce
-                }
+                } 
+                if (typeof bQuillEditorInited === 'undefined') 
+                    bQuillEditorInited = true;
             </script>";
 
         } else {
@@ -223,11 +195,11 @@ EOS;
                     $sInitEditor
                 });
             </script>";
-
         }
 
         return $this->_addJsCss($bDynamicMode) . $sScript;
     }
+    
 
     /**
      * Add css/js files which are needed for editor display and functionality.
@@ -236,14 +208,42 @@ EOS;
     {
         if ($bDynamicMode)
             return '';
+        
         if ($this->_bJsCssAdded)
             return '';
-        $this->_oTemplate->addJs(array('quill/quill.min.js'));
-        $this->_oTemplate->addCss(BX_DIRECTORY_PATH_PLUGINS_PUBLIC . 'quill/|quill.' . $this->_aObject['skin'] . '.css');
+        
+        list($aJs, $aCss) = $this->_getJsCss();
+
+        $this->_oTemplate->addJs($aJs);
+        $this->_oTemplate->addCss($aCss);
+        
         $this->_bJsCssAdded = true;
+        
         return '';
     }
-
+    
+    protected function _getJsCss($bUseUrlsForJs = false)
+    {
+        $sJsPrefix = $bUseUrlsForJs ? BX_DOL_URL_PLUGINS_PUBLIC : BX_DIRECTORY_PATH_PLUGINS_PUBLIC;
+        $sJsSuffix = $bUseUrlsForJs ? '' : '|';
+        
+        $aJs = array(
+            $sJsPrefix . 'highlight/' . $sJsSuffix . 'highlight.min.js',
+            $sJsPrefix . 'quill/' . $sJsSuffix . 'quill.min.js', 
+            $sJsPrefix . 'quill/' . $sJsSuffix . 'quill.mention.js',  
+            $sJsPrefix . 'quill/' . $sJsSuffix . 'quill.imageUploader.min.js'
+        );
+
+        $aCss = array(
+            BX_DIRECTORY_PATH_PLUGINS_PUBLIC . 'quill/|quill.' . $this->_aObject['skin'] . '.css', 
+            BX_DIRECTORY_PATH_PLUGINS_PUBLIC . 'quill/|quill.custom.css', 
+            BX_DIRECTORY_PATH_PLUGINS_PUBLIC . 'quill/|quill.mention.css', 
+            BX_DIRECTORY_PATH_PLUGINS_PUBLIC . 'highlight/|default.min.css',
+            BX_DIRECTORY_PATH_PLUGINS_PUBLIC . 'quill/quill.imageUploader.min.css'
+        );
+
+        return array($aJs, $aCss);
+    }
 }
 
 /** @} */