Alex Trofimov 8 лет назад
Родитель
Сommit
f17a2649d0
100 измененных файлов с 15686 добавлено и 0 удалено
  1. 29 0
      modules/boonex/froala/classes/BxFroalaAlerts.php
  2. 20 0
      modules/boonex/froala/classes/BxFroalaConfig.php
  3. 20 0
      modules/boonex/froala/classes/BxFroalaDb.php
  4. 168 0
      modules/boonex/froala/classes/BxFroalaEditor.php
  5. 20 0
      modules/boonex/froala/classes/BxFroalaModule.php
  6. 30 0
      modules/boonex/froala/classes/BxFroalaStudioPage.php
  7. 20 0
      modules/boonex/froala/classes/BxFroalaTemplate.php
  8. 68 0
      modules/boonex/froala/install/config.php
  9. 20 0
      modules/boonex/froala/install/installer.php
  10. 13 0
      modules/boonex/froala/install/langs/en.xml
  11. 17 0
      modules/boonex/froala/install/sql/disable.sql
  12. 32 0
      modules/boonex/froala/install/sql/enable.sql
  13. 14 0
      modules/boonex/froala/install/sql/install.sql
  14. 7 0
      modules/boonex/froala/install/sql/uninstall.sql
  15. 21 0
      modules/boonex/froala/js/editor.js
  16. 5 0
      modules/boonex/froala/plugins/froala/License.txt
  17. 92 0
      modules/boonex/froala/plugins/froala/bower.json
  18. 31 0
      modules/boonex/froala/plugins/froala/composer.json
  19. 1268 0
      modules/boonex/froala/plugins/froala/css/froala_editor.css
  20. 6 0
      modules/boonex/froala/plugins/froala/css/froala_editor.min.css
  21. 2907 0
      modules/boonex/froala/plugins/froala/css/froala_editor.pkgd.css
  22. 6 0
      modules/boonex/froala/plugins/froala/css/froala_editor.pkgd.min.css
  23. 406 0
      modules/boonex/froala/plugins/froala/css/froala_style.css
  24. 6 0
      modules/boonex/froala/plugins/froala/css/froala_style.min.css
  25. 57 0
      modules/boonex/froala/plugins/froala/css/plugins/char_counter.css
  26. 7 0
      modules/boonex/froala/plugins/froala/css/plugins/char_counter.min.css
  27. 112 0
      modules/boonex/froala/plugins/froala/css/plugins/code_view.css
  28. 6 0
      modules/boonex/froala/plugins/froala/css/plugins/code_view.min.css
  29. 155 0
      modules/boonex/froala/plugins/froala/css/plugins/colors.css
  30. 6 0
      modules/boonex/froala/plugins/froala/css/plugins/colors.min.css
  31. 43 0
      modules/boonex/froala/plugins/froala/css/plugins/draggable.css
  32. 7 0
      modules/boonex/froala/plugins/froala/css/plugins/draggable.min.css
  33. 42 0
      modules/boonex/froala/plugins/froala/css/plugins/emoticons.css
  34. 7 0
      modules/boonex/froala/plugins/froala/css/plugins/emoticons.min.css
  35. 146 0
      modules/boonex/froala/plugins/froala/css/plugins/file.css
  36. 6 0
      modules/boonex/froala/plugins/froala/css/plugins/file.min.css
  37. 28 0
      modules/boonex/froala/plugins/froala/css/plugins/fullscreen.css
  38. 7 0
      modules/boonex/froala/plugins/froala/css/plugins/fullscreen.min.css
  39. 52 0
      modules/boonex/froala/plugins/froala/css/plugins/help.css
  40. 7 0
      modules/boonex/froala/plugins/froala/css/plugins/help.min.css
  41. 244 0
      modules/boonex/froala/plugins/froala/css/plugins/image.css
  42. 6 0
      modules/boonex/froala/plugins/froala/css/plugins/image.min.css
  43. 265 0
      modules/boonex/froala/plugins/froala/css/plugins/image_manager.css
  44. 6 0
      modules/boonex/froala/plugins/froala/css/plugins/image_manager.min.css
  45. 37 0
      modules/boonex/froala/plugins/froala/css/plugins/line_breaker.css
  46. 7 0
      modules/boonex/froala/plugins/froala/css/plugins/line_breaker.min.css
  47. 70 0
      modules/boonex/froala/plugins/froala/css/plugins/quick_insert.css
  48. 7 0
      modules/boonex/froala/plugins/froala/css/plugins/quick_insert.min.css
  49. 51 0
      modules/boonex/froala/plugins/froala/css/plugins/special_characters.css
  50. 7 0
      modules/boonex/froala/plugins/froala/css/plugins/special_characters.min.css
  51. 181 0
      modules/boonex/froala/plugins/froala/css/plugins/table.css
  52. 6 0
      modules/boonex/froala/plugins/froala/css/plugins/table.min.css
  53. 231 0
      modules/boonex/froala/plugins/froala/css/plugins/video.css
  54. 6 0
      modules/boonex/froala/plugins/froala/css/plugins/video.min.css
  55. 1281 0
      modules/boonex/froala/plugins/froala/css/themes/dark.css
  56. 6 0
      modules/boonex/froala/plugins/froala/css/themes/dark.min.css
  57. 1281 0
      modules/boonex/froala/plugins/froala/css/themes/gray.css
  58. 6 0
      modules/boonex/froala/plugins/froala/css/themes/gray.min.css
  59. 1281 0
      modules/boonex/froala/plugins/froala/css/themes/red.css
  60. 6 0
      modules/boonex/froala/plugins/froala/css/themes/red.min.css
  61. 1281 0
      modules/boonex/froala/plugins/froala/css/themes/royal.css
  62. 6 0
      modules/boonex/froala/plugins/froala/css/themes/royal.min.css
  63. 64 0
      modules/boonex/froala/plugins/froala/css/third_party/embedly.css
  64. 7 0
      modules/boonex/froala/plugins/froala/css/third_party/embedly.min.css
  65. 72 0
      modules/boonex/froala/plugins/froala/css/third_party/spell_checker.css
  66. 7 0
      modules/boonex/froala/plugins/froala/css/third_party/spell_checker.min.css
  67. BIN
      modules/boonex/froala/plugins/froala/editor.jpg
  68. 137 0
      modules/boonex/froala/plugins/froala/html/3rd-party/at.js.html
  69. 94 0
      modules/boonex/froala/plugins/froala/html/3rd-party/aviary/index.html
  70. 106 0
      modules/boonex/froala/plugins/froala/html/3rd-party/bootstrap/grid.html
  71. 100 0
      modules/boonex/froala/plugins/froala/html/3rd-party/bootstrap/lists.html
  72. 153 0
      modules/boonex/froala/plugins/froala/html/3rd-party/bootstrap/modal.html
  73. 85 0
      modules/boonex/froala/plugins/froala/html/3rd-party/code-mirror.html
  74. 97 0
      modules/boonex/froala/plugins/froala/html/3rd-party/jquery/mobile.html
  75. 156 0
      modules/boonex/froala/plugins/froala/html/3rd-party/jquery/ui_modal.html
  76. 90 0
      modules/boonex/froala/plugins/froala/html/3rd-party/require_js/index.html
  77. 6 0
      modules/boonex/froala/plugins/froala/html/3rd-party/require_js/js/app.js
  78. 36 0
      modules/boonex/froala/plugins/froala/html/3rd-party/require_js/js/lib/require.js
  79. 105 0
      modules/boonex/froala/plugins/froala/html/3rd-party/spell-checker/spell-checker.html
  80. 88 0
      modules/boonex/froala/plugins/froala/html/api/get_html.html
  81. 101 0
      modules/boonex/froala/plugins/froala/html/api/init_destroy.html
  82. 99 0
      modules/boonex/froala/plugins/froala/html/api/insert_html.html
  83. 79 0
      modules/boonex/froala/plugins/froala/html/api/live_code_preview.html
  84. 78 0
      modules/boonex/froala/plugins/froala/html/api/live_content_preview.html
  85. 130 0
      modules/boonex/froala/plugins/froala/html/api/selection.html
  86. 123 0
      modules/boonex/froala/plugins/froala/html/buttons/custom_buttons.html
  87. 113 0
      modules/boonex/froala/plugins/froala/html/buttons/custom_dropdown.html
  88. 90 0
      modules/boonex/froala/plugins/froala/html/buttons/external_button.html
  89. 85 0
      modules/boonex/froala/plugins/froala/html/buttons/subscript_superscript.html
  90. 92 0
      modules/boonex/froala/plugins/froala/html/events/blur_focus.html
  91. 72 0
      modules/boonex/froala/plugins/froala/html/events/content_changed.html
  92. 103 0
      modules/boonex/froala/plugins/froala/html/events/drop.html
  93. 76 0
      modules/boonex/froala/plugins/froala/html/events/image_removed.html
  94. 87 0
      modules/boonex/froala/plugins/froala/html/events/initialized_destroy.html
  95. 182 0
      modules/boonex/froala/plugins/froala/html/file_s3_upload.php
  96. 102 0
      modules/boonex/froala/plugins/froala/html/image/custom_button.html
  97. 96 0
      modules/boonex/froala/plugins/froala/html/image/default_width.html
  98. 103 0
      modules/boonex/froala/plugins/froala/html/image/image_styles.html
  99. 106 0
      modules/boonex/froala/plugins/froala/html/image/insert_base64.html
  100. 180 0
      modules/boonex/froala/plugins/froala/html/image_s3_upload.php

+ 29 - 0
modules/boonex/froala/classes/BxFroalaAlerts.php

@@ -0,0 +1,29 @@
+<?php defined('BX_DOL') or die('hack attempt');
+/**
+ * Copyright (c) UNA, Inc - https://una.io
+ * MIT License - https://opensource.org/licenses/MIT
+ *
+ * @defgroup    Froala Froala editor integration
+ * @ingroup     UnaModules
+ *
+ * @{
+ */
+
+class BxFroalaAlerts extends BxDolAlertsResponse
+{
+    protected $_oModule;
+    function __construct()
+    {
+        parent::__construct();
+        $this->_oModule = BxDolModule::getInstance('bx_froala');
+    }
+
+    public function response($o)
+    {
+        if ('system' == $o->sUnit && 'save_setting' == $o->sAction && 'bx_froala_option_list_id' == $o->aExtras['option']) {
+            $this->_oModule->serviceUpdateMergeFields();
+        }
+    }    
+}
+
+/** @} */

+ 20 - 0
modules/boonex/froala/classes/BxFroalaConfig.php

@@ -0,0 +1,20 @@
+<?php defined('BX_DOL') or die('hack attempt');
+/**
+ * Copyright (c) UNA, Inc - https://una.io
+ * MIT License - https://opensource.org/licenses/MIT
+ *
+ * @defgroup    Froala Froala editor integration
+ * @ingroup     UnaModules
+ *
+ * @{
+ */
+
+class BxFroalaConfig extends BxDolModuleConfig
+{
+    function __construct($aModule)
+    {
+        parent::__construct($aModule);
+    }
+}
+
+/** @} */

+ 20 - 0
modules/boonex/froala/classes/BxFroalaDb.php

@@ -0,0 +1,20 @@
+<?php defined('BX_DOL') or die('hack attempt');
+/**
+ * Copyright (c) UNA, Inc - https://una.io
+ * MIT License - https://opensource.org/licenses/MIT
+ *
+ * @defgroup    Froala Froala editor integration
+ * @ingroup     UnaModules
+ *
+ * @{
+ */
+
+class BxFroalaDb extends BxDolModuleDb
+{
+    function __construct(&$oConfig)
+    {
+        parent::__construct($oConfig);
+    }
+}
+
+/** @} */

+ 168 - 0
modules/boonex/froala/classes/BxFroalaEditor.php

@@ -0,0 +1,168 @@
+<?php defined('BX_DOL') or die('hack attempt');
+/**
+ * Copyright (c) UNA, Inc - https://una.io
+ * MIT License - https://opensource.org/licenses/MIT
+ *
+ * @defgroup    Froala Froala editor integration
+ * @ingroup     UnaModules
+ * 
+ * @{
+ */
+
+/**
+ * Froala editor representation.
+ * @see BxDolEditor
+ */
+class BxFroalaEditor extends BxDolEditor
+{
+    /**
+     * Common initialization params
+     */
+    protected static $CONF_COMMON = <<<EOS
+                    jQuery('{bx_var_selector}').froalaEditor();
+EOS;
+
+    /**
+     * Standard view initialization params
+     */
+    protected static $CONF_STANDARD = "
+    ";
+
+    /**
+     * Minimal view initialization params
+     */
+    protected static $CONF_MINI = "
+    ";
+
+    /**
+     * Full view initialization params
+     */
+    protected static $CONF_FULL = "
+    ";
+
+    protected $_sConfCustom = '';
+
+    /**
+     * Available editor languages
+     */
+    protected static $CONF_LANGS = array('en' => 1);
+
+    protected $_oTemplate;
+    protected $_bJsCssAdded = false;
+
+    public function __construct ($aObject, $oTemplate)
+    {
+        parent::__construct ($aObject);
+
+        if ($oTemplate)
+            $this->_oTemplate = $oTemplate;
+        else
+            $this->_oTemplate = BxDolTemplate::getInstance();
+    }
+
+    /**
+     * Set custom configuration option
+     */
+    public function setCustomConf ($s)
+    {
+        $this->_sConfCustom = $s;
+    }
+
+    /**
+     * Attach editor to HTML element, in most cases - textarea.
+     * @param $sSelector - jQuery selector to attach editor to.
+     * @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)
+    {
+        // set visual mode
+        switch ($iViewMode) {
+            case BX_EDITOR_MINI:
+                 $sToolsItems = self::$CONF_MINI;
+                break;
+            case BX_EDITOR_FULL:
+                $sToolsItems = self::$CONF_FULL;
+            break;
+            case BX_EDITOR_STANDARD:
+            default:
+                 $sToolsItems = self::$CONF_STANDARD;
+        }
+
+        // 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' => $sToolsItems,
+            '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_var_selector' => bx_js_string($sSelector, BX_ESCAPE_STR_APOS),
+            'bx_url_root' => bx_js_string(BX_DOL_URL_ROOT, BX_ESCAPE_STR_APOS),
+        ));
+
+        if ($bDynamicMode) {
+
+            $sCss = $this->_oTemplate->addCss(array(
+                BX_DIRECTORY_PATH_MODULES . 'boonex/froala/plugins/froala/css/|froala_editor.pkgd.min.css', 
+                BX_DIRECTORY_PATH_MODULES . 'boonex/froala/plugins/froala/css/|froala_style.min.css',
+            ), true);
+            $sScript = $sCss . "<script>
+                if ('undefined' == typeof(jQuery(document).froalaEditor)) {
+                    $.getScript('" . bx_js_string(BX_DOL_URL_MODULES . 'boonex/froala/js/editor.js', BX_ESCAPE_STR_APOS) . "');
+                    $.getScript('" . bx_js_string(BX_DOL_URL_MODULES . 'boonex/froala/plugins/froala/js/froala_editor.pkgd.min.js', BX_ESCAPE_STR_APOS) . "', function(data, textStatus, jqxhr) {
+                        $sInitEditor
+                    });
+                } else {
+                	setTimeout(function () {
+                    	$sInitEditor
+                    }, 10); // wait while html is rendered in case of dynamic adding html
+                }
+            </script>";
+
+        } else {
+
+            $sScript = "
+            <script>
+                $(document).ready(function () {
+                    $sInitEditor
+                });
+            </script>";
+
+        }
+
+        return $this->_addJsCss($bDynamicMode) . $sScript;
+    }
+
+    /**
+     * Add css/js files which are needed for editor display and functionality.
+     */
+    protected function _addJsCss($bDynamicMode = false, $sInitEditor = '')
+    {
+        if ($bDynamicMode)
+            return '';
+        if ($this->_bJsCssAdded)
+            return '';
+        $this->_oTemplate->addJs(array(
+            BX_DIRECTORY_PATH_MODULES . 'boonex/froala/plugins/froala/js/|froala_editor.pkgd.min.js',
+        ));
+        $this->_oTemplate->addCss(array(
+            BX_DIRECTORY_PATH_MODULES . 'boonex/froala/plugins/froala/css/|froala_editor.pkgd.min.css', 
+            BX_DIRECTORY_PATH_MODULES . 'boonex/froala/plugins/froala/css/|froala_style.min.css',
+        ));
+        $this->_bJsCssAdded = true;
+        return '';
+    }
+
+}
+
+/** @} */

+ 20 - 0
modules/boonex/froala/classes/BxFroalaModule.php

@@ -0,0 +1,20 @@
+<?php defined('BX_DOL') or die('hack attempt');
+/**
+ * Copyright (c) UNA, Inc - https://una.io
+ * MIT License - https://opensource.org/licenses/MIT
+ *
+ * @defgroup    Froala Froala editor integration
+ * @ingroup     UnaModules
+ *
+ * @{
+ */
+
+class BxFroalaModule extends BxDolModule
+{
+    function __construct(&$aModule)
+    {
+        parent::__construct($aModule);
+    }
+}
+
+/** @} */

+ 30 - 0
modules/boonex/froala/classes/BxFroalaStudioPage.php

@@ -0,0 +1,30 @@
+<?php defined('BX_DOL') or die('hack attempt');
+/**
+ * Copyright (c) UNA, Inc - https://una.io
+ * MIT License - https://opensource.org/licenses/MIT
+ *
+ * @defgroup    Froala Froala editor integration
+ * @ingroup     UnaModules
+ *
+ * @{
+ */
+
+class BxFroalaStudioPage extends BxTemplStudioModule
+{
+    function __construct($sModule = "", $sPage = "")
+    {
+        parent::__construct($sModule, $sPage);
+
+        $this->aMenuItems = array(
+            array('name' => 'settings', 'icon' => 'cogs', 'title' => '_adm_lmi_cpt_settings'),
+            array('name' => 'help', 'icon' => 'question', 'title' => '_bx_froala_information'),
+        );
+    }
+    
+    function getHelp ()
+    {
+        return _t('_bx_froala_information_block');
+    }
+}
+
+/** @} */

+ 20 - 0
modules/boonex/froala/classes/BxFroalaTemplate.php

@@ -0,0 +1,20 @@
+<?php defined('BX_DOL') or die('hack attempt');
+/**
+ * Copyright (c) UNA, Inc - https://una.io
+ * MIT License - https://opensource.org/licenses/MIT
+ *
+ * @defgroup    Froala Froala editor integration
+ * @ingroup     UnaModules
+ *
+ * @{
+ */
+
+class BxFroalaTemplate extends BxDolModuleTemplate
+{
+    function __construct(&$oConfig, &$oDb)
+    {
+        parent::__construct($oConfig, $oDb);
+    }
+}
+
+/** @} */

+ 68 - 0
modules/boonex/froala/install/config.php

@@ -0,0 +1,68 @@
+<?php
+/**
+ * Copyright (c) UNA, Inc - https://una.io
+ * MIT License - https://opensource.org/licenses/MIT
+ *
+ * @defgroup    Froala Froala editor integration
+ * @ingroup     UnaModules
+ *
+ * @{
+ */
+
+$aConfig = array(
+    /**
+     * Main Section.
+     */
+    'type' => BX_DOL_MODULE_TYPE_MODULE,
+    'name' => 'bx_froala',
+    'title' => 'Froala',
+    'note' => 'Froala editor integration.',
+    'version' => '9.0.0.DEV',
+    'vendor' => 'BoonEx',
+	'help_url' => 'http://feed.una.io/?section={module_name}',
+
+    'compatible_with' => array(
+        '9.0.x'
+    ),
+
+    /**
+     * 'home_dir' and 'home_uri' - should be unique. Don't use spaces in 'home_uri' and the other special chars.
+     */
+    'home_dir' => 'boonex/froala/',
+    'home_uri' => 'froala',
+
+    'db_prefix' => 'bx_froala_',
+    'class_prefix' => 'BxFroala',
+
+    /**
+     * Category for language keys.
+     */
+    'language_category' => 'Froala',
+
+    /**
+     * Installation/Uninstallation Section.
+     */
+    'install' => array(
+        'execute_sql' => 1,
+        'update_languages' => 1,
+    ),
+    'uninstall' => array (
+        'execute_sql' => 1,
+        'update_languages' => 1,
+    ),
+    'enable' => array(
+        'execute_sql' => 1,
+        'clear_db_cache' => 1,
+    ),
+    'disable' => array(
+        'execute_sql' => 1,
+        'clear_db_cache' => 1,
+    ),
+
+    /**
+     * Dependencies Section
+     */
+    'dependencies' => array(),
+);
+
+/** @} */

+ 20 - 0
modules/boonex/froala/install/installer.php

@@ -0,0 +1,20 @@
+<?php defined('BX_DOL') or die('hack attempt');
+/**
+ * Copyright (c) UNA, Inc - https://una.io
+ * MIT License - https://opensource.org/licenses/MIT
+ *
+ * @defgroup    Froala Froala editor integration
+ * @ingroup     UnaModules
+ *
+ * @{
+ */
+
+class BxFroalaInstaller extends BxDolStudioInstaller
+{
+    function __construct($aConfig)
+    {
+        parent::__construct($aConfig);
+    }
+}
+
+/** @} */

+ 13 - 0
modules/boonex/froala/install/langs/en.xml

@@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="utf-8"?>
+<resources name="en" flag="gb" title="English">
+	<string name="_sys_module_froala"><![CDATA[Froala]]></string>
+	<string name="_bx_froala"><![CDATA[Froala]]></string>
+
+	<string name="_bx_froala_setting"><![CDATA[Froala Setting]]></string>
+    <string name="_bx_froala_adm_stg_cpt_type"><![CDATA[Froala]]></string>
+    <string name="_bx_froala_adm_stg_cpt_category_general"><![CDATA[General]]></string>
+    <string name="_bx_froala_option_api_key"><![CDATA[Froala option]]></string>
+
+	<string name="_bx_froala_information"><![CDATA[Information]]></string>
+    <string name="_bx_froala_information_block"><![CDATA[Info here]]></string>
+</resources>

+ 17 - 0
modules/boonex/froala/install/sql/disable.sql

@@ -0,0 +1,17 @@
+
+-- Settings
+
+DELETE FROM `top`, `toc`, `to` USING `sys_options_types` AS `top` LEFT JOIN `sys_options_categories` AS `toc` ON `top`.`id`=`toc`.`type_id` LEFT JOIN `sys_options` AS `to` ON `toc`.`id`=`to`.`category_id` WHERE `top`.`name` = 'bx_froala';
+
+-- Editor
+
+DELETE FROM `sys_objects_editor` WHERE `object` = 'bx_froala';
+
+UPDATE `sys_options` SET `value` = 'sys_tinymce' WHERE `name` = 'sys_editor_default';
+
+-- Alerts
+
+SET @iHandlerId := (SELECT `id` FROM `sys_alerts_handlers` WHERE `name` = 'bx_froala');
+
+DELETE FROM `sys_alerts_handlers` WHERE `id`  = @iHandlerId;
+DELETE FROM `sys_alerts` WHERE `handler_id` =  @iHandlerId ;

+ 32 - 0
modules/boonex/froala/install/sql/enable.sql

@@ -0,0 +1,32 @@
+
+-- Settings
+
+SET @iTypeOrder = (SELECT MAX(`order`) FROM `sys_options_types` WHERE `group` = 'modules');
+INSERT INTO `sys_options_types` (`group`, `name`, `caption`, `icon`, `order`) VALUES 
+('modules', 'bx_froala', '_bx_froala_adm_stg_cpt_type', 'bx_froala@modules/boonex/froala/|std-icon.svg', IF(NOT ISNULL(@iTypeOrder), @iTypeOrder + 1, 1));
+SET @iTypeId = LAST_INSERT_ID();
+
+INSERT INTO `sys_options_categories` (`type_id`, `name`, `caption`, `order` )  
+VALUES (@iTypeId, 'bx_froala_general', '_bx_froala_adm_stg_cpt_category_general', 1);
+SET @iCategId = LAST_INSERT_ID();
+
+INSERT INTO `sys_options` (`name`, `value`, `category_id`, `caption`, `type`, `extra`, `check`, `check_error`, `order`) VALUES
+('bx_froala_option_api_key', '', @iCategId, '_bx_froala_option_api_key', 'digit', '', '', '', 10);
+
+-- Editor
+
+INSERT INTO `sys_objects_editor` (`object`, `title`, `skin`, `override_class_name`, `override_class_file`) VALUES
+('bx_froala', 'Froala', '', 'BxFroalaEditor', 'modules/boonex/froala/classes/BxFroalaEditor.php');
+
+UPDATE `sys_options` SET `value` = 'bx_froala' WHERE `name` = 'sys_editor_default';
+
+
+-- Alerts
+
+INSERT INTO `sys_alerts_handlers` SET `name` = 'bx_froala', `class` = 'BxFroalaAlerts', `file` = 'modules/boonex/froala/classes/BxFroalaAlerts.php';
+
+SET @iHandlerId := (SELECT `id` FROM `sys_alerts_handlers`  WHERE `name` = 'bx_froala');
+
+INSERT INTO `sys_alerts` (`unit`, `action`, `handler_id`) VALUES
+('system', 'save_setting', @iHandlerId);
+

+ 14 - 0
modules/boonex/froala/install/sql/install.sql

@@ -0,0 +1,14 @@
+
+-- Studio page and widget
+
+INSERT INTO `sys_std_pages`(`index`, `name`, `header`, `caption`, `icon`) VALUES
+(3, 'bx_froala', '_bx_froala', '_bx_froala', 'bx_froala@modules/boonex/froala/|std-icon.svg');
+SET @iPageId = LAST_INSERT_ID();
+
+SET @iParentPageId = (SELECT `id` FROM `sys_std_pages` WHERE `name` = 'home');
+SET @iParentPageOrder = (SELECT MAX(`order`) FROM `sys_std_pages_widgets` WHERE `page_id` = @iParentPageId);
+INSERT INTO `sys_std_widgets` (`page_id`, `module`, `url`, `click`, `icon`, `caption`, `cnt_notices`, `cnt_actions`) VALUES
+(@iPageId, 'bx_froala', '{url_studio}module.php?name=bx_froala', '', 'bx_froala@modules/boonex/froala/|std-icon.svg', '_bx_froala', '', 'a:4:{s:6:"module";s:6:"system";s:6:"method";s:11:"get_actions";s:6:"params";a:0:{}s:5:"class";s:18:"TemplStudioModules";}');
+INSERT INTO `sys_std_pages_widgets` (`page_id`, `widget_id`, `order`) VALUES
+(@iParentPageId, LAST_INSERT_ID(), IF(ISNULL(@iParentPageOrder), 1, @iParentPageOrder + 1));
+

+ 7 - 0
modules/boonex/froala/install/sql/uninstall.sql

@@ -0,0 +1,7 @@
+
+-- Studio page and widget
+
+DELETE FROM `tp`, `tw`, `tpw`
+USING `sys_std_pages` AS `tp`, `sys_std_widgets` AS `tw`, `sys_std_pages_widgets` AS `tpw`
+WHERE `tp`.`id` = `tw`.`page_id` AND `tw`.`id` = `tpw`.`widget_id` AND `tp`.`name` = 'bx_froala';
+

+ 21 - 0
modules/boonex/froala/js/editor.js

@@ -0,0 +1,21 @@
+/**
+ * Copyright (c) UNA, Inc - https://una.io
+ * MIT License - https://opensource.org/licenses/MIT
+ *
+ * @defgroup    Froala Froala editor integration
+ * @ingroup     UnaModules
+ * 
+ * @{
+ */
+
+function bx_editor_insert_img (sEditorId, sImgId, sImgUrl, sClasses) 
+{
+
+}
+
+function bx_editor_remove_img (aEditorIds, aMarkers) 
+{
+
+}
+
+/** @} */

+ 5 - 0
modules/boonex/froala/plugins/froala/License.txt

@@ -0,0 +1,5 @@
+Froala WYSIWYG Editor
+================
+
+In order to use Froala Editor you have to purchase a license from: https://www.froala.com/wysiwyg-editor/pricing.
+For more informations regarding the license please read https://www.froala.com/wysiwyg-editor/terms.

+ 92 - 0
modules/boonex/froala/plugins/froala/bower.json

@@ -0,0 +1,92 @@
+{
+  "name": "froala-wysiwyg-editor",
+  "description": "A beautiful jQuery WYSIWYG HTML rich text editor. High performance and modern design make it easy to use for developers and loved by users.",
+  "homepage": "https://www.froala.com/wysiwyg-editor",
+  "license": "https://www.froala.com/wysiwyg-editor/pricing",
+  "repository": {
+    "type": "git",
+    "url": "git://github.com/froala/wysiwyg-editor.git"
+  },
+  "keywords": [
+    "froala",
+    "froala-editor",
+    "froala-wysiwyg",
+    "html",
+    "text",
+    "editor",
+    "wysiwyg",
+    "jquery-plugin",
+    "rich editor",
+    "rich text editor",
+    "rte",
+    "javascript",
+    "jquery"
+  ],
+  "moduleType": "globals",
+  "main": [
+    "css/froala_editor.min.css",
+    "css/froala_editor.pkgd.min.css",
+    "css/froala_style.min.css",
+    "css/plugins/char_counter.min.css",
+    "css/plugins/code_view.min.css",
+    "css/plugins/colors.min.css",
+    "css/plugins/draggable.min.css",
+    "css/plugins/emoticons.min.css",
+    "css/plugins/file.min.css",
+    "css/plugins/fullscreen.min.css",
+    "css/plugins/help.min.css",
+    "css/plugins/image_manager.min.css",
+    "css/plugins/image.min.css",
+    "css/plugins/line_breaker.min.css",
+    "css/plugins/quick_insert.min.css",
+    "css/plugins/special_characters.min.css",
+    "css/plugins/table.min.css",
+    "css/plugins/video.min.css",
+    "css/third_party/embedly.min.css",
+    "css/third_party/spell_checker.min.css",
+    "js/froala_editor.min.js",
+    "js/froala_editor.pkgd.min.js",
+    "js/plugins/align.min.js",
+    "js/plugins/char_counter.min.js",
+    "js/plugins/code_beautifier.min.js",
+    "js/plugins/code_view.min.js",
+    "js/plugins/colors.min.js",
+    "js/plugins/draggable.min.js",
+    "js/plugins/emoticons.min.js",
+    "js/plugins/entities.min.js",
+    "js/plugins/file.min.js",
+    "js/plugins/font_family.min.js",
+    "js/plugins/font_size.min.js",
+    "js/plugins/fullscreen.min.js",
+    "js/plugins/help.min.js",
+    "js/plugins/image.min.js",
+    "js/plugins/image_manager.min.js",
+    "js/plugins/inline_style.min.js",
+    "js/plugins/line_breaker.min.js",
+    "js/plugins/link.min.js",
+    "js/plugins/lists.min.js",
+    "js/plugins/paragraph_format.min.js",
+    "js/plugins/paragraph_style.min.js",
+    "js/plugins/print.min.js",
+    "js/plugins/quick_insert.min.js",
+    "js/plugins/quote.min.js",
+    "js/plugins/save.min.js",
+    "js/plugins/special_characters.min.js",
+    "js/plugins/table.min.js",
+    "js/plugins/url.min.js",
+    "js/plugins/video.min.js",
+    "js/plugins/word_paste.min.js",
+    "js/third_party/embedly.min.js",
+    "js/third_party/image_aviary.min.js",
+    "js/third_party/spell_checker.min.js"
+  ],
+  "ignore": [
+    "html",
+    "img",
+    "package.json"
+  ],
+  "dependencies": {
+    "jquery": ">=1.11.0",
+    "font-awesome": ">=4.4.0"
+  }
+}

+ 31 - 0
modules/boonex/froala/plugins/froala/composer.json

@@ -0,0 +1,31 @@
+{
+  "name": "froala/wysiwyg-editor",
+  "description": "A beautiful jQuery WYSIWYG HTML rich text editor. High performance and modern design make it easy to use for developers and loved by users.",
+  "type": "component",
+  "homepage": "https://www.froala.com/wysiwyg-editor",
+  "license": "proprietary",
+  "support": {
+    "issues": "https://www.froala.com/wysiwyg-editor/contact"
+  },
+  "keywords": [
+    "froala",
+    "froala-editor",
+    "froala-wysiwyg",
+    "html",
+    "text",
+    "editor",
+    "wysiwyg",
+    "jquery-plugin",
+    "rich editor",
+    "rich text editor",
+    "rte",
+    "javascript",
+    "jquery"
+  ],
+  "authors": [
+    {
+      "name": "Froala Labs",
+      "email": "support@froala.com"
+    }
+  ]
+}

+ 1268 - 0
modules/boonex/froala/plugins/froala/css/froala_editor.css

@@ -0,0 +1,1268 @@
+/*!
+ * froala_editor v2.7.5 (https://www.froala.com/wysiwyg-editor)
+ * License https://froala.com/wysiwyg-editor/terms/
+ * Copyright 2014-2018 Froala Labs
+ */
+
+.clearfix::after {
+  clear: both;
+  display: block;
+  content: "";
+  height: 0;
+}
+.hide-by-clipping {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  border: 0;
+}
+.fr-element,
+.fr-element:focus {
+  outline: 0px solid transparent;
+}
+.fr-box.fr-basic .fr-element {
+  color: #000000;
+  padding: 16px;
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+  overflow-x: auto;
+  min-height: 52px;
+}
+.fr-box.fr-basic.fr-rtl .fr-element {
+  text-align: right;
+}
+.fr-element {
+  background: transparent;
+  position: relative;
+  z-index: 2;
+  -webkit-user-select: auto;
+}
+.fr-element a {
+  user-select: auto;
+  -o-user-select: auto;
+  -moz-user-select: auto;
+  -khtml-user-select: auto;
+  -webkit-user-select: auto;
+  -ms-user-select: auto;
+}
+.fr-element.fr-disabled {
+  user-select: none;
+  -o-user-select: none;
+  -moz-user-select: none;
+  -khtml-user-select: none;
+  -webkit-user-select: none;
+  -ms-user-select: none;
+}
+.fr-element [contenteditable="true"] {
+  outline: 0px solid transparent;
+  user-select: text;
+  -o-user-select: text;
+  -moz-user-select: text;
+  -khtml-user-select: text;
+  -webkit-user-select: text;
+  -ms-user-select: text;
+}
+.fr-box a.fr-floating-btn {
+  -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 1px 1px rgba(0, 0, 0, 0.16);
+  -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 1px 1px rgba(0, 0, 0, 0.16);
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 1px 1px rgba(0, 0, 0, 0.16);
+  border-radius: 100%;
+  -moz-border-radius: 100%;
+  -webkit-border-radius: 100%;
+  -moz-background-clip: padding;
+  -webkit-background-clip: padding-box;
+  background-clip: padding-box;
+  height: 32px;
+  width: 32px;
+  background: #ffffff;
+  color: #1e88e5;
+  -webkit-transition: background 0.2s ease 0s, color 0.2s ease 0s, transform 0.2s ease 0s;
+  -moz-transition: background 0.2s ease 0s, color 0.2s ease 0s, transform 0.2s ease 0s;
+  -ms-transition: background 0.2s ease 0s, color 0.2s ease 0s, transform 0.2s ease 0s;
+  -o-transition: background 0.2s ease 0s, color 0.2s ease 0s, transform 0.2s ease 0s;
+  outline: none;
+  left: 0;
+  top: 0;
+  line-height: 32px;
+  -webkit-transform: scale(0);
+  -moz-transform: scale(0);
+  -ms-transform: scale(0);
+  -o-transform: scale(0);
+  text-align: center;
+  display: block;
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+  border: none;
+}
+.fr-box a.fr-floating-btn svg {
+  -webkit-transition: transform 0.2s ease 0s;
+  -moz-transition: transform 0.2s ease 0s;
+  -ms-transition: transform 0.2s ease 0s;
+  -o-transition: transform 0.2s ease 0s;
+  fill: #1e88e5;
+}
+.fr-box a.fr-floating-btn i,
+.fr-box a.fr-floating-btn svg {
+  font-size: 14px;
+  line-height: 32px;
+}
+.fr-box a.fr-floating-btn.fr-btn + .fr-btn {
+  margin-left: 10px;
+}
+.fr-box a.fr-floating-btn:hover {
+  background: #ebebeb;
+  cursor: pointer;
+}
+.fr-box a.fr-floating-btn:hover svg {
+  fill: #1e88e5;
+}
+.fr-box .fr-visible a.fr-floating-btn {
+  -webkit-transform: scale(1);
+  -moz-transform: scale(1);
+  -ms-transform: scale(1);
+  -o-transform: scale(1);
+}
+iframe.fr-iframe {
+  width: 100%;
+  border: none;
+  position: relative;
+  display: block;
+  z-index: 2;
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+}
+.fr-wrapper {
+  position: relative;
+  z-index: 1;
+}
+.fr-wrapper::after {
+  clear: both;
+  display: block;
+  content: "";
+  height: 0;
+}
+.fr-wrapper .fr-placeholder {
+  position: absolute;
+  font-size: 12px;
+  color: #aaaaaa;
+  z-index: 1;
+  display: none;
+  top: 0;
+  left: 0;
+  right: 0;
+  overflow: hidden;
+}
+.fr-wrapper.show-placeholder .fr-placeholder {
+  display: block;
+}
+.fr-wrapper ::-moz-selection {
+  background: #b5d6fd;
+  color: #000000;
+}
+.fr-wrapper ::selection {
+  background: #b5d6fd;
+  color: #000000;
+}
+.fr-box.fr-basic .fr-wrapper {
+  background: #ffffff;
+  border: 0px;
+  border-top: 0;
+  top: 0;
+  left: 0;
+}
+.fr-box.fr-basic.fr-top .fr-wrapper {
+  border-top: 0;
+  border-radius: 0 0 2px 2px;
+  -moz-border-radius: 0 0 2px 2px;
+  -webkit-border-radius: 0 0 2px 2px;
+  -moz-background-clip: padding;
+  -webkit-background-clip: padding-box;
+  background-clip: padding-box;
+  -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 1px 1px rgba(0, 0, 0, 0.16);
+  -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 1px 1px rgba(0, 0, 0, 0.16);
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 1px 1px rgba(0, 0, 0, 0.16);
+}
+.fr-box.fr-basic.fr-bottom .fr-wrapper {
+  border-bottom: 0;
+  border-radius: 2px 2px 0 0;
+  -moz-border-radius: 2px 2px 0 0;
+  -webkit-border-radius: 2px 2px 0 0;
+  -moz-background-clip: padding;
+  -webkit-background-clip: padding-box;
+  background-clip: padding-box;
+  -webkit-box-shadow: 0 -1px 3px rgba(0, 0, 0, 0.12), 0 -1px 1px 1px rgba(0, 0, 0, 0.16);
+  -moz-box-shadow: 0 -1px 3px rgba(0, 0, 0, 0.12), 0 -1px 1px 1px rgba(0, 0, 0, 0.16);
+  box-shadow: 0 -1px 3px rgba(0, 0, 0, 0.12), 0 -1px 1px 1px rgba(0, 0, 0, 0.16);
+}
+.fr-tooltip {
+  position: absolute;
+  top: 0;
+  left: 0;
+  padding: 0 8px;
+  border-radius: 2px;
+  -moz-border-radius: 2px;
+  -webkit-border-radius: 2px;
+  -moz-background-clip: padding;
+  -webkit-background-clip: padding-box;
+  background-clip: padding-box;
+  -webkit-box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 2px 2px 1px rgba(0, 0, 0, 0.14);
+  -moz-box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 2px 2px 1px rgba(0, 0, 0, 0.14);
+  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 2px 2px 1px rgba(0, 0, 0, 0.14);
+  background: #222222;
+  color: #ffffff;
+  font-size: 11px;
+  line-height: 22px;
+  font-family: Arial, Helvetica, sans-serif;
+  -webkit-transition: opacity 0.2s ease 0s;
+  -moz-transition: opacity 0.2s ease 0s;
+  -ms-transition: opacity 0.2s ease 0s;
+  -o-transition: opacity 0.2s ease 0s;
+  -webkit-opacity: 0;
+  -moz-opacity: 0;
+  opacity: 0;
+  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
+  left: -3000px;
+  user-select: none;
+  -o-user-select: none;
+  -moz-user-select: none;
+  -khtml-user-select: none;
+  -webkit-user-select: none;
+  -ms-user-select: none;
+  z-index: 2147483647;
+  text-rendering: optimizelegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+.fr-tooltip.fr-visible {
+  -webkit-opacity: 1;
+  -moz-opacity: 1;
+  opacity: 1;
+  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
+}
+.fr-toolbar .fr-command.fr-btn,
+.fr-popup .fr-command.fr-btn {
+  background: transparent;
+  color: #222222;
+  -moz-outline: 0;
+  outline: 0;
+  border: 0;
+  line-height: 1;
+  cursor: pointer;
+  text-align: left;
+  margin: 0px 2px;
+  -webkit-transition: background 0.2s ease 0s;
+  -moz-transition: background 0.2s ease 0s;
+  -ms-transition: background 0.2s ease 0s;
+  -o-transition: background 0.2s ease 0s;
+  border-radius: 0;
+  -moz-border-radius: 0;
+  -webkit-border-radius: 0;
+  -moz-background-clip: padding;
+  -webkit-background-clip: padding-box;
+  background-clip: padding-box;
+  z-index: 2;
+  position: relative;
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+  text-decoration: none;
+  user-select: none;
+  -o-user-select: none;
+  -moz-user-select: none;
+  -khtml-user-select: none;
+  -webkit-user-select: none;
+  -ms-user-select: none;
+  float: left;
+  padding: 0;
+  width: 38px;
+  height: 38px;
+}
+.fr-toolbar .fr-command.fr-btn::-moz-focus-inner,
+.fr-popup .fr-command.fr-btn::-moz-focus-inner {
+  border: 0;
+  padding: 0;
+}
+.fr-toolbar .fr-command.fr-btn.fr-btn-text,
+.fr-popup .fr-command.fr-btn.fr-btn-text {
+  width: auto;
+}
+.fr-toolbar .fr-command.fr-btn i,
+.fr-popup .fr-command.fr-btn i,
+.fr-toolbar .fr-command.fr-btn svg,
+.fr-popup .fr-command.fr-btn svg {
+  display: block;
+  font-size: 14px;
+  width: 14px;
+  margin: 12px 12px;
+  text-align: center;
+  float: none;
+}
+.fr-toolbar .fr-command.fr-btn span.fr-sr-only,
+.fr-popup .fr-command.fr-btn span.fr-sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  border: 0;
+}
+.fr-toolbar .fr-command.fr-btn span,
+.fr-popup .fr-command.fr-btn span {
+  font-size: 14px;
+  display: block;
+  line-height: 17px;
+  min-width: 34px;
+  float: left;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: nowrap;
+  height: 17px;
+  font-weight: bold;
+  padding: 0 2px;
+}
+.fr-toolbar .fr-command.fr-btn img,
+.fr-popup .fr-command.fr-btn img {
+  margin: 12px 12px;
+  width: 14px;
+}
+.fr-toolbar .fr-command.fr-btn.fr-active,
+.fr-popup .fr-command.fr-btn.fr-active {
+  color: #1e88e5;
+  background: transparent;
+}
+.fr-toolbar .fr-command.fr-btn.fr-dropdown.fr-selection,
+.fr-popup .fr-command.fr-btn.fr-dropdown.fr-selection {
+  width: auto;
+}
+.fr-toolbar .fr-command.fr-btn.fr-dropdown.fr-selection span,
+.fr-popup .fr-command.fr-btn.fr-dropdown.fr-selection span {
+  font-weight: normal;
+}
+.fr-toolbar .fr-command.fr-btn.fr-dropdown i,
+.fr-popup .fr-command.fr-btn.fr-dropdown i,
+.fr-toolbar .fr-command.fr-btn.fr-dropdown span,
+.fr-popup .fr-command.fr-btn.fr-dropdown span,
+.fr-toolbar .fr-command.fr-btn.fr-dropdown img,
+.fr-popup .fr-command.fr-btn.fr-dropdown img,
+.fr-toolbar .fr-command.fr-btn.fr-dropdown svg,
+.fr-popup .fr-command.fr-btn.fr-dropdown svg {
+  margin-left: 8px;
+  margin-right: 16px;
+}
+.fr-toolbar .fr-command.fr-btn.fr-dropdown.fr-active,
+.fr-popup .fr-command.fr-btn.fr-dropdown.fr-active {
+  color: #222222;
+  background: #d6d6d6;
+}
+.fr-toolbar .fr-command.fr-btn.fr-dropdown.fr-active:hover,
+.fr-popup .fr-command.fr-btn.fr-dropdown.fr-active:hover,
+.fr-toolbar .fr-command.fr-btn.fr-dropdown.fr-active:focus,
+.fr-popup .fr-command.fr-btn.fr-dropdown.fr-active:focus {
+  background: #d6d6d6 !important;
+  color: #222222 !important;
+}
+.fr-toolbar .fr-command.fr-btn.fr-dropdown.fr-active:hover::after,
+.fr-popup .fr-command.fr-btn.fr-dropdown.fr-active:hover::after,
+.fr-toolbar .fr-command.fr-btn.fr-dropdown.fr-active:focus::after,
+.fr-popup .fr-command.fr-btn.fr-dropdown.fr-active:focus::after {
+  border-top-color: #222222 !important;
+}
+.fr-toolbar .fr-command.fr-btn.fr-dropdown::after,
+.fr-popup .fr-command.fr-btn.fr-dropdown::after {
+  position: absolute;
+  width: 0;
+  height: 0;
+  border-left: 4px solid transparent;
+  border-right: 4px solid transparent;
+  border-top: 4px solid #222222;
+  right: 4px;
+  top: 17px;
+  content: "";
+}
+.fr-toolbar .fr-command.fr-btn.fr-disabled,
+.fr-popup .fr-command.fr-btn.fr-disabled {
+  color: #bdbdbd;
+  cursor: default;
+}
+.fr-toolbar .fr-command.fr-btn.fr-disabled::after,
+.fr-popup .fr-command.fr-btn.fr-disabled::after {
+  border-top-color: #bdbdbd !important;
+}
+.fr-toolbar .fr-command.fr-btn.fr-hidden,
+.fr-popup .fr-command.fr-btn.fr-hidden {
+  display: none;
+}
+.fr-toolbar.fr-disabled .fr-btn,
+.fr-popup.fr-disabled .fr-btn,
+.fr-toolbar.fr-disabled .fr-btn.fr-active,
+.fr-popup.fr-disabled .fr-btn.fr-active {
+  color: #bdbdbd;
+}
+.fr-toolbar.fr-disabled .fr-btn.fr-dropdown::after,
+.fr-popup.fr-disabled .fr-btn.fr-dropdown::after,
+.fr-toolbar.fr-disabled .fr-btn.fr-active.fr-dropdown::after,
+.fr-popup.fr-disabled .fr-btn.fr-active.fr-dropdown::after {
+  border-top-color: #bdbdbd;
+}
+.fr-toolbar.fr-rtl .fr-command.fr-btn,
+.fr-popup.fr-rtl .fr-command.fr-btn {
+  float: right;
+}
+.fr-toolbar.fr-inline .fr-command.fr-btn:not(.fr-hidden) {
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  float: none;
+}
+.fr-desktop .fr-command:hover,
+.fr-desktop .fr-command:focus {
+  outline: 0;
+  color: #222222;
+  background: #ebebeb;
+}
+.fr-desktop .fr-command:hover::after,
+.fr-desktop .fr-command:focus::after {
+  border-top-color: #222222 !important;
+}
+.fr-desktop .fr-command.fr-selected {
+  color: #222222;
+  background: #d6d6d6;
+}
+.fr-desktop .fr-command.fr-active:hover,
+.fr-desktop .fr-command.fr-active:focus {
+  color: #1e88e5;
+  background: #ebebeb;
+}
+.fr-desktop .fr-command.fr-active.fr-selected {
+  color: #1e88e5;
+  background: #d6d6d6;
+}
+.fr-desktop .fr-command.fr-disabled:hover,
+.fr-desktop .fr-command.fr-disabled:focus,
+.fr-desktop .fr-command.fr-disabled.fr-selected {
+  background: transparent;
+}
+.fr-desktop.fr-disabled .fr-command:hover,
+.fr-desktop.fr-disabled .fr-command:focus,
+.fr-desktop.fr-disabled .fr-command.fr-selected {
+  background: transparent;
+}
+.fr-toolbar.fr-mobile .fr-command.fr-blink,
+.fr-popup.fr-mobile .fr-command.fr-blink {
+  background: transparent;
+}
+.fr-command.fr-btn + .fr-dropdown-menu {
+  display: inline-block;
+  position: absolute;
+  right: auto;
+  bottom: auto;
+  height: auto;
+  z-index: 4;
+  -webkit-overflow-scrolling: touch;
+  overflow: hidden;
+  zoom: 1;
+  border-radius: 0 0 2px 2px;
+  -moz-border-radius: 0 0 2px 2px;
+  -webkit-border-radius: 0 0 2px 2px;
+  -moz-background-clip: padding;
+  -webkit-background-clip: padding-box;
+  background-clip: padding-box;
+}
+.fr-command.fr-btn + .fr-dropdown-menu.test-height .fr-dropdown-wrapper {
+  -webkit-transition: none;
+  -moz-transition: none;
+  -ms-transition: none;
+  -o-transition: none;
+  height: auto;
+  max-height: 275px;
+}
+.fr-command.fr-btn + .fr-dropdown-menu .fr-dropdown-wrapper {
+  background: #ffffff;
+  padding: 0;
+  margin: auto;
+  display: inline-block;
+  text-align: left;
+  position: relative;
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+  -webkit-transition: max-height 0.2s ease 0s;
+  -moz-transition: max-height 0.2s ease 0s;
+  -ms-transition: max-height 0.2s ease 0s;
+  -o-transition: max-height 0.2s ease 0s;
+  margin-top: 0;
+  float: left;
+  max-height: 0;
+  height: 0;
+  margin-top: 0 !important;
+}
+.fr-command.fr-btn + .fr-dropdown-menu .fr-dropdown-wrapper .fr-dropdown-content {
+  overflow: auto;
+  position: relative;
+  max-height: 275px;
+}
+.fr-command.fr-btn + .fr-dropdown-menu .fr-dropdown-wrapper .fr-dropdown-content ul.fr-dropdown-list {
+  list-style-type: none;
+  margin: 0;
+  padding: 0;
+}
+.fr-command.fr-btn + .fr-dropdown-menu .fr-dropdown-wrapper .fr-dropdown-content ul.fr-dropdown-list li {
+  padding: 0;
+  margin: 0;
+  font-size: 15px;
+}
+.fr-command.fr-btn + .fr-dropdown-menu .fr-dropdown-wrapper .fr-dropdown-content ul.fr-dropdown-list li a {
+  padding: 0 24px;
+  line-height: 200%;
+  display: block;
+  cursor: pointer;
+  white-space: nowrap;
+  color: inherit;
+  text-decoration: none;
+}
+.fr-command.fr-btn + .fr-dropdown-menu .fr-dropdown-wrapper .fr-dropdown-content ul.fr-dropdown-list li a.fr-active {
+  background: #d6d6d6;
+}
+.fr-command.fr-btn + .fr-dropdown-menu .fr-dropdown-wrapper .fr-dropdown-content ul.fr-dropdown-list li a.fr-disabled {
+  color: #bdbdbd;
+  cursor: default;
+}
+.fr-command.fr-btn:not(.fr-active) + .fr-dropdown-menu {
+  left: -3000px !important;
+}
+.fr-command.fr-btn.fr-active + .fr-dropdown-menu {
+  display: inline-block;
+  -webkit-box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 2px 2px 1px rgba(0, 0, 0, 0.14);
+  -moz-box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 2px 2px 1px rgba(0, 0, 0, 0.14);
+  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 2px 2px 1px rgba(0, 0, 0, 0.14);
+}
+.fr-command.fr-btn.fr-active + .fr-dropdown-menu .fr-dropdown-wrapper {
+  height: auto;
+  max-height: 275px;
+}
+.fr-bottom > .fr-command.fr-btn + .fr-dropdown-menu {
+  border-radius: 2px 2px 0 0;
+  -moz-border-radius: 2px 2px 0 0;
+  -webkit-border-radius: 2px 2px 0 0;
+  -moz-background-clip: padding;
+  -webkit-background-clip: padding-box;
+  background-clip: padding-box;
+}
+.fr-toolbar.fr-rtl .fr-dropdown-wrapper,
+.fr-popup.fr-rtl .fr-dropdown-wrapper {
+  text-align: right !important;
+}
+body.prevent-scroll {
+  overflow: hidden;
+}
+body.prevent-scroll.fr-mobile {
+  position: fixed;
+  -webkit-overflow-scrolling: touch;
+}
+.fr-modal {
+  color: #222222;
+  font-family: Arial, Helvetica, sans-serif;
+  position: fixed;
+  overflow-x: auto;
+  overflow-y: scroll;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: 0;
+  width: 100%;
+  z-index: 2147483640;
+  text-rendering: optimizelegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  text-align: center;
+  line-height: 1.2;
+}
+.fr-modal.fr-middle .fr-modal-wrapper {
+  margin-top: 0;
+  margin-bottom: 0;
+  margin-left: auto;
+  margin-right: auto;
+  top: 50%;
+  left: 50%;
+  -webkit-transform: translate(-50%, -50%);
+  -moz-transform: translate(-50%, -50%);
+  -ms-transform: translate(-50%, -50%);
+  -o-transform: translate(-50%, -50%);
+  position: absolute;
+}
+.fr-modal .fr-modal-wrapper {
+  border-radius: 2px;
+  -moz-border-radius: 2px;
+  -webkit-border-radius: 2px;
+  -moz-background-clip: padding;
+  -webkit-background-clip: padding-box;
+  background-clip: padding-box;
+  margin: 20px auto;
+  display: inline-block;
+  background: #ffffff;
+  min-width: 300px;
+  -webkit-box-shadow: 0 5px 8px rgba(0, 0, 0, 0.19), 0 4px 3px 1px rgba(0, 0, 0, 0.14);
+  -moz-box-shadow: 0 5px 8px rgba(0, 0, 0, 0.19), 0 4px 3px 1px rgba(0, 0, 0, 0.14);
+  box-shadow: 0 5px 8px rgba(0, 0, 0, 0.19), 0 4px 3px 1px rgba(0, 0, 0, 0.14);
+  border: 0px;
+  border-top: 5px solid #222222;
+  overflow: hidden;
+  width: 90%;
+  position: relative;
+}
+@media (min-width: 768px) and (max-width: 991px) {
+  .fr-modal .fr-modal-wrapper {
+    margin: 30px auto;
+    width: 70%;
+  }
+}
+@media (min-width: 992px) {
+  .fr-modal .fr-modal-wrapper {
+    margin: 50px auto;
+    width: 600px;
+  }
+}
+.fr-modal .fr-modal-wrapper .fr-modal-head {
+  background: #ffffff;
+  -webkit-box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 2px 2px 1px rgba(0, 0, 0, 0.14);
+  -moz-box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 2px 2px 1px rgba(0, 0, 0, 0.14);
+  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 2px 2px 1px rgba(0, 0, 0, 0.14);
+  border-bottom: 0px;
+  overflow: hidden;
+  position: absolute;
+  width: 100%;
+  min-height: 42px;
+  z-index: 3;
+  -webkit-transition: height 0.2s ease 0s;
+  -moz-transition: height 0.2s ease 0s;
+  -ms-transition: height 0.2s ease 0s;
+  -o-transition: height 0.2s ease 0s;
+}
+.fr-modal .fr-modal-wrapper .fr-modal-head .fr-modal-close {
+  padding: 12px;
+  width: 20px;
+  font-size: 16px;
+  cursor: pointer;
+  line-height: 18px;
+  color: #222222;
+  -webkit-box-sizing: content-box;
+  -moz-box-sizing: content-box;
+  box-sizing: content-box;
+  position: absolute;
+  top: 0;
+  right: 0;
+  -webkit-transition: color 0.2s ease 0s;
+  -moz-transition: color 0.2s ease 0s;
+  -ms-transition: color 0.2s ease 0s;
+  -o-transition: color 0.2s ease 0s;
+}
+.fr-modal .fr-modal-wrapper .fr-modal-head h4 {
+  font-size: 18px;
+  padding: 12px 10px;
+  margin: 0;
+  font-weight: 400;
+  line-height: 18px;
+  display: inline-block;
+  float: left;
+}
+.fr-modal .fr-modal-wrapper div.fr-modal-body {
+  height: 100%;
+  min-height: 150px;
+  overflow-y: scroll;
+  padding-bottom: 10px;
+}
+.fr-modal .fr-modal-wrapper div.fr-modal-body:focus {
+  outline: 0;
+}
+.fr-modal .fr-modal-wrapper div.fr-modal-body button.fr-command {
+  height: 36px;
+  line-height: 1;
+  color: #1e88e5;
+  padding: 10px;
+  cursor: pointer;
+  text-decoration: none;
+  border: none;
+  background: none;
+  font-size: 16px;
+  outline: none;
+  -webkit-transition: background 0.2s ease 0s;
+  -moz-transition: background 0.2s ease 0s;
+  -ms-transition: background 0.2s ease 0s;
+  -o-transition: background 0.2s ease 0s;
+  border-radius: 2px;
+  -moz-border-radius: 2px;
+  -webkit-border-radius: 2px;
+  -moz-background-clip: padding;
+  -webkit-background-clip: padding-box;
+  background-clip: padding-box;
+}
+.fr-modal .fr-modal-wrapper div.fr-modal-body button.fr-command + button {
+  margin-left: 24px;
+}
+.fr-modal .fr-modal-wrapper div.fr-modal-body button.fr-command:hover,
+.fr-modal .fr-modal-wrapper div.fr-modal-body button.fr-command:focus {
+  background: #ebebeb;
+  color: #1e88e5;
+}
+.fr-modal .fr-modal-wrapper div.fr-modal-body button.fr-command:active {
+  background: #d6d6d6;
+  color: #1e88e5;
+}
+.fr-modal .fr-modal-wrapper div.fr-modal-body button::-moz-focus-inner {
+  border: 0;
+}
+.fr-desktop .fr-modal-wrapper .fr-modal-head i:hover {
+  background: #ebebeb;
+}
+.fr-overlay {
+  position: fixed;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  background: #000000;
+  -webkit-opacity: 0.5;
+  -moz-opacity: 0.5;
+  opacity: 0.5;
+  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
+  z-index: 2147483639;
+}
+.fr-popup {
+  position: absolute;
+  display: none;
+  color: #222222;
+  background: #ffffff;
+  -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 1px 1px rgba(0, 0, 0, 0.16);
+  -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 1px 1px rgba(0, 0, 0, 0.16);
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 1px 1px rgba(0, 0, 0, 0.16);
+  border-radius: 2px;
+  -moz-border-radius: 2px;
+  -webkit-border-radius: 2px;
+  -moz-background-clip: padding;
+  -webkit-background-clip: padding-box;
+  background-clip: padding-box;
+  font-family: Arial, Helvetica, sans-serif;
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+  user-select: none;
+  -o-user-select: none;
+  -moz-user-select: none;
+  -khtml-user-select: none;
+  -webkit-user-select: none;
+  -ms-user-select: none;
+  margin-top: 10px;
+  z-index: 2147483635;
+  text-align: left;
+  border: 0px;
+  border-top: 5px solid #222222;
+  text-rendering: optimizelegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  line-height: 1.2;
+}
+.fr-popup .fr-input-focus {
+  background: #f5f5f5;
+}
+.fr-popup.fr-above {
+  margin-top: -10px;
+  border-top: 0;
+  border-bottom: 5px solid #222222;
+  -webkit-box-shadow: 0 -1px 3px rgba(0, 0, 0, 0.12), 0 -1px 1px 1px rgba(0, 0, 0, 0.16);
+  -moz-box-shadow: 0 -1px 3px rgba(0, 0, 0, 0.12), 0 -1px 1px 1px rgba(0, 0, 0, 0.16);
+  box-shadow: 0 -1px 3px rgba(0, 0, 0, 0.12), 0 -1px 1px 1px rgba(0, 0, 0, 0.16);
+}
+.fr-popup.fr-active {
+  display: block;
+}
+.fr-popup.fr-hidden {
+  -webkit-opacity: 0;
+  -moz-opacity: 0;
+  opacity: 0;
+  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
+}
+.fr-popup.fr-empty {
+  display: none !important;
+}
+.fr-popup .fr-hs {
+  display: block !important;
+}
+.fr-popup .fr-hs.fr-hidden {
+  display: none !important;
+}
+.fr-popup .fr-input-line {
+  position: relative;
+  padding: 8px 0;
+}
+.fr-popup .fr-input-line input[type="text"],
+.fr-popup .fr-input-line textarea {
+  width: 100%;
+  margin: 0px 0 1px 0;
+  border: none;
+  border-bottom: solid 1px #bdbdbd;
+  color: #222222;
+  font-size: 14px;
+  padding: 6px 0 2px;
+  background: rgba(0, 0, 0, 0);
+  position: relative;
+  z-index: 2;
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+}
+.fr-popup .fr-input-line input[type="text"]:focus,
+.fr-popup .fr-input-line textarea:focus {
+  border-bottom: solid 2px #1e88e5;
+  margin-bottom: 0px;
+}
+.fr-popup .fr-input-line input + label,
+.fr-popup .fr-input-line textarea + label {
+  position: absolute;
+  top: 0;
+  left: 0;
+  font-size: 12px;
+  color: rgba(0, 0, 0, 0);
+  -webkit-transition: color 0.2s ease 0s;
+  -moz-transition: color 0.2s ease 0s;
+  -ms-transition: color 0.2s ease 0s;
+  -o-transition: color 0.2s ease 0s;
+  z-index: 3;
+  width: 100%;
+  display: block;
+  background: #ffffff;
+}
+.fr-popup .fr-input-line input.fr-not-empty:focus + label,
+.fr-popup .fr-input-line textarea.fr-not-empty:focus + label {
+  color: #1e88e5;
+}
+.fr-popup .fr-input-line input.fr-not-empty + label,
+.fr-popup .fr-input-line textarea.fr-not-empty + label {
+  color: #808080;
+}
+.fr-popup input,
+.fr-popup textarea {
+  user-select: text;
+  -o-user-select: text;
+  -moz-user-select: text;
+  -khtml-user-select: text;
+  -webkit-user-select: text;
+  -ms-user-select: text;
+  border-radius: 0;
+  -moz-border-radius: 0;
+  -webkit-border-radius: 0;
+  -moz-background-clip: padding;
+  -webkit-background-clip: padding-box;
+  background-clip: padding-box;
+  outline: none;
+}
+.fr-popup textarea {
+  resize: none;
+}
+.fr-popup .fr-buttons {
+  -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 1px 1px rgba(0, 0, 0, 0.16);
+  -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 1px 1px rgba(0, 0, 0, 0.16);
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 1px 1px rgba(0, 0, 0, 0.16);
+  padding: 0 2px;
+  white-space: nowrap;
+  line-height: 0;
+  border-bottom: 0px;
+}
+.fr-popup .fr-buttons::after {
+  clear: both;
+  display: block;
+  content: "";
+  height: 0;
+}
+.fr-popup .fr-buttons .fr-btn {
+  display: inline-block;
+  float: none;
+}
+.fr-popup .fr-buttons .fr-btn i {
+  float: left;
+}
+.fr-popup .fr-buttons .fr-separator {
+  display: inline-block;
+  float: none;
+}
+.fr-popup .fr-layer {
+  width: 225px;
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+  margin: 10px;
+  display: none;
+}
+@media (min-width: 768px) {
+  .fr-popup .fr-layer {
+    width: 300px;
+  }
+}
+.fr-popup .fr-layer.fr-active {
+  display: inline-block;
+}
+.fr-popup .fr-action-buttons {
+  z-index: 7;
+  height: 36px;
+  text-align: right;
+}
+.fr-popup .fr-action-buttons button.fr-command {
+  height: 36px;
+  line-height: 1;
+  color: #1e88e5;
+  padding: 10px;
+  cursor: pointer;
+  text-decoration: none;
+  border: none;
+  background: none;
+  font-size: 16px;
+  outline: none;
+  -webkit-transition: background 0.2s ease 0s;
+  -moz-transition: background 0.2s ease 0s;
+  -ms-transition: background 0.2s ease 0s;
+  -o-transition: background 0.2s ease 0s;
+  border-radius: 2px;
+  -moz-border-radius: 2px;
+  -webkit-border-radius: 2px;
+  -moz-background-clip: padding;
+  -webkit-background-clip: padding-box;
+  background-clip: padding-box;
+}
+.fr-popup .fr-action-buttons button.fr-command + button {
+  margin-left: 24px;
+}
+.fr-popup .fr-action-buttons button.fr-command:hover,
+.fr-popup .fr-action-buttons button.fr-command:focus {
+  background: #ebebeb;
+  color: #1e88e5;
+}
+.fr-popup .fr-action-buttons button.fr-command:active {
+  background: #d6d6d6;
+  color: #1e88e5;
+}
+.fr-popup .fr-action-buttons button::-moz-focus-inner {
+  border: 0;
+}
+.fr-popup .fr-checkbox {
+  position: relative;
+  display: inline-block;
+  width: 16px;
+  height: 16px;
+  line-height: 1;
+  -webkit-box-sizing: content-box;
+  -moz-box-sizing: content-box;
+  box-sizing: content-box;
+  vertical-align: middle;
+}
+.fr-popup .fr-checkbox svg {
+  margin-left: 2px;
+  margin-top: 2px;
+  display: none;
+  width: 10px;
+  height: 10px;
+}
+.fr-popup .fr-checkbox span {
+  border: solid 1px #222222;
+  border-radius: 2px;
+  -moz-border-radius: 2px;
+  -webkit-border-radius: 2px;
+  -moz-background-clip: padding;
+  -webkit-background-clip: padding-box;
+  background-clip: padding-box;
+  width: 16px;
+  height: 16px;
+  display: inline-block;
+  position: relative;
+  z-index: 1;
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+  -webkit-transition: background 0.2s ease 0s, border-color 0.2s ease 0s;
+  -moz-transition: background 0.2s ease 0s, border-color 0.2s ease 0s;
+  -ms-transition: background 0.2s ease 0s, border-color 0.2s ease 0s;
+  -o-transition: background 0.2s ease 0s, border-color 0.2s ease 0s;
+}
+.fr-popup .fr-checkbox input {
+  position: absolute;
+  z-index: 2;
+  -webkit-opacity: 0;
+  -moz-opacity: 0;
+  opacity: 0;
+  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
+  border: 0 none;
+  cursor: pointer;
+  height: 16px;
+  margin: 0;
+  padding: 0;
+  width: 16px;
+  top: 1px;
+  left: 1px;
+}
+.fr-popup .fr-checkbox input:checked + span {
+  background: #1e88e5;
+  border-color: #1e88e5;
+}
+.fr-popup .fr-checkbox input:checked + span svg {
+  display: block;
+}
+.fr-popup .fr-checkbox input:focus + span {
+  border-color: #1e88e5;
+}
+.fr-popup .fr-checkbox-line {
+  font-size: 14px;
+  line-height: 1.4px;
+  margin-top: 10px;
+}
+.fr-popup .fr-checkbox-line label {
+  cursor: pointer;
+  margin: 0 5px;
+  vertical-align: middle;
+}
+.fr-popup.fr-rtl {
+  direction: rtl;
+  text-align: right;
+}
+.fr-popup.fr-rtl .fr-action-buttons {
+  text-align: left;
+}
+.fr-popup.fr-rtl .fr-input-line input + label,
+.fr-popup.fr-rtl .fr-input-line textarea + label {
+  left: auto;
+  right: 0;
+}
+.fr-popup.fr-rtl .fr-buttons .fr-separator.fr-vs {
+  float: right;
+}
+.fr-popup .fr-arrow {
+  width: 0;
+  height: 0;
+  border-left: 5px solid transparent;
+  border-right: 5px solid transparent;
+  border-bottom: 5px solid #222222;
+  position: absolute;
+  top: -9px;
+  left: 50%;
+  margin-left: -5px;
+  display: inline-block;
+}
+.fr-popup.fr-above .fr-arrow {
+  top: auto;
+  bottom: -9px;
+  border-bottom: 0;
+  border-top: 5px solid #222222;
+}
+.fr-text-edit-layer {
+  width: 250px;
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+  display: block !important;
+}
+.fr-toolbar {
+  color: #222222;
+  background: #ffffff;
+  position: relative;
+  z-index: 4;
+  font-family: Arial, Helvetica, sans-serif;
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+  user-select: none;
+  -o-user-select: none;
+  -moz-user-select: none;
+  -khtml-user-select: none;
+  -webkit-user-select: none;
+  -ms-user-select: none;
+  padding: 0 2px;
+  border-radius: 2px;
+  -moz-border-radius: 2px;
+  -webkit-border-radius: 2px;
+  -moz-background-clip: padding;
+  -webkit-background-clip: padding-box;
+  background-clip: padding-box;
+  -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 1px 1px rgba(0, 0, 0, 0.16);
+  -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 1px 1px rgba(0, 0, 0, 0.16);
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 1px 1px rgba(0, 0, 0, 0.16);
+  text-align: left;
+  border: 0px;
+  border-top: 5px solid #222222;
+  text-rendering: optimizelegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  line-height: 1.2;
+}
+.fr-toolbar::after {
+  clear: both;
+  display: block;
+  content: "";
+  height: 0;
+}
+.fr-toolbar.fr-rtl {
+  text-align: right;
+}
+.fr-toolbar.fr-inline {
+  display: none;
+  white-space: nowrap;
+  position: absolute;
+  margin-top: 10px;
+}
+.fr-toolbar.fr-inline .fr-arrow {
+  width: 0;
+  height: 0;
+  border-left: 5px solid transparent;
+  border-right: 5px solid transparent;
+  border-bottom: 5px solid #222222;
+  position: absolute;
+  top: -9px;
+  left: 50%;
+  margin-left: -5px;
+  display: inline-block;
+}
+.fr-toolbar.fr-inline.fr-above {
+  margin-top: -10px;
+  -webkit-box-shadow: 0 -1px 3px rgba(0, 0, 0, 0.12), 0 -1px 1px 1px rgba(0, 0, 0, 0.16);
+  -moz-box-shadow: 0 -1px 3px rgba(0, 0, 0, 0.12), 0 -1px 1px 1px rgba(0, 0, 0, 0.16);
+  box-shadow: 0 -1px 3px rgba(0, 0, 0, 0.12), 0 -1px 1px 1px rgba(0, 0, 0, 0.16);
+  border-bottom: 5px solid #222222;
+  border-top: 0;
+}
+.fr-toolbar.fr-inline.fr-above .fr-arrow {
+  top: auto;
+  bottom: -9px;
+  border-bottom: 0;
+  border-top-color: inherit;
+  border-top-style: solid;
+  border-top-width: 5px;
+}
+.fr-toolbar.fr-top {
+  top: 0;
+  border-radius: 2px 2px 0 0;
+  -moz-border-radius: 2px 2px 0 0;
+  -webkit-border-radius: 2px 2px 0 0;
+  -moz-background-clip: padding;
+  -webkit-background-clip: padding-box;
+  background-clip: padding-box;
+  -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 1px 1px rgba(0, 0, 0, 0.16);
+  -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 1px 1px rgba(0, 0, 0, 0.16);
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 1px 1px rgba(0, 0, 0, 0.16);
+}
+.fr-toolbar.fr-bottom {
+  bottom: 0;
+  border-radius: 0 0 2px 2px;
+  -moz-border-radius: 0 0 2px 2px;
+  -webkit-border-radius: 0 0 2px 2px;
+  -moz-background-clip: padding;
+  -webkit-background-clip: padding-box;
+  background-clip: padding-box;
+  -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 1px 1px rgba(0, 0, 0, 0.16);
+  -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 1px 1px rgba(0, 0, 0, 0.16);
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 1px 1px rgba(0, 0, 0, 0.16);
+}
+.fr-separator {
+  background: #ebebeb;
+  display: block;
+  vertical-align: top;
+  float: left;
+}
+.fr-separator + .fr-separator {
+  display: none;
+}
+.fr-separator.fr-vs {
+  height: 34px;
+  width: 1px;
+  margin: 2px;
+}
+.fr-separator.fr-hs {
+  clear: both;
+  height: 1px;
+  width: calc(100% - (2 * 2px));
+  margin: 0 2px;
+}
+.fr-separator.fr-hidden {
+  display: none !important;
+}
+.fr-rtl .fr-separator {
+  float: right;
+}
+.fr-toolbar.fr-inline .fr-separator.fr-hs {
+  float: none;
+}
+.fr-toolbar.fr-inline .fr-separator.fr-vs {
+  float: none;
+  display: inline-block;
+}
+.fr-visibility-helper {
+  display: none;
+  margin-left: 0px !important;
+}
+@media (min-width: 768px) {
+  .fr-visibility-helper {
+    margin-left: 1px !important;
+  }
+}
+@media (min-width: 992px) {
+  .fr-visibility-helper {
+    margin-left: 2px !important;
+  }
+}
+@media (min-width: 1200px) {
+  .fr-visibility-helper {
+    margin-left: 3px !important;
+  }
+}
+.fr-opacity-0 {
+  -webkit-opacity: 0;
+  -moz-opacity: 0;
+  opacity: 0;
+  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
+}
+.fr-box {
+  position: relative;
+}
+/**
+ * Postion sticky hacks.
+ */
+.fr-sticky {
+  position: -webkit-sticky;
+  position: -moz-sticky;
+  position: -ms-sticky;
+  position: -o-sticky;
+  position: sticky;
+}
+.fr-sticky-off {
+  position: relative;
+}
+.fr-sticky-on {
+  position: fixed;
+}
+.fr-sticky-on.fr-sticky-ios {
+  position: absolute;
+  left: 0;
+  right: 0;
+  width: auto !important;
+}
+.fr-sticky-dummy {
+  display: none;
+}
+.fr-sticky-on + .fr-sticky-dummy,
+.fr-sticky-box > .fr-sticky-dummy {
+  display: block;
+}
+span.fr-sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  border: 0;
+}

Разница между файлами не показана из-за своего большого размера
+ 6 - 0
modules/boonex/froala/plugins/froala/css/froala_editor.min.css


+ 2907 - 0
modules/boonex/froala/plugins/froala/css/froala_editor.pkgd.css

@@ -0,0 +1,2907 @@
+/*!
+ * froala_editor v2.7.5 (https://www.froala.com/wysiwyg-editor)
+ * License https://froala.com/wysiwyg-editor/terms/
+ * Copyright 2014-2018 Froala Labs
+ */
+
+.clearfix::after {
+  clear: both;
+  display: block;
+  content: "";
+  height: 0;
+}
+.hide-by-clipping {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  border: 0;
+}
+.fr-element,
+.fr-element:focus {
+  outline: 0px solid transparent;
+}
+.fr-box.fr-basic .fr-element {
+  color: #000000;
+  padding: 16px;
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+  overflow-x: auto;
+  min-height: 52px;
+}
+.fr-box.fr-basic.fr-rtl .fr-element {
+  text-align: right;
+}
+.fr-element {
+  background: transparent;
+  position: relative;
+  z-index: 2;
+  -webkit-user-select: auto;
+}
+.fr-element a {
+  user-select: auto;
+  -o-user-select: auto;
+  -moz-user-select: auto;
+  -khtml-user-select: auto;
+  -webkit-user-select: auto;
+  -ms-user-select: auto;
+}
+.fr-element.fr-disabled {
+  user-select: none;
+  -o-user-select: none;
+  -moz-user-select: none;
+  -khtml-user-select: none;
+  -webkit-user-select: none;
+  -ms-user-select: none;
+}
+.fr-element [contenteditable="true"] {
+  outline: 0px solid transparent;
+  user-select: text;
+  -o-user-select: text;
+  -moz-user-select: text;
+  -khtml-user-select: text;
+  -webkit-user-select: text;
+  -ms-user-select: text;
+}
+.fr-box a.fr-floating-btn {
+  -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 1px 1px rgba(0, 0, 0, 0.16);
+  -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 1px 1px rgba(0, 0, 0, 0.16);
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 1px 1px rgba(0, 0, 0, 0.16);
+  border-radius: 100%;
+  -moz-border-radius: 100%;
+  -webkit-border-radius: 100%;
+  -moz-background-clip: padding;
+  -webkit-background-clip: padding-box;
+  background-clip: padding-box;
+  height: 32px;
+  width: 32px;
+  background: #ffffff;
+  color: #1e88e5;
+  -webkit-transition: background 0.2s ease 0s, color 0.2s ease 0s, transform 0.2s ease 0s;
+  -moz-transition: background 0.2s ease 0s, color 0.2s ease 0s, transform 0.2s ease 0s;
+  -ms-transition: background 0.2s ease 0s, color 0.2s ease 0s, transform 0.2s ease 0s;
+  -o-transition: background 0.2s ease 0s, color 0.2s ease 0s, transform 0.2s ease 0s;
+  outline: none;
+  left: 0;
+  top: 0;
+  line-height: 32px;
+  -webkit-transform: scale(0);
+  -moz-transform: scale(0);
+  -ms-transform: scale(0);
+  -o-transform: scale(0);
+  text-align: center;
+  display: block;
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+  border: none;
+}
+.fr-box a.fr-floating-btn svg {
+  -webkit-transition: transform 0.2s ease 0s;
+  -moz-transition: transform 0.2s ease 0s;
+  -ms-transition: transform 0.2s ease 0s;
+  -o-transition: transform 0.2s ease 0s;
+  fill: #1e88e5;
+}
+.fr-box a.fr-floating-btn i,
+.fr-box a.fr-floating-btn svg {
+  font-size: 14px;
+  line-height: 32px;
+}
+.fr-box a.fr-floating-btn.fr-btn + .fr-btn {
+  margin-left: 10px;
+}
+.fr-box a.fr-floating-btn:hover {
+  background: #ebebeb;
+  cursor: pointer;
+}
+.fr-box a.fr-floating-btn:hover svg {
+  fill: #1e88e5;
+}
+.fr-box .fr-visible a.fr-floating-btn {
+  -webkit-transform: scale(1);
+  -moz-transform: scale(1);
+  -ms-transform: scale(1);
+  -o-transform: scale(1);
+}
+iframe.fr-iframe {
+  width: 100%;
+  border: none;
+  position: relative;
+  display: block;
+  z-index: 2;
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+}
+.fr-wrapper {
+  position: relative;
+  z-index: 1;
+}
+.fr-wrapper::after {
+  clear: both;
+  display: block;
+  content: "";
+  height: 0;
+}
+.fr-wrapper .fr-placeholder {
+  position: absolute;
+  font-size: 12px;
+  color: #aaaaaa;
+  z-index: 1;
+  display: none;
+  top: 0;
+  left: 0;
+  right: 0;
+  overflow: hidden;
+}
+.fr-wrapper.show-placeholder .fr-placeholder {
+  display: block;
+}
+.fr-wrapper ::-moz-selection {
+  background: #b5d6fd;
+  color: #000000;
+}
+.fr-wrapper ::selection {
+  background: #b5d6fd;
+  color: #000000;
+}
+.fr-box.fr-basic .fr-wrapper {
+  background: #ffffff;
+  border: 0px;
+  border-top: 0;
+  top: 0;
+  left: 0;
+}
+.fr-box.fr-basic.fr-top .fr-wrapper {
+  border-top: 0;
+  border-radius: 0 0 2px 2px;
+  -moz-border-radius: 0 0 2px 2px;
+  -webkit-border-radius: 0 0 2px 2px;
+  -moz-background-clip: padding;
+  -webkit-background-clip: padding-box;
+  background-clip: padding-box;
+  -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 1px 1px rgba(0, 0, 0, 0.16);
+  -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 1px 1px rgba(0, 0, 0, 0.16);
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 1px 1px rgba(0, 0, 0, 0.16);
+}
+.fr-box.fr-basic.fr-bottom .fr-wrapper {
+  border-bottom: 0;
+  border-radius: 2px 2px 0 0;
+  -moz-border-radius: 2px 2px 0 0;
+  -webkit-border-radius: 2px 2px 0 0;
+  -moz-background-clip: padding;
+  -webkit-background-clip: padding-box;
+  background-clip: padding-box;
+  -webkit-box-shadow: 0 -1px 3px rgba(0, 0, 0, 0.12), 0 -1px 1px 1px rgba(0, 0, 0, 0.16);
+  -moz-box-shadow: 0 -1px 3px rgba(0, 0, 0, 0.12), 0 -1px 1px 1px rgba(0, 0, 0, 0.16);
+  box-shadow: 0 -1px 3px rgba(0, 0, 0, 0.12), 0 -1px 1px 1px rgba(0, 0, 0, 0.16);
+}
+.fr-tooltip {
+  position: absolute;
+  top: 0;
+  left: 0;
+  padding: 0 8px;
+  border-radius: 2px;
+  -moz-border-radius: 2px;
+  -webkit-border-radius: 2px;
+  -moz-background-clip: padding;
+  -webkit-background-clip: padding-box;
+  background-clip: padding-box;
+  -webkit-box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 2px 2px 1px rgba(0, 0, 0, 0.14);
+  -moz-box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 2px 2px 1px rgba(0, 0, 0, 0.14);
+  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 2px 2px 1px rgba(0, 0, 0, 0.14);
+  background: #222222;
+  color: #ffffff;
+  font-size: 11px;
+  line-height: 22px;
+  font-family: Arial, Helvetica, sans-serif;
+  -webkit-transition: opacity 0.2s ease 0s;
+  -moz-transition: opacity 0.2s ease 0s;
+  -ms-transition: opacity 0.2s ease 0s;
+  -o-transition: opacity 0.2s ease 0s;
+  -webkit-opacity: 0;
+  -moz-opacity: 0;
+  opacity: 0;
+  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
+  left: -3000px;
+  user-select: none;
+  -o-user-select: none;
+  -moz-user-select: none;
+  -khtml-user-select: none;
+  -webkit-user-select: none;
+  -ms-user-select: none;
+  z-index: 2147483647;
+  text-rendering: optimizelegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+.fr-tooltip.fr-visible {
+  -webkit-opacity: 1;
+  -moz-opacity: 1;
+  opacity: 1;
+  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
+}
+.fr-toolbar .fr-command.fr-btn,
+.fr-popup .fr-command.fr-btn {
+  background: transparent;
+  color: #222222;
+  -moz-outline: 0;
+  outline: 0;
+  border: 0;
+  line-height: 1;
+  cursor: pointer;
+  text-align: left;
+  margin: 0px 2px;
+  -webkit-transition: background 0.2s ease 0s;
+  -moz-transition: background 0.2s ease 0s;
+  -ms-transition: background 0.2s ease 0s;
+  -o-transition: background 0.2s ease 0s;
+  border-radius: 0;
+  -moz-border-radius: 0;
+  -webkit-border-radius: 0;
+  -moz-background-clip: padding;
+  -webkit-background-clip: padding-box;
+  background-clip: padding-box;
+  z-index: 2;
+  position: relative;
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+  text-decoration: none;
+  user-select: none;
+  -o-user-select: none;
+  -moz-user-select: none;
+  -khtml-user-select: none;
+  -webkit-user-select: none;
+  -ms-user-select: none;
+  float: left;
+  padding: 0;
+  width: 38px;
+  height: 38px;
+}
+.fr-toolbar .fr-command.fr-btn::-moz-focus-inner,
+.fr-popup .fr-command.fr-btn::-moz-focus-inner {
+  border: 0;
+  padding: 0;
+}
+.fr-toolbar .fr-command.fr-btn.fr-btn-text,
+.fr-popup .fr-command.fr-btn.fr-btn-text {
+  width: auto;
+}
+.fr-toolbar .fr-command.fr-btn i,
+.fr-popup .fr-command.fr-btn i,
+.fr-toolbar .fr-command.fr-btn svg,
+.fr-popup .fr-command.fr-btn svg {
+  display: block;
+  font-size: 14px;
+  width: 14px;
+  margin: 12px 12px;
+  text-align: center;
+  float: none;
+}
+.fr-toolbar .fr-command.fr-btn span.fr-sr-only,
+.fr-popup .fr-command.fr-btn span.fr-sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  border: 0;
+}
+.fr-toolbar .fr-command.fr-btn span,
+.fr-popup .fr-command.fr-btn span {
+  font-size: 14px;
+  display: block;
+  line-height: 17px;
+  min-width: 34px;
+  float: left;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: nowrap;
+  height: 17px;
+  font-weight: bold;
+  padding: 0 2px;
+}
+.fr-toolbar .fr-command.fr-btn img,
+.fr-popup .fr-command.fr-btn img {
+  margin: 12px 12px;
+  width: 14px;
+}
+.fr-toolbar .fr-command.fr-btn.fr-active,
+.fr-popup .fr-command.fr-btn.fr-active {
+  color: #1e88e5;
+  background: transparent;
+}
+.fr-toolbar .fr-command.fr-btn.fr-dropdown.fr-selection,
+.fr-popup .fr-command.fr-btn.fr-dropdown.fr-selection {
+  width: auto;
+}
+.fr-toolbar .fr-command.fr-btn.fr-dropdown.fr-selection span,
+.fr-popup .fr-command.fr-btn.fr-dropdown.fr-selection span {
+  font-weight: normal;
+}
+.fr-toolbar .fr-command.fr-btn.fr-dropdown i,
+.fr-popup .fr-command.fr-btn.fr-dropdown i,
+.fr-toolbar .fr-command.fr-btn.fr-dropdown span,
+.fr-popup .fr-command.fr-btn.fr-dropdown span,
+.fr-toolbar .fr-command.fr-btn.fr-dropdown img,
+.fr-popup .fr-command.fr-btn.fr-dropdown img,
+.fr-toolbar .fr-command.fr-btn.fr-dropdown svg,
+.fr-popup .fr-command.fr-btn.fr-dropdown svg {
+  margin-left: 8px;
+  margin-right: 16px;
+}
+.fr-toolbar .fr-command.fr-btn.fr-dropdown.fr-active,
+.fr-popup .fr-command.fr-btn.fr-dropdown.fr-active {
+  color: #222222;
+  background: #d6d6d6;
+}
+.fr-toolbar .fr-command.fr-btn.fr-dropdown.fr-active:hover,
+.fr-popup .fr-command.fr-btn.fr-dropdown.fr-active:hover,
+.fr-toolbar .fr-command.fr-btn.fr-dropdown.fr-active:focus,
+.fr-popup .fr-command.fr-btn.fr-dropdown.fr-active:focus {
+  background: #d6d6d6 !important;
+  color: #222222 !important;
+}
+.fr-toolbar .fr-command.fr-btn.fr-dropdown.fr-active:hover::after,
+.fr-popup .fr-command.fr-btn.fr-dropdown.fr-active:hover::after,
+.fr-toolbar .fr-command.fr-btn.fr-dropdown.fr-active:focus::after,
+.fr-popup .fr-command.fr-btn.fr-dropdown.fr-active:focus::after {
+  border-top-color: #222222 !important;
+}
+.fr-toolbar .fr-command.fr-btn.fr-dropdown::after,
+.fr-popup .fr-command.fr-btn.fr-dropdown::after {
+  position: absolute;
+  width: 0;
+  height: 0;
+  border-left: 4px solid transparent;
+  border-right: 4px solid transparent;
+  border-top: 4px solid #222222;
+  right: 4px;
+  top: 17px;
+  content: "";
+}
+.fr-toolbar .fr-command.fr-btn.fr-disabled,
+.fr-popup .fr-command.fr-btn.fr-disabled {
+  color: #bdbdbd;
+  cursor: default;
+}
+.fr-toolbar .fr-command.fr-btn.fr-disabled::after,
+.fr-popup .fr-command.fr-btn.fr-disabled::after {
+  border-top-color: #bdbdbd !important;
+}
+.fr-toolbar .fr-command.fr-btn.fr-hidden,
+.fr-popup .fr-command.fr-btn.fr-hidden {
+  display: none;
+}
+.fr-toolbar.fr-disabled .fr-btn,
+.fr-popup.fr-disabled .fr-btn,
+.fr-toolbar.fr-disabled .fr-btn.fr-active,
+.fr-popup.fr-disabled .fr-btn.fr-active {
+  color: #bdbdbd;
+}
+.fr-toolbar.fr-disabled .fr-btn.fr-dropdown::after,
+.fr-popup.fr-disabled .fr-btn.fr-dropdown::after,
+.fr-toolbar.fr-disabled .fr-btn.fr-active.fr-dropdown::after,
+.fr-popup.fr-disabled .fr-btn.fr-active.fr-dropdown::after {
+  border-top-color: #bdbdbd;
+}
+.fr-toolbar.fr-rtl .fr-command.fr-btn,
+.fr-popup.fr-rtl .fr-command.fr-btn {
+  float: right;
+}
+.fr-toolbar.fr-inline .fr-command.fr-btn:not(.fr-hidden) {
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  float: none;
+}
+.fr-desktop .fr-command:hover,
+.fr-desktop .fr-command:focus {
+  outline: 0;
+  color: #222222;
+  background: #ebebeb;
+}
+.fr-desktop .fr-command:hover::after,
+.fr-desktop .fr-command:focus::after {
+  border-top-color: #222222 !important;
+}
+.fr-desktop .fr-command.fr-selected {
+  color: #222222;
+  background: #d6d6d6;
+}
+.fr-desktop .fr-command.fr-active:hover,
+.fr-desktop .fr-command.fr-active:focus {
+  color: #1e88e5;
+  background: #ebebeb;
+}
+.fr-desktop .fr-command.fr-active.fr-selected {
+  color: #1e88e5;
+  background: #d6d6d6;
+}
+.fr-desktop .fr-command.fr-disabled:hover,
+.fr-desktop .fr-command.fr-disabled:focus,
+.fr-desktop .fr-command.fr-disabled.fr-selected {
+  background: transparent;
+}
+.fr-desktop.fr-disabled .fr-command:hover,
+.fr-desktop.fr-disabled .fr-command:focus,
+.fr-desktop.fr-disabled .fr-command.fr-selected {
+  background: transparent;
+}
+.fr-toolbar.fr-mobile .fr-command.fr-blink,
+.fr-popup.fr-mobile .fr-command.fr-blink {
+  background: transparent;
+}
+.fr-command.fr-btn + .fr-dropdown-menu {
+  display: inline-block;
+  position: absolute;
+  right: auto;
+  bottom: auto;
+  height: auto;
+  z-index: 4;
+  -webkit-overflow-scrolling: touch;
+  overflow: hidden;
+  zoom: 1;
+  border-radius: 0 0 2px 2px;
+  -moz-border-radius: 0 0 2px 2px;
+  -webkit-border-radius: 0 0 2px 2px;
+  -moz-background-clip: padding;
+  -webkit-background-clip: padding-box;
+  background-clip: padding-box;
+}
+.fr-command.fr-btn + .fr-dropdown-menu.test-height .fr-dropdown-wrapper {
+  -webkit-transition: none;
+  -moz-transition: none;
+  -ms-transition: none;
+  -o-transition: none;
+  height: auto;
+  max-height: 275px;
+}
+.fr-command.fr-btn + .fr-dropdown-menu .fr-dropdown-wrapper {
+  background: #ffffff;
+  padding: 0;
+  margin: auto;
+  display: inline-block;
+  text-align: left;
+  position: relative;
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+  -webkit-transition: max-height 0.2s ease 0s;
+  -moz-transition: max-height 0.2s ease 0s;
+  -ms-transition: max-height 0.2s ease 0s;
+  -o-transition: max-height 0.2s ease 0s;
+  margin-top: 0;
+  float: left;
+  max-height: 0;
+  height: 0;
+  margin-top: 0 !important;
+}
+.fr-command.fr-btn + .fr-dropdown-menu .fr-dropdown-wrapper .fr-dropdown-content {
+  overflow: auto;
+  position: relative;
+  max-height: 275px;
+}
+.fr-command.fr-btn + .fr-dropdown-menu .fr-dropdown-wrapper .fr-dropdown-content ul.fr-dropdown-list {
+  list-style-type: none;
+  margin: 0;
+  padding: 0;
+}
+.fr-command.fr-btn + .fr-dropdown-menu .fr-dropdown-wrapper .fr-dropdown-content ul.fr-dropdown-list li {
+  padding: 0;
+  margin: 0;
+  font-size: 15px;
+}
+.fr-command.fr-btn + .fr-dropdown-menu .fr-dropdown-wrapper .fr-dropdown-content ul.fr-dropdown-list li a {
+  padding: 0 24px;
+  line-height: 200%;
+  display: block;
+  cursor: pointer;
+  white-space: nowrap;
+  color: inherit;
+  text-decoration: none;
+}
+.fr-command.fr-btn + .fr-dropdown-menu .fr-dropdown-wrapper .fr-dropdown-content ul.fr-dropdown-list li a.fr-active {
+  background: #d6d6d6;
+}
+.fr-command.fr-btn + .fr-dropdown-menu .fr-dropdown-wrapper .fr-dropdown-content ul.fr-dropdown-list li a.fr-disabled {
+  color: #bdbdbd;
+  cursor: default;
+}
+.fr-command.fr-btn:not(.fr-active) + .fr-dropdown-menu {
+  left: -3000px !important;
+}
+.fr-command.fr-btn.fr-active + .fr-dropdown-menu {
+  display: inline-block;
+  -webkit-box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 2px 2px 1px rgba(0, 0, 0, 0.14);
+  -moz-box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 2px 2px 1px rgba(0, 0, 0, 0.14);
+  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 2px 2px 1px rgba(0, 0, 0, 0.14);
+}
+.fr-command.fr-btn.fr-active + .fr-dropdown-menu .fr-dropdown-wrapper {
+  height: auto;
+  max-height: 275px;
+}
+.fr-bottom > .fr-command.fr-btn + .fr-dropdown-menu {
+  border-radius: 2px 2px 0 0;
+  -moz-border-radius: 2px 2px 0 0;
+  -webkit-border-radius: 2px 2px 0 0;
+  -moz-background-clip: padding;
+  -webkit-background-clip: padding-box;
+  background-clip: padding-box;
+}
+.fr-toolbar.fr-rtl .fr-dropdown-wrapper,
+.fr-popup.fr-rtl .fr-dropdown-wrapper {
+  text-align: right !important;
+}
+body.prevent-scroll {
+  overflow: hidden;
+}
+body.prevent-scroll.fr-mobile {
+  position: fixed;
+  -webkit-overflow-scrolling: touch;
+}
+.fr-modal {
+  color: #222222;
+  font-family: Arial, Helvetica, sans-serif;
+  position: fixed;
+  overflow-x: auto;
+  overflow-y: scroll;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: 0;
+  width: 100%;
+  z-index: 2147483640;
+  text-rendering: optimizelegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  text-align: center;
+  line-height: 1.2;
+}
+.fr-modal.fr-middle .fr-modal-wrapper {
+  margin-top: 0;
+  margin-bottom: 0;
+  margin-left: auto;
+  margin-right: auto;
+  top: 50%;
+  left: 50%;
+  -webkit-transform: translate(-50%, -50%);
+  -moz-transform: translate(-50%, -50%);
+  -ms-transform: translate(-50%, -50%);
+  -o-transform: translate(-50%, -50%);
+  position: absolute;
+}
+.fr-modal .fr-modal-wrapper {
+  border-radius: 2px;
+  -moz-border-radius: 2px;
+  -webkit-border-radius: 2px;
+  -moz-background-clip: padding;
+  -webkit-background-clip: padding-box;
+  background-clip: padding-box;
+  margin: 20px auto;
+  display: inline-block;
+  background: #ffffff;
+  min-width: 300px;
+  -webkit-box-shadow: 0 5px 8px rgba(0, 0, 0, 0.19), 0 4px 3px 1px rgba(0, 0, 0, 0.14);
+  -moz-box-shadow: 0 5px 8px rgba(0, 0, 0, 0.19), 0 4px 3px 1px rgba(0, 0, 0, 0.14);
+  box-shadow: 0 5px 8px rgba(0, 0, 0, 0.19), 0 4px 3px 1px rgba(0, 0, 0, 0.14);
+  border: 0px;
+  border-top: 5px solid #222222;
+  overflow: hidden;
+  width: 90%;
+  position: relative;
+}
+@media (min-width: 768px) and (max-width: 991px) {
+  .fr-modal .fr-modal-wrapper {
+    margin: 30px auto;
+    width: 70%;
+  }
+}
+@media (min-width: 992px) {
+  .fr-modal .fr-modal-wrapper {
+    margin: 50px auto;
+    width: 600px;
+  }
+}
+.fr-modal .fr-modal-wrapper .fr-modal-head {
+  background: #ffffff;
+  -webkit-box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 2px 2px 1px rgba(0, 0, 0, 0.14);
+  -moz-box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 2px 2px 1px rgba(0, 0, 0, 0.14);
+  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 2px 2px 1px rgba(0, 0, 0, 0.14);
+  border-bottom: 0px;
+  overflow: hidden;
+  position: absolute;
+  width: 100%;
+  min-height: 42px;
+  z-index: 3;
+  -webkit-transition: height 0.2s ease 0s;
+  -moz-transition: height 0.2s ease 0s;
+  -ms-transition: height 0.2s ease 0s;
+  -o-transition: height 0.2s ease 0s;
+}
+.fr-modal .fr-modal-wrapper .fr-modal-head .fr-modal-close {
+  padding: 12px;
+  width: 20px;
+  font-size: 16px;
+  cursor: pointer;
+  line-height: 18px;
+  color: #222222;
+  -webkit-box-sizing: content-box;
+  -moz-box-sizing: content-box;
+  box-sizing: content-box;
+  position: absolute;
+  top: 0;
+  right: 0;
+  -webkit-transition: color 0.2s ease 0s;
+  -moz-transition: color 0.2s ease 0s;
+  -ms-transition: color 0.2s ease 0s;
+  -o-transition: color 0.2s ease 0s;
+}
+.fr-modal .fr-modal-wrapper .fr-modal-head h4 {
+  font-size: 18px;
+  padding: 12px 10px;
+  margin: 0;
+  font-weight: 400;
+  line-height: 18px;
+  display: inline-block;
+  float: left;
+}
+.fr-modal .fr-modal-wrapper div.fr-modal-body {
+  height: 100%;
+  min-height: 150px;
+  overflow-y: scroll;
+  padding-bottom: 10px;
+}
+.fr-modal .fr-modal-wrapper div.fr-modal-body:focus {
+  outline: 0;
+}
+.fr-modal .fr-modal-wrapper div.fr-modal-body button.fr-command {
+  height: 36px;
+  line-height: 1;
+  color: #1e88e5;
+  padding: 10px;
+  cursor: pointer;
+  text-decoration: none;
+  border: none;
+  background: none;
+  font-size: 16px;
+  outline: none;
+  -webkit-transition: background 0.2s ease 0s;
+  -moz-transition: background 0.2s ease 0s;
+  -ms-transition: background 0.2s ease 0s;
+  -o-transition: background 0.2s ease 0s;
+  border-radius: 2px;
+  -moz-border-radius: 2px;
+  -webkit-border-radius: 2px;
+  -moz-background-clip: padding;
+  -webkit-background-clip: padding-box;
+  background-clip: padding-box;
+}
+.fr-modal .fr-modal-wrapper div.fr-modal-body button.fr-command + button {
+  margin-left: 24px;
+}
+.fr-modal .fr-modal-wrapper div.fr-modal-body button.fr-command:hover,
+.fr-modal .fr-modal-wrapper div.fr-modal-body button.fr-command:focus {
+  background: #ebebeb;
+  color: #1e88e5;
+}
+.fr-modal .fr-modal-wrapper div.fr-modal-body button.fr-command:active {
+  background: #d6d6d6;
+  color: #1e88e5;
+}
+.fr-modal .fr-modal-wrapper div.fr-modal-body button::-moz-focus-inner {
+  border: 0;
+}
+.fr-desktop .fr-modal-wrapper .fr-modal-head i:hover {
+  background: #ebebeb;
+}
+.fr-overlay {
+  position: fixed;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  background: #000000;
+  -webkit-opacity: 0.5;
+  -moz-opacity: 0.5;
+  opacity: 0.5;
+  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
+  z-index: 2147483639;
+}
+.fr-popup {
+  position: absolute;
+  display: none;
+  color: #222222;
+  background: #ffffff;
+  -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 1px 1px rgba(0, 0, 0, 0.16);
+  -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 1px 1px rgba(0, 0, 0, 0.16);
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 1px 1px rgba(0, 0, 0, 0.16);
+  border-radius: 2px;
+  -moz-border-radius: 2px;
+  -webkit-border-radius: 2px;
+  -moz-background-clip: padding;
+  -webkit-background-clip: padding-box;
+  background-clip: padding-box;
+  font-family: Arial, Helvetica, sans-serif;
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+  user-select: none;
+  -o-user-select: none;
+  -moz-user-select: none;
+  -khtml-user-select: none;
+  -webkit-user-select: none;
+  -ms-user-select: none;
+  margin-top: 10px;
+  z-index: 2147483635;
+  text-align: left;
+  border: 0px;
+  border-top: 5px solid #222222;
+  text-rendering: optimizelegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  line-height: 1.2;
+}
+.fr-popup .fr-input-focus {
+  background: #f5f5f5;
+}
+.fr-popup.fr-above {
+  margin-top: -10px;
+  border-top: 0;
+  border-bottom: 5px solid #222222;
+  -webkit-box-shadow: 0 -1px 3px rgba(0, 0, 0, 0.12), 0 -1px 1px 1px rgba(0, 0, 0, 0.16);
+  -moz-box-shadow: 0 -1px 3px rgba(0, 0, 0, 0.12), 0 -1px 1px 1px rgba(0, 0, 0, 0.16);
+  box-shadow: 0 -1px 3px rgba(0, 0, 0, 0.12), 0 -1px 1px 1px rgba(0, 0, 0, 0.16);
+}
+.fr-popup.fr-active {
+  display: block;
+}
+.fr-popup.fr-hidden {
+  -webkit-opacity: 0;
+  -moz-opacity: 0;
+  opacity: 0;
+  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
+}
+.fr-popup.fr-empty {
+  display: none !important;
+}
+.fr-popup .fr-hs {
+  display: block !important;
+}
+.fr-popup .fr-hs.fr-hidden {
+  display: none !important;
+}
+.fr-popup .fr-input-line {
+  position: relative;
+  padding: 8px 0;
+}
+.fr-popup .fr-input-line input[type="text"],
+.fr-popup .fr-input-line textarea {
+  width: 100%;
+  margin: 0px 0 1px 0;
+  border: none;
+  border-bottom: solid 1px #bdbdbd;
+  color: #222222;
+  font-size: 14px;
+  padding: 6px 0 2px;
+  background: rgba(0, 0, 0, 0);
+  position: relative;
+  z-index: 2;
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+}
+.fr-popup .fr-input-line input[type="text"]:focus,
+.fr-popup .fr-input-line textarea:focus {
+  border-bottom: solid 2px #1e88e5;
+  margin-bottom: 0px;
+}
+.fr-popup .fr-input-line input + label,
+.fr-popup .fr-input-line textarea + label {
+  position: absolute;
+  top: 0;
+  left: 0;
+  font-size: 12px;
+  color: rgba(0, 0, 0, 0);
+  -webkit-transition: color 0.2s ease 0s;
+  -moz-transition: color 0.2s ease 0s;
+  -ms-transition: color 0.2s ease 0s;
+  -o-transition: color 0.2s ease 0s;
+  z-index: 3;
+  width: 100%;
+  display: block;
+  background: #ffffff;
+}
+.fr-popup .fr-input-line input.fr-not-empty:focus + label,
+.fr-popup .fr-input-line textarea.fr-not-empty:focus + label {
+  color: #1e88e5;
+}
+.fr-popup .fr-input-line input.fr-not-empty + label,
+.fr-popup .fr-input-line textarea.fr-not-empty + label {
+  color: #808080;
+}
+.fr-popup input,
+.fr-popup textarea {
+  user-select: text;
+  -o-user-select: text;
+  -moz-user-select: text;
+  -khtml-user-select: text;
+  -webkit-user-select: text;
+  -ms-user-select: text;
+  border-radius: 0;
+  -moz-border-radius: 0;
+  -webkit-border-radius: 0;
+  -moz-background-clip: padding;
+  -webkit-background-clip: padding-box;
+  background-clip: padding-box;
+  outline: none;
+}
+.fr-popup textarea {
+  resize: none;
+}
+.fr-popup .fr-buttons {
+  -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 1px 1px rgba(0, 0, 0, 0.16);
+  -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 1px 1px rgba(0, 0, 0, 0.16);
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 1px 1px rgba(0, 0, 0, 0.16);
+  padding: 0 2px;
+  white-space: nowrap;
+  line-height: 0;
+  border-bottom: 0px;
+}
+.fr-popup .fr-buttons::after {
+  clear: both;
+  display: block;
+  content: "";
+  height: 0;
+}
+.fr-popup .fr-buttons .fr-btn {
+  display: inline-block;
+  float: none;
+}
+.fr-popup .fr-buttons .fr-btn i {
+  float: left;
+}
+.fr-popup .fr-buttons .fr-separator {
+  display: inline-block;
+  float: none;
+}
+.fr-popup .fr-layer {
+  width: 225px;
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+  margin: 10px;
+  display: none;
+}
+@media (min-width: 768px) {
+  .fr-popup .fr-layer {
+    width: 300px;
+  }
+}
+.fr-popup .fr-layer.fr-active {
+  display: inline-block;
+}
+.fr-popup .fr-action-buttons {
+  z-index: 7;
+  height: 36px;
+  text-align: right;
+}
+.fr-popup .fr-action-buttons button.fr-command {
+  height: 36px;
+  line-height: 1;
+  color: #1e88e5;
+  padding: 10px;
+  cursor: pointer;
+  text-decoration: none;
+  border: none;
+  background: none;
+  font-size: 16px;
+  outline: none;
+  -webkit-transition: background 0.2s ease 0s;
+  -moz-transition: background 0.2s ease 0s;
+  -ms-transition: background 0.2s ease 0s;
+  -o-transition: background 0.2s ease 0s;
+  border-radius: 2px;
+  -moz-border-radius: 2px;
+  -webkit-border-radius: 2px;
+  -moz-background-clip: padding;
+  -webkit-background-clip: padding-box;
+  background-clip: padding-box;
+}
+.fr-popup .fr-action-buttons button.fr-command + button {
+  margin-left: 24px;
+}
+.fr-popup .fr-action-buttons button.fr-command:hover,
+.fr-popup .fr-action-buttons button.fr-command:focus {
+  background: #ebebeb;
+  color: #1e88e5;
+}
+.fr-popup .fr-action-buttons button.fr-command:active {
+  background: #d6d6d6;
+  color: #1e88e5;
+}
+.fr-popup .fr-action-buttons button::-moz-focus-inner {
+  border: 0;
+}
+.fr-popup .fr-checkbox {
+  position: relative;
+  display: inline-block;
+  width: 16px;
+  height: 16px;
+  line-height: 1;
+  -webkit-box-sizing: content-box;
+  -moz-box-sizing: content-box;
+  box-sizing: content-box;
+  vertical-align: middle;
+}
+.fr-popup .fr-checkbox svg {
+  margin-left: 2px;
+  margin-top: 2px;
+  display: none;
+  width: 10px;
+  height: 10px;
+}
+.fr-popup .fr-checkbox span {
+  border: solid 1px #222222;
+  border-radius: 2px;
+  -moz-border-radius: 2px;
+  -webkit-border-radius: 2px;
+  -moz-background-clip: padding;
+  -webkit-background-clip: padding-box;
+  background-clip: padding-box;
+  width: 16px;
+  height: 16px;
+  display: inline-block;
+  position: relative;
+  z-index: 1;
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+  -webkit-transition: background 0.2s ease 0s, border-color 0.2s ease 0s;
+  -moz-transition: background 0.2s ease 0s, border-color 0.2s ease 0s;
+  -ms-transition: background 0.2s ease 0s, border-color 0.2s ease 0s;
+  -o-transition: background 0.2s ease 0s, border-color 0.2s ease 0s;
+}
+.fr-popup .fr-checkbox input {
+  position: absolute;
+  z-index: 2;
+  -webkit-opacity: 0;
+  -moz-opacity: 0;
+  opacity: 0;
+  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
+  border: 0 none;
+  cursor: pointer;
+  height: 16px;
+  margin: 0;
+  padding: 0;
+  width: 16px;
+  top: 1px;
+  left: 1px;
+}
+.fr-popup .fr-checkbox input:checked + span {
+  background: #1e88e5;
+  border-color: #1e88e5;
+}
+.fr-popup .fr-checkbox input:checked + span svg {
+  display: block;
+}
+.fr-popup .fr-checkbox input:focus + span {
+  border-color: #1e88e5;
+}
+.fr-popup .fr-checkbox-line {
+  font-size: 14px;
+  line-height: 1.4px;
+  margin-top: 10px;
+}
+.fr-popup .fr-checkbox-line label {
+  cursor: pointer;
+  margin: 0 5px;
+  vertical-align: middle;
+}
+.fr-popup.fr-rtl {
+  direction: rtl;
+  text-align: right;
+}
+.fr-popup.fr-rtl .fr-action-buttons {
+  text-align: left;
+}
+.fr-popup.fr-rtl .fr-input-line input + label,
+.fr-popup.fr-rtl .fr-input-line textarea + label {
+  left: auto;
+  right: 0;
+}
+.fr-popup.fr-rtl .fr-buttons .fr-separator.fr-vs {
+  float: right;
+}
+.fr-popup .fr-arrow {
+  width: 0;
+  height: 0;
+  border-left: 5px solid transparent;
+  border-right: 5px solid transparent;
+  border-bottom: 5px solid #222222;
+  position: absolute;
+  top: -9px;
+  left: 50%;
+  margin-left: -5px;
+  display: inline-block;
+}
+.fr-popup.fr-above .fr-arrow {
+  top: auto;
+  bottom: -9px;
+  border-bottom: 0;
+  border-top: 5px solid #222222;
+}
+.fr-text-edit-layer {
+  width: 250px;
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+  display: block !important;
+}
+.fr-toolbar {
+  color: #222222;
+  background: #ffffff;
+  position: relative;
+  z-index: 4;
+  font-family: Arial, Helvetica, sans-serif;
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+  user-select: none;
+  -o-user-select: none;
+  -moz-user-select: none;
+  -khtml-user-select: none;
+  -webkit-user-select: none;
+  -ms-user-select: none;
+  padding: 0 2px;
+  border-radius: 2px;
+  -moz-border-radius: 2px;
+  -webkit-border-radius: 2px;
+  -moz-background-clip: padding;
+  -webkit-background-clip: padding-box;
+  background-clip: padding-box;
+  -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 1px 1px rgba(0, 0, 0, 0.16);
+  -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 1px 1px rgba(0, 0, 0, 0.16);
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 1px 1px rgba(0, 0, 0, 0.16);
+  text-align: left;
+  border: 0px;
+  border-top: 5px solid #222222;
+  text-rendering: optimizelegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  line-height: 1.2;
+}
+.fr-toolbar::after {
+  clear: both;
+  display: block;
+  content: "";
+  height: 0;
+}
+.fr-toolbar.fr-rtl {
+  text-align: right;
+}
+.fr-toolbar.fr-inline {
+  display: none;
+  white-space: nowrap;
+  position: absolute;
+  margin-top: 10px;
+}
+.fr-toolbar.fr-inline .fr-arrow {
+  width: 0;
+  height: 0;
+  border-left: 5px solid transparent;
+  border-right: 5px solid transparent;
+  border-bottom: 5px solid #222222;
+  position: absolute;
+  top: -9px;
+  left: 50%;
+  margin-left: -5px;
+  display: inline-block;
+}
+.fr-toolbar.fr-inline.fr-above {
+  margin-top: -10px;
+  -webkit-box-shadow: 0 -1px 3px rgba(0, 0, 0, 0.12), 0 -1px 1px 1px rgba(0, 0, 0, 0.16);
+  -moz-box-shadow: 0 -1px 3px rgba(0, 0, 0, 0.12), 0 -1px 1px 1px rgba(0, 0, 0, 0.16);
+  box-shadow: 0 -1px 3px rgba(0, 0, 0, 0.12), 0 -1px 1px 1px rgba(0, 0, 0, 0.16);
+  border-bottom: 5px solid #222222;
+  border-top: 0;
+}
+.fr-toolbar.fr-inline.fr-above .fr-arrow {
+  top: auto;
+  bottom: -9px;
+  border-bottom: 0;
+  border-top-color: inherit;
+  border-top-style: solid;
+  border-top-width: 5px;
+}
+.fr-toolbar.fr-top {
+  top: 0;
+  border-radius: 2px 2px 0 0;
+  -moz-border-radius: 2px 2px 0 0;
+  -webkit-border-radius: 2px 2px 0 0;
+  -moz-background-clip: padding;
+  -webkit-background-clip: padding-box;
+  background-clip: padding-box;
+  -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 1px 1px rgba(0, 0, 0, 0.16);
+  -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 1px 1px rgba(0, 0, 0, 0.16);
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 1px 1px rgba(0, 0, 0, 0.16);
+}
+.fr-toolbar.fr-bottom {
+  bottom: 0;
+  border-radius: 0 0 2px 2px;
+  -moz-border-radius: 0 0 2px 2px;
+  -webkit-border-radius: 0 0 2px 2px;
+  -moz-background-clip: padding;
+  -webkit-background-clip: padding-box;
+  background-clip: padding-box;
+  -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 1px 1px rgba(0, 0, 0, 0.16);
+  -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 1px 1px rgba(0, 0, 0, 0.16);
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 1px 1px rgba(0, 0, 0, 0.16);
+}
+.fr-separator {
+  background: #ebebeb;
+  display: block;
+  vertical-align: top;
+  float: left;
+}
+.fr-separator + .fr-separator {
+  display: none;
+}
+.fr-separator.fr-vs {
+  height: 34px;
+  width: 1px;
+  margin: 2px;
+}
+.fr-separator.fr-hs {
+  clear: both;
+  height: 1px;
+  width: calc(100% - (2 * 2px));
+  margin: 0 2px;
+}
+.fr-separator.fr-hidden {
+  display: none !important;
+}
+.fr-rtl .fr-separator {
+  float: right;
+}
+.fr-toolbar.fr-inline .fr-separator.fr-hs {
+  float: none;
+}
+.fr-toolbar.fr-inline .fr-separator.fr-vs {
+  float: none;
+  display: inline-block;
+}
+.fr-visibility-helper {
+  display: none;
+  margin-left: 0px !important;
+}
+@media (min-width: 768px) {
+  .fr-visibility-helper {
+    margin-left: 1px !important;
+  }
+}
+@media (min-width: 992px) {
+  .fr-visibility-helper {
+    margin-left: 2px !important;
+  }
+}
+@media (min-width: 1200px) {
+  .fr-visibility-helper {
+    margin-left: 3px !important;
+  }
+}
+.fr-opacity-0 {
+  -webkit-opacity: 0;
+  -moz-opacity: 0;
+  opacity: 0;
+  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
+}
+.fr-box {
+  position: relative;
+}
+/**
+ * Postion sticky hacks.
+ */
+.fr-sticky {
+  position: -webkit-sticky;
+  position: -moz-sticky;
+  position: -ms-sticky;
+  position: -o-sticky;
+  position: sticky;
+}
+.fr-sticky-off {
+  position: relative;
+}
+.fr-sticky-on {
+  position: fixed;
+}
+.fr-sticky-on.fr-sticky-ios {
+  position: absolute;
+  left: 0;
+  right: 0;
+  width: auto !important;
+}
+.fr-sticky-dummy {
+  display: none;
+}
+.fr-sticky-on + .fr-sticky-dummy,
+.fr-sticky-box > .fr-sticky-dummy {
+  display: block;
+}
+span.fr-sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  border: 0;
+}
+
+.clearfix::after {
+  clear: both;
+  display: block;
+  content: "";
+  height: 0;
+}
+.hide-by-clipping {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  border: 0;
+}
+.fr-box .fr-counter {
+  position: absolute;
+  bottom: 0px;
+  padding: 5px;
+  right: 0px;
+  color: #cccccc;
+  content: attr(data-chars);
+  font-size: 15px;
+  font-family: "Times New Roman", Georgia, Serif;
+  z-index: 1;
+  background: #ffffff;
+  border-top: solid 1px #ebebeb;
+  border-left: solid 1px #ebebeb;
+  border-radius: 2px 0 0 0;
+  -moz-border-radius: 2px 0 0 0;
+  -webkit-border-radius: 2px 0 0 0;
+  -moz-background-clip: padding;
+  -webkit-background-clip: padding-box;
+  background-clip: padding-box;
+}
+.fr-box.fr-rtl .fr-counter {
+  left: 0px;
+  right: auto;
+  border-left: none;
+  border-right: solid 1px #ebebeb;
+  border-radius: 0 2px 0 0;
+  -moz-border-radius: 0 2px 0 0;
+  -webkit-border-radius: 0 2px 0 0;
+  -moz-background-clip: padding;
+  -webkit-background-clip: padding-box;
+  background-clip: padding-box;
+}
+.fr-box.fr-code-view .fr-counter {
+  display: none;
+}
+
+.clearfix::after {
+  clear: both;
+  display: block;
+  content: "";
+  height: 0;
+}
+.hide-by-clipping {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  border: 0;
+}
+textarea.fr-code {
+  display: none;
+  width: 100%;
+  resize: none;
+  -moz-resize: none;
+  -webkit-resize: none;
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+  border: none;
+  padding: 10px;
+  margin: 0px;
+  font-family: "Courier New", monospace;
+  font-size: 14px;
+  background: #ffffff;
+  color: #000000;
+  outline: none;
+}
+.fr-box.fr-rtl textarea.fr-code {
+  direction: rtl;
+}
+.fr-box .CodeMirror {
+  display: none;
+}
+.fr-box.fr-code-view textarea.fr-code {
+  display: block;
+}
+.fr-box.fr-code-view.fr-inline {
+  -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 1px 1px rgba(0, 0, 0, 0.16);
+  -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 1px 1px rgba(0, 0, 0, 0.16);
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 1px 1px rgba(0, 0, 0, 0.16);
+}
+.fr-box.fr-code-view .fr-element,
+.fr-box.fr-code-view .fr-placeholder,
+.fr-box.fr-code-view .fr-iframe {
+  display: none;
+}
+.fr-box.fr-code-view .CodeMirror {
+  display: block;
+}
+.fr-box.fr-inline.fr-code-view .fr-command.fr-btn.html-switch {
+  display: block;
+}
+.fr-box.fr-inline .fr-command.fr-btn.html-switch {
+  position: absolute;
+  top: 0;
+  right: 0;
+  -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 1px 1px rgba(0, 0, 0, 0.16);
+  -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 1px 1px rgba(0, 0, 0, 0.16);
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 1px 1px rgba(0, 0, 0, 0.16);
+  display: none;
+  background: #ffffff;
+  color: #222222;
+  -moz-outline: 0;
+  outline: 0;
+  border: 0;
+  line-height: 1;
+  cursor: pointer;
+  text-align: left;
+  padding: 12px 12px;
+  -webkit-transition: background 0.2s ease 0s;
+  -moz-transition: background 0.2s ease 0s;
+  -ms-transition: background 0.2s ease 0s;
+  -o-transition: background 0.2s ease 0s;
+  border-radius: 0;
+  -moz-border-radius: 0;
+  -webkit-border-radius: 0;
+  -moz-background-clip: padding;
+  -webkit-background-clip: padding-box;
+  background-clip: padding-box;
+  z-index: 2;
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+  text-decoration: none;
+  user-select: none;
+  -o-user-select: none;
+  -moz-user-select: none;
+  -khtml-user-select: none;
+  -webkit-user-select: none;
+  -ms-user-select: none;
+}
+.fr-box.fr-inline .fr-command.fr-btn.html-switch i {
+  font-size: 14px;
+  width: 14px;
+  text-align: center;
+}
+.fr-box.fr-inline .fr-command.fr-btn.html-switch.fr-desktop:hover {
+  background: #ebebeb;
+}
+
+.clearfix::after {
+  clear: both;
+  display: block;
+  content: "";
+  height: 0;
+}
+.hide-by-clipping {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  border: 0;
+}
+.fr-popup .fr-colors-tabs {
+  -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 1px 1px rgba(0, 0, 0, 0.16);
+  -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 1px 1px rgba(0, 0, 0, 0.16);
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 1px 1px rgba(0, 0, 0, 0.16);
+  margin-bottom: 5px;
+  line-height: 16px;
+  margin-left: -2px;
+  margin-right: -2px;
+}
+.fr-popup .fr-colors-tabs .fr-colors-tab {
+  display: inline-block;
+  width: 50%;
+  cursor: pointer;
+  text-align: center;
+  color: #222222;
+  font-size: 13px;
+  padding: 8px 0;
+  position: relative;
+}
+.fr-popup .fr-colors-tabs .fr-colors-tab:hover,
+.fr-popup .fr-colors-tabs .fr-colors-tab:focus {
+  color: #1e88e5;
+}
+.fr-popup .fr-colors-tabs .fr-colors-tab[data-param1="background"]::after {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  height: 2px;
+  background: #1e88e5;
+  content: '';
+  -webkit-transition: transform 0.2s ease 0s;
+  -moz-transition: transform 0.2s ease 0s;
+  -ms-transition: transform 0.2s ease 0s;
+  -o-transition: transform 0.2s ease 0s;
+}
+.fr-popup .fr-colors-tabs .fr-colors-tab.fr-selected-tab {
+  color: #1e88e5;
+}
+.fr-popup .fr-colors-tabs .fr-colors-tab.fr-selected-tab[data-param1="text"] ~ [data-param1="background"]::after {
+  -webkit-transform: translate3d(-100%, 0, 0);
+  -moz-transform: translate3d(-100%, 0, 0);
+  -ms-transform: translate3d(-100%, 0, 0);
+  -o-transform: translate3d(-100%, 0, 0);
+}
+.fr-popup .fr-color-hex-layer {
+  width: 100%;
+  margin: 0px;
+  padding: 10px;
+}
+.fr-popup .fr-color-hex-layer .fr-input-line {
+  float: left;
+  width: calc(100% - 50px);
+  padding: 8px 0 0;
+}
+.fr-popup .fr-color-hex-layer .fr-action-buttons {
+  float: right;
+  width: 50px;
+}
+.fr-popup .fr-color-hex-layer .fr-action-buttons button {
+  background-color: #1e88e5;
+  color: #FFF;
+  border-radius: 2px;
+  -moz-border-radius: 2px;
+  -webkit-border-radius: 2px;
+  -moz-background-clip: padding;
+  -webkit-background-clip: padding-box;
+  background-clip: padding-box;
+  font-size: 13px;
+  height: 32px;
+}
+.fr-popup .fr-color-hex-layer .fr-action-buttons button:hover {
+  background-color: #166dba;
+  color: #FFF;
+}
+.fr-popup .fr-separator + .fr-colors-tabs {
+  -webkit-box-shadow: none;
+  -moz-box-shadow: none;
+  box-shadow: none;
+  margin-left: 2px;
+  margin-right: 2px;
+}
+.fr-popup .fr-color-set {
+  line-height: 0;
+  display: none;
+}
+.fr-popup .fr-color-set.fr-selected-set {
+  display: block;
+}
+.fr-popup .fr-color-set > span {
+  display: inline-block;
+  width: 32px;
+  height: 32px;
+  position: relative;
+  z-index: 1;
+}
+.fr-popup .fr-color-set > span > i,
+.fr-popup .fr-color-set > span > svg {
+  text-align: center;
+  line-height: 32px;
+  height: 32px;
+  width: 32px;
+  font-size: 13px;
+  position: absolute;
+  bottom: 0;
+  cursor: default;
+  left: 0;
+}
+.fr-popup .fr-color-set > span .fr-selected-color {
+  color: #ffffff;
+  font-family: FontAwesome;
+  font-size: 13px;
+  font-weight: 400;
+  line-height: 32px;
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  right: 0;
+  left: 0;
+  text-align: center;
+  cursor: default;
+}
+.fr-popup .fr-color-set > span:hover,
+.fr-popup .fr-color-set > span:focus {
+  outline: 1px solid #222222;
+  z-index: 2;
+}
+.fr-rtl .fr-popup .fr-colors-tabs .fr-colors-tab.fr-selected-tab[data-param1="text"] ~ [data-param1="background"]::after {
+  -webkit-transform: translate3d(100%, 0, 0);
+  -moz-transform: translate3d(100%, 0, 0);
+  -ms-transform: translate3d(100%, 0, 0);
+  -o-transform: translate3d(100%, 0, 0);
+}
+
+.clearfix::after {
+  clear: both;
+  display: block;
+  content: "";
+  height: 0;
+}
+.hide-by-clipping {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  border: 0;
+}
+.fr-drag-helper {
+  background: #1e88e5;
+  height: 2px;
+  margin-top: -1px;
+  -webkit-opacity: 0.2;
+  -moz-opacity: 0.2;
+  opacity: 0.2;
+  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
+  position: absolute;
+  z-index: 2147483640;
+  display: none;
+}
+.fr-drag-helper.fr-visible {
+  display: block;
+}
+.fr-dragging {
+  -webkit-opacity: 0.4;
+  -moz-opacity: 0.4;
+  opacity: 0.4;
+  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
+}
+
+.clearfix::after {
+  clear: both;
+  display: block;
+  content: "";
+  height: 0;
+}
+.hide-by-clipping {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  border: 0;
+}
+.fr-popup .fr-emoticon {
+  display: inline-block;
+  font-size: 20px;
+  width: 20px;
+  padding: 5px;
+  line-height: 1;
+  cursor: default;
+  font-weight: normal;
+  font-family: "Apple Color Emoji", "Segoe UI Emoji", "NotoColorEmoji", "Segoe UI Symbol", "Android Emoji", "EmojiSymbols";
+  -webkit-box-sizing: content-box;
+  -moz-box-sizing: content-box;
+  box-sizing: content-box;
+}
+.fr-popup .fr-emoticon img {
+  height: 20px;
+}
+.fr-popup .fr-link:focus {
+  outline: 0;
+  background: #ebebeb;
+}
+
+.clearfix::after {
+  clear: both;
+  display: block;
+  content: "";
+  height: 0;
+}
+.hide-by-clipping {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  border: 0;
+}
+.fr-popup .fr-file-upload-layer {
+  border: dashed 2px #bdbdbd;
+  padding: 25px 0;
+  position: relative;
+  font-size: 14px;
+  letter-spacing: 1px;
+  line-height: 140%;
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+  text-align: center;
+}
+.fr-popup .fr-file-upload-layer:hover {
+  background: #ebebeb;
+}
+.fr-popup .fr-file-upload-layer.fr-drop {
+  background: #ebebeb;
+  border-color: #1e88e5;
+}
+.fr-popup .fr-file-upload-layer .fr-form {
+  -webkit-opacity: 0;
+  -moz-opacity: 0;
+  opacity: 0;
+  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  z-index: 2147483640;
+  overflow: hidden;
+  margin: 0 !important;
+  padding: 0 !important;
+  width: 100% !important;
+}
+.fr-popup .fr-file-upload-layer .fr-form input {
+  cursor: pointer;
+  position: absolute;
+  right: 0px;
+  top: 0px;
+  bottom: 0px;
+  width: 500%;
+  height: 100%;
+  margin: 0px;
+  font-size: 400px;
+}
+.fr-popup .fr-file-progress-bar-layer {
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+}
+.fr-popup .fr-file-progress-bar-layer > h3 {
+  font-size: 16px;
+  margin: 10px 0;
+  font-weight: normal;
+}
+.fr-popup .fr-file-progress-bar-layer > div.fr-action-buttons {
+  display: none;
+}
+.fr-popup .fr-file-progress-bar-layer > div.fr-loader {
+  background: #bcdbf7;
+  height: 10px;
+  width: 100%;
+  margin-top: 20px;
+  overflow: hidden;
+  position: relative;
+}
+.fr-popup .fr-file-progress-bar-layer > div.fr-loader span {
+  display: block;
+  height: 100%;
+  width: 0%;
+  background: #1e88e5;
+  -webkit-transition: width 0.2s ease 0s;
+  -moz-transition: width 0.2s ease 0s;
+  -ms-transition: width 0.2s ease 0s;
+  -o-transition: width 0.2s ease 0s;
+}
+.fr-popup .fr-file-progress-bar-layer > div.fr-loader.fr-indeterminate span {
+  width: 30% !important;
+  position: absolute;
+  top: 0;
+  -webkit-animation: loading 2s linear infinite;
+  -moz-animation: loading 2s linear infinite;
+  -o-animation: loading 2s linear infinite;
+  animation: loading 2s linear infinite;
+}
+.fr-popup .fr-file-progress-bar-layer.fr-error > div.fr-loader {
+  display: none;
+}
+.fr-popup .fr-file-progress-bar-layer.fr-error > div.fr-action-buttons {
+  display: block;
+}
+@keyframes loading {
+  from {
+    left: -25%;
+  }
+  to {
+    left: 100%;
+  }
+}
+@-webkit-keyframes loading {
+  from {
+    left: -25%;
+  }
+  to {
+    left: 100%;
+  }
+}
+@-moz-keyframes loading {
+  from {
+    left: -25%;
+  }
+  to {
+    left: 100%;
+  }
+}
+@-o-keyframes loading {
+  from {
+    left: -25%;
+  }
+  to {
+    left: 100%;
+  }
+}
+
+body.fr-fullscreen {
+  overflow: hidden;
+  height: 100%;
+  width: 100%;
+  position: fixed;
+}
+.fr-box.fr-fullscreen {
+  margin: 0 !important;
+  position: fixed;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: 0;
+  z-index: 2147483630 !important;
+  width: auto !important;
+}
+.fr-box.fr-fullscreen .fr-toolbar.fr-top {
+  top: 0 !important;
+}
+.fr-box.fr-fullscreen .fr-toolbar.fr-bottom {
+  bottom: 0 !important;
+}
+
+.clearfix::after {
+  clear: both;
+  display: block;
+  content: "";
+  height: 0;
+}
+.hide-by-clipping {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  border: 0;
+}
+.fr-modal .fr-modal-wrapper .fr-modal-body .fr-help-modal {
+  text-align: left;
+  padding: 20px 20px 10px;
+}
+.fr-modal .fr-modal-wrapper .fr-modal-body .fr-help-modal table {
+  border-collapse: collapse;
+  font-size: 14px;
+  line-height: 1.5;
+  width: 100%;
+}
+.fr-modal .fr-modal-wrapper .fr-modal-body .fr-help-modal table + table {
+  margin-top: 20px;
+}
+.fr-modal .fr-modal-wrapper .fr-modal-body .fr-help-modal table tr {
+  border: 0;
+}
+.fr-modal .fr-modal-wrapper .fr-modal-body .fr-help-modal table th,
+.fr-modal .fr-modal-wrapper .fr-modal-body .fr-help-modal table td {
+  padding: 6px 0 4px;
+}
+.fr-modal .fr-modal-wrapper .fr-modal-body .fr-help-modal table tbody tr {
+  border-bottom: solid 1px #ebebeb;
+}
+.fr-modal .fr-modal-wrapper .fr-modal-body .fr-help-modal table tbody td:first-child {
+  width: 60%;
+  color: #646464;
+}
+.fr-modal .fr-modal-wrapper .fr-modal-body .fr-help-modal table tbody td:nth-child(n+2) {
+  letter-spacing: 0.5px;
+}
+
+.clearfix::after {
+  clear: both;
+  display: block;
+  content: "";
+  height: 0;
+}
+.hide-by-clipping {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  border: 0;
+}
+.fr-element img {
+  cursor: pointer;
+}
+.fr-image-resizer {
+  position: absolute;
+  border: solid 1px #1e88e5;
+  display: none;
+  user-select: none;
+  -o-user-select: none;
+  -moz-user-select: none;
+  -khtml-user-select: none;
+  -webkit-user-select: none;
+  -ms-user-select: none;
+  -webkit-box-sizing: content-box;
+  -moz-box-sizing: content-box;
+  box-sizing: content-box;
+}
+.fr-image-resizer.fr-active {
+  display: block;
+}
+.fr-image-resizer .fr-handler {
+  display: block;
+  position: absolute;
+  background: #1e88e5;
+  border: solid 1px #ffffff;
+  z-index: 4;
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+}
+.fr-image-resizer .fr-handler.fr-hnw {
+  cursor: nw-resize;
+}
+.fr-image-resizer .fr-handler.fr-hne {
+  cursor: ne-resize;
+}
+.fr-image-resizer .fr-handler.fr-hsw {
+  cursor: sw-resize;
+}
+.fr-image-resizer .fr-handler.fr-hse {
+  cursor: se-resize;
+}
+.fr-image-resizer .fr-handler {
+  width: 12px;
+  height: 12px;
+}
+.fr-image-resizer .fr-handler.fr-hnw {
+  left: -6px;
+  top: -6px;
+}
+.fr-image-resizer .fr-handler.fr-hne {
+  right: -6px;
+  top: -6px;
+}
+.fr-image-resizer .fr-handler.fr-hsw {
+  left: -6px;
+  bottom: -6px;
+}
+.fr-image-resizer .fr-handler.fr-hse {
+  right: -6px;
+  bottom: -6px;
+}
+@media (min-width: 1200px) {
+  .fr-image-resizer .fr-handler {
+    width: 10px;
+    height: 10px;
+  }
+  .fr-image-resizer .fr-handler.fr-hnw {
+    left: -5px;
+    top: -5px;
+  }
+  .fr-image-resizer .fr-handler.fr-hne {
+    right: -5px;
+    top: -5px;
+  }
+  .fr-image-resizer .fr-handler.fr-hsw {
+    left: -5px;
+    bottom: -5px;
+  }
+  .fr-image-resizer .fr-handler.fr-hse {
+    right: -5px;
+    bottom: -5px;
+  }
+}
+.fr-image-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: 0;
+  z-index: 2147483640;
+  display: none;
+}
+.fr-popup .fr-image-upload-layer {
+  border: dashed 2px #bdbdbd;
+  padding: 25px 0;
+  position: relative;
+  font-size: 14px;
+  letter-spacing: 1px;
+  line-height: 140%;
+  text-align: center;
+}
+.fr-popup .fr-image-upload-layer:hover {
+  background: #ebebeb;
+}
+.fr-popup .fr-image-upload-layer.fr-drop {
+  background: #ebebeb;
+  border-color: #1e88e5;
+}
+.fr-popup .fr-image-upload-layer .fr-form {
+  -webkit-opacity: 0;
+  -moz-opacity: 0;
+  opacity: 0;
+  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  z-index: 2147483640;
+  overflow: hidden;
+  margin: 0 !important;
+  padding: 0 !important;
+  width: 100% !important;
+}
+.fr-popup .fr-image-upload-layer .fr-form input {
+  cursor: pointer;
+  position: absolute;
+  right: 0px;
+  top: 0px;
+  bottom: 0px;
+  width: 500%;
+  height: 100%;
+  margin: 0px;
+  font-size: 400px;
+}
+.fr-popup .fr-image-progress-bar-layer > h3 {
+  font-size: 16px;
+  margin: 10px 0;
+  font-weight: normal;
+}
+.fr-popup .fr-image-progress-bar-layer > div.fr-action-buttons {
+  display: none;
+}
+.fr-popup .fr-image-progress-bar-layer > div.fr-loader {
+  background: #bcdbf7;
+  height: 10px;
+  width: 100%;
+  margin-top: 20px;
+  overflow: hidden;
+  position: relative;
+}
+.fr-popup .fr-image-progress-bar-layer > div.fr-loader span {
+  display: block;
+  height: 100%;
+  width: 0%;
+  background: #1e88e5;
+  -webkit-transition: width 0.2s ease 0s;
+  -moz-transition: width 0.2s ease 0s;
+  -ms-transition: width 0.2s ease 0s;
+  -o-transition: width 0.2s ease 0s;
+}
+.fr-popup .fr-image-progress-bar-layer > div.fr-loader.fr-indeterminate span {
+  width: 30% !important;
+  position: absolute;
+  top: 0;
+  -webkit-animation: loading 2s linear infinite;
+  -moz-animation: loading 2s linear infinite;
+  -o-animation: loading 2s linear infinite;
+  animation: loading 2s linear infinite;
+}
+.fr-popup .fr-image-progress-bar-layer.fr-error > div.fr-loader {
+  display: none;
+}
+.fr-popup .fr-image-progress-bar-layer.fr-error > div.fr-action-buttons {
+  display: block;
+}
+.fr-image-size-layer .fr-image-group .fr-input-line {
+  width: calc(50% - 5px);
+  display: inline-block;
+}
+.fr-image-size-layer .fr-image-group .fr-input-line + .fr-input-line {
+  margin-left: 10px;
+}
+.fr-uploading {
+  -webkit-opacity: 0.4;
+  -moz-opacity: 0.4;
+  opacity: 0.4;
+  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
+}
+@keyframes loading {
+  from {
+    left: -25%;
+  }
+  to {
+    left: 100%;
+  }
+}
+@-webkit-keyframes loading {
+  from {
+    left: -25%;
+  }
+  to {
+    left: 100%;
+  }
+}
+@-moz-keyframes loading {
+  from {
+    left: -25%;
+  }
+  to {
+    left: 100%;
+  }
+}
+@-o-keyframes loading {
+  from {
+    left: -25%;
+  }
+  to {
+    left: 100%;
+  }
+}
+
+.clearfix::after {
+  clear: both;
+  display: block;
+  content: "";
+  height: 0;
+}
+.hide-by-clipping {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  border: 0;
+}
+.fr-modal-head .fr-modal-head-line::after {
+  clear: both;
+  display: block;
+  content: "";
+  height: 0;
+}
+.fr-modal-head .fr-modal-head-line i.fr-modal-more {
+  float: left;
+  opacity: 1;
+  -webkit-transition: padding 0.2s ease 0s, width 0.2s ease 0s, opacity 0.2s ease 0s;
+  -moz-transition: padding 0.2s ease 0s, width 0.2s ease 0s, opacity 0.2s ease 0s;
+  -ms-transition: padding 0.2s ease 0s, width 0.2s ease 0s, opacity 0.2s ease 0s;
+  -o-transition: padding 0.2s ease 0s, width 0.2s ease 0s, opacity 0.2s ease 0s;
+}
+.fr-modal-head .fr-modal-head-line i.fr-modal-more.fr-not-available {
+  opacity: 0;
+  width: 0;
+  padding: 12px 0;
+}
+.fr-modal-head .fr-modal-tags {
+  display: none;
+  text-align: left;
+}
+.fr-modal-head .fr-modal-tags a {
+  display: inline-block;
+  opacity: 0;
+  padding: 6px 8px;
+  margin: 8px 0 8px 8px;
+  text-decoration: none;
+  border-radius: 2px;
+  -moz-border-radius: 2px;
+  -webkit-border-radius: 2px;
+  -moz-background-clip: padding;
+  -webkit-background-clip: padding-box;
+  background-clip: padding-box;
+  color: #1e88e5;
+  -webkit-transition: opacity 0.2s ease 0s, background 0.2s ease 0s;
+  -moz-transition: opacity 0.2s ease 0s, background 0.2s ease 0s;
+  -ms-transition: opacity 0.2s ease 0s, background 0.2s ease 0s;
+  -o-transition: opacity 0.2s ease 0s, background 0.2s ease 0s;
+  cursor: pointer;
+}
+.fr-modal-head .fr-modal-tags a:focus {
+  outline: none;
+}
+.fr-modal-head .fr-modal-tags a.fr-selected-tag {
+  background: #d6d6d6;
+}
+div.fr-modal-body .fr-preloader {
+  display: block;
+  margin: 50px auto;
+}
+div.fr-modal-body div.fr-image-list {
+  text-align: center;
+  margin: 0 10px;
+  padding: 0;
+}
+div.fr-modal-body div.fr-image-list::after {
+  clear: both;
+  display: block;
+  content: "";
+  height: 0;
+}
+div.fr-modal-body div.fr-image-list .fr-list-column {
+  float: left;
+  width: calc((100% - 10px) / 2);
+}
+@media (min-width: 768px) and (max-width: 1199px) {
+  div.fr-modal-body div.fr-image-list .fr-list-column {
+    width: calc((100% - 20px) / 3);
+  }
+}
+@media (min-width: 1200px) {
+  div.fr-modal-body div.fr-image-list .fr-list-column {
+    width: calc((100% - 30px) / 4);
+  }
+}
+div.fr-modal-body div.fr-image-list .fr-list-column + .fr-list-column {
+  margin-left: 10px;
+}
+div.fr-modal-body div.fr-image-list div.fr-image-container {
+  position: relative;
+  width: 100%;
+  display: block;
+  -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 1px 1px rgba(0, 0, 0, 0.16);
+  -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 1px 1px rgba(0, 0, 0, 0.16);
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 1px 1px rgba(0, 0, 0, 0.16);
+  border-radius: 2px;
+  -moz-border-radius: 2px;
+  -webkit-border-radius: 2px;
+  -moz-background-clip: padding;
+  -webkit-background-clip: padding-box;
+  background-clip: padding-box;
+  overflow: hidden;
+}
+div.fr-modal-body div.fr-image-list div.fr-image-container:first-child {
+  margin-top: 10px;
+}
+div.fr-modal-body div.fr-image-list div.fr-image-container + div {
+  margin-top: 10px;
+}
+div.fr-modal-body div.fr-image-list div.fr-image-container.fr-image-deleting::after {
+  position: absolute;
+  -webkit-opacity: 0.5;
+  -moz-opacity: 0.5;
+  opacity: 0.5;
+  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
+  -webkit-transition: opacity 0.2s ease 0s;
+  -moz-transition: opacity 0.2s ease 0s;
+  -ms-transition: opacity 0.2s ease 0s;
+  -o-transition: opacity 0.2s ease 0s;
+  background: #000000;
+  content: "";
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: 0;
+  z-index: 2;
+}
+div.fr-modal-body div.fr-image-list div.fr-image-container.fr-image-deleting::before {
+  content: attr(data-deleting);
+  color: #ffffff;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: 0;
+  margin: auto;
+  position: absolute;
+  z-index: 3;
+  font-size: 15px;
+  height: 20px;
+}
+div.fr-modal-body div.fr-image-list div.fr-image-container.fr-empty {
+  height: 95px;
+  background: #cccccc;
+  z-index: 1;
+}
+div.fr-modal-body div.fr-image-list div.fr-image-container.fr-empty::after {
+  position: absolute;
+  margin: auto;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  content: attr(data-loading);
+  display: inline-block;
+  height: 20px;
+}
+div.fr-modal-body div.fr-image-list div.fr-image-container img {
+  width: 100%;
+  vertical-align: middle;
+  position: relative;
+  z-index: 2;
+  -webkit-opacity: 1;
+  -moz-opacity: 1;
+  opacity: 1;
+  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
+  -webkit-transition: opacity 0.2s ease 0s, filter 0.2s ease 0s;
+  -moz-transition: opacity 0.2s ease 0s, filter 0.2s ease 0s;
+  -ms-transition: opacity 0.2s ease 0s, filter 0.2s ease 0s;
+  -o-transition: opacity 0.2s ease 0s, filter 0.2s ease 0s;
+  -webkit-transform: translateZ(0);
+  -moz-transform: translateZ(0);
+  -ms-transform: translateZ(0);
+  -o-transform: translateZ(0);
+}
+div.fr-modal-body div.fr-image-list div.fr-image-container.fr-mobile-selected img {
+  -webkit-opacity: 0.75;
+  -moz-opacity: 0.75;
+  opacity: 0.75;
+  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
+}
+div.fr-modal-body div.fr-image-list div.fr-image-container.fr-mobile-selected .fr-delete-img,
+div.fr-modal-body div.fr-image-list div.fr-image-container.fr-mobile-selected .fr-insert-img {
+  display: inline-block;
+}
+div.fr-modal-body div.fr-image-list div.fr-image-container .fr-delete-img,
+div.fr-modal-body div.fr-image-list div.fr-image-container .fr-insert-img {
+  display: none;
+  top: 50%;
+  border-radius: 100%;
+  -moz-border-radius: 100%;
+  -webkit-border-radius: 100%;
+  -moz-background-clip: padding;
+  -webkit-background-clip: padding-box;
+  background-clip: padding-box;
+  -webkit-transition: background 0.2s ease 0s, color 0.2s ease 0s;
+  -moz-transition: background 0.2s ease 0s, color 0.2s ease 0s;
+  -ms-transition: background 0.2s ease 0s, color 0.2s ease 0s;
+  -o-transition: background 0.2s ease 0s, color 0.2s ease 0s;
+  -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 1px 1px rgba(0, 0, 0, 0.16);
+  -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 1px 1px rgba(0, 0, 0, 0.16);
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 1px 1px rgba(0, 0, 0, 0.16);
+  position: absolute;
+  cursor: pointer;
+  margin: 0;
+  width: 36px;
+  height: 36px;
+  line-height: 36px;
+  text-decoration: none;
+  z-index: 3;
+}
+div.fr-modal-body div.fr-image-list div.fr-image-container .fr-delete-img {
+  background: #b8312f;
+  color: #ffffff;
+  left: 50%;
+  -webkit-transform: translateY(-50%) translateX(25%);
+  -moz-transform: translateY(-50%) translateX(25%);
+  -ms-transform: translateY(-50%) translateX(25%);
+  -o-transform: translateY(-50%) translateX(25%);
+}
+div.fr-modal-body div.fr-image-list div.fr-image-container .fr-insert-img {
+  background: #ffffff;
+  color: #1e88e5;
+  left: 50%;
+  -webkit-transform: translateY(-50%) translateX(-125%);
+  -moz-transform: translateY(-50%) translateX(-125%);
+  -ms-transform: translateY(-50%) translateX(-125%);
+  -o-transform: translateY(-50%) translateX(-125%);
+}
+.fr-desktop .fr-modal-wrapper .fr-modal-head .fr-modal-tags a:hover {
+  background: #ebebeb;
+}
+.fr-desktop .fr-modal-wrapper .fr-modal-head .fr-modal-tags a.fr-selected-tag {
+  background: #d6d6d6;
+}
+.fr-desktop .fr-modal-wrapper div.fr-modal-body div.fr-image-list div.fr-image-container:hover img {
+  -webkit-opacity: 0.75;
+  -moz-opacity: 0.75;
+  opacity: 0.75;
+  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
+}
+.fr-desktop .fr-modal-wrapper div.fr-modal-body div.fr-image-list div.fr-image-container:hover .fr-delete-img,
+.fr-desktop .fr-modal-wrapper div.fr-modal-body div.fr-image-list div.fr-image-container:hover .fr-insert-img {
+  display: inline-block;
+}
+.fr-desktop .fr-modal-wrapper div.fr-modal-body div.fr-image-list div.fr-image-container .fr-delete-img:hover {
+  background: #bf4644;
+  color: #ffffff;
+}
+.fr-desktop .fr-modal-wrapper div.fr-modal-body div.fr-image-list div.fr-image-container .fr-insert-img:hover {
+  background: #ebebeb;
+}
+
+.clearfix::after {
+  clear: both;
+  display: block;
+  content: "";
+  height: 0;
+}
+.hide-by-clipping {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  border: 0;
+}
+.fr-line-breaker {
+  cursor: text;
+  border-top: 1px solid #1e88e5;
+  position: fixed;
+  z-index: 2;
+  display: none;
+}
+.fr-line-breaker.fr-visible {
+  display: block;
+}
+.fr-line-breaker a.fr-floating-btn {
+  position: absolute;
+  left: calc(50% - (32px / 2));
+  top: -16px;
+}
+
+.clearfix::after {
+  clear: both;
+  display: block;
+  content: "";
+  height: 0;
+}
+.hide-by-clipping {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  border: 0;
+}
+.fr-quick-insert {
+  position: absolute;
+  z-index: 2147483639;
+  white-space: nowrap;
+  padding-right: 5px;
+  margin-left: -5px;
+  -webkit-box-sizing: content-box;
+  -moz-box-sizing: content-box;
+  box-sizing: content-box;
+}
+.fr-quick-insert.fr-on a.fr-floating-btn svg {
+  -webkit-transform: rotate(135deg);
+  -moz-transform: rotate(135deg);
+  -ms-transform: rotate(135deg);
+  -o-transform: rotate(135deg);
+}
+.fr-quick-insert.fr-hidden {
+  display: none;
+}
+.fr-qi-helper {
+  position: absolute;
+  z-index: 3;
+  padding-left: 16px;
+  white-space: nowrap;
+}
+.fr-qi-helper a.fr-btn.fr-floating-btn {
+  text-align: center;
+  display: inline-block;
+  color: #222222;
+  -webkit-opacity: 0;
+  -moz-opacity: 0;
+  opacity: 0;
+  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
+  -webkit-transform: scale(0);
+  -moz-transform: scale(0);
+  -ms-transform: scale(0);
+  -o-transform: scale(0);
+}
+.fr-qi-helper a.fr-btn.fr-floating-btn.fr-size-1 {
+  -webkit-opacity: 1;
+  -moz-opacity: 1;
+  opacity: 1;
+  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
+  -webkit-transform: scale(1);
+  -moz-transform: scale(1);
+  -ms-transform: scale(1);
+  -o-transform: scale(1);
+}
+
+.clearfix::after {
+  clear: both;
+  display: block;
+  content: "";
+  height: 0;
+}
+.hide-by-clipping {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  border: 0;
+}
+.fr-modal .fr-modal-wrapper .fr-modal-body .fr-special-characters-modal {
+  text-align: left;
+  padding: 20px 20px 10px;
+}
+.fr-modal .fr-modal-wrapper .fr-modal-body .fr-special-characters-modal .fr-special-characters-list {
+  margin-bottom: 20px;
+}
+.fr-modal .fr-modal-wrapper .fr-modal-body .fr-special-characters-modal .fr-special-characters-title {
+  font-weight: bold;
+  font-size: 14px;
+  padding: 6px 0 4px;
+  margin: 0 0 5px;
+}
+.fr-modal .fr-modal-wrapper .fr-modal-body .fr-special-characters-modal .fr-special-character {
+  display: inline-block;
+  font-size: 16px;
+  width: 20px;
+  height: 20px;
+  padding: 5px;
+  line-height: 20px;
+  cursor: default;
+  font-weight: normal;
+  -webkit-box-sizing: content-box;
+  -moz-box-sizing: content-box;
+  box-sizing: content-box;
+  text-align: center;
+  border: 1px solid #cccccc;
+  margin: -1px 0 0 -1px;
+}
+
+.clearfix::after {
+  clear: both;
+  display: block;
+  content: "";
+  height: 0;
+}
+.hide-by-clipping {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  border: 0;
+}
+.fr-element table td.fr-selected-cell,
+.fr-element table th.fr-selected-cell {
+  border: 1px double #1e88e5;
+}
+.fr-element table tr {
+  user-select: none;
+  -o-user-select: none;
+  -moz-user-select: none;
+  -khtml-user-select: none;
+  -webkit-user-select: none;
+  -ms-user-select: none;
+}
+.fr-element table td,
+.fr-element table th {
+  user-select: text;
+  -o-user-select: text;
+  -moz-user-select: text;
+  -khtml-user-select: text;
+  -webkit-user-select: text;
+  -ms-user-select: text;
+}
+.fr-element .fr-no-selection table td,
+.fr-element .fr-no-selection table th {
+  user-select: none;
+  -o-user-select: none;
+  -moz-user-select: none;
+  -khtml-user-select: none;
+  -webkit-user-select: none;
+  -ms-user-select: none;
+}
+.fr-table-resizer {
+  cursor: col-resize;
+  position: absolute;
+  z-index: 3;
+  display: none;
+}
+.fr-table-resizer.fr-moving {
+  z-index: 2;
+}
+.fr-table-resizer div {
+  -webkit-opacity: 0;
+  -moz-opacity: 0;
+  opacity: 0;
+  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
+  border-right: 1px solid #1e88e5;
+}
+.fr-no-selection {
+  user-select: none;
+  -o-user-select: none;
+  -moz-user-select: none;
+  -khtml-user-select: none;
+  -webkit-user-select: none;
+  -ms-user-select: none;
+}
+.fr-popup .fr-table-colors-hex-layer {
+  width: 100%;
+  margin: 0px;
+  padding: 10px;
+}
+.fr-popup .fr-table-colors-hex-layer .fr-input-line {
+  float: left;
+  width: calc(100% - 50px);
+  padding: 8px 0 0;
+}
+.fr-popup .fr-table-colors-hex-layer .fr-action-buttons {
+  float: right;
+  width: 50px;
+}
+.fr-popup .fr-table-colors-hex-layer .fr-action-buttons button {
+  background-color: #1e88e5;
+  color: #FFF;
+  border-radius: 2px;
+  -moz-border-radius: 2px;
+  -webkit-border-radius: 2px;
+  -moz-background-clip: padding;
+  -webkit-background-clip: padding-box;
+  background-clip: padding-box;
+  font-size: 13px;
+  height: 32px;
+}
+.fr-popup .fr-table-colors-hex-layer .fr-action-buttons button:hover {
+  background-color: #166dba;
+  color: #FFF;
+}
+.fr-popup .fr-table-size .fr-table-size-info {
+  text-align: center;
+  font-size: 14px;
+  padding: 8px;
+}
+.fr-popup .fr-table-size .fr-select-table-size {
+  line-height: 0;
+  padding: 0 5px 5px;
+  white-space: nowrap;
+}
+.fr-popup .fr-table-size .fr-select-table-size > span {
+  display: inline-block;
+  padding: 0px 4px 4px 0;
+  background: transparent;
+}
+.fr-popup .fr-table-size .fr-select-table-size > span > span {
+  display: inline-block;
+  width: 18px;
+  height: 18px;
+  border: 1px solid #dddddd;
+}
+.fr-popup .fr-table-size .fr-select-table-size > span.hover {
+  background: transparent;
+}
+.fr-popup .fr-table-size .fr-select-table-size > span.hover > span {
+  background: rgba(30, 136, 229, 0.3);
+  border: solid 1px #1e88e5;
+}
+.fr-popup .fr-table-size .fr-select-table-size .new-line::after {
+  clear: both;
+  display: block;
+  content: "";
+  height: 0;
+}
+.fr-popup.fr-above .fr-table-size .fr-select-table-size > span {
+  display: inline-block !important;
+}
+.fr-popup .fr-table-colors-buttons {
+  margin-bottom: 5px;
+}
+.fr-popup .fr-table-colors {
+  line-height: 0;
+  display: block;
+}
+.fr-popup .fr-table-colors > span {
+  display: inline-block;
+  width: 32px;
+  height: 32px;
+  position: relative;
+  z-index: 1;
+}
+.fr-popup .fr-table-colors > span > i {
+  text-align: center;
+  line-height: 32px;
+  height: 32px;
+  width: 32px;
+  font-size: 13px;
+  position: absolute;
+  bottom: 0;
+  cursor: default;
+  left: 0;
+}
+.fr-popup .fr-table-colors > span:focus {
+  outline: 1px solid #222222;
+  z-index: 2;
+}
+.fr-popup.fr-desktop .fr-table-size .fr-select-table-size > span > span {
+  width: 12px;
+  height: 12px;
+}
+.fr-insert-helper {
+  position: absolute;
+  z-index: 9999;
+  white-space: nowrap;
+}
+
+.clearfix::after {
+  clear: both;
+  display: block;
+  content: "";
+  height: 0;
+}
+.hide-by-clipping {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  border: 0;
+}
+.fr-element .fr-video {
+  user-select: none;
+  -o-user-select: none;
+  -moz-user-select: none;
+  -khtml-user-select: none;
+  -webkit-user-select: none;
+  -ms-user-select: none;
+}
+.fr-element .fr-video::after {
+  position: absolute;
+  content: '';
+  z-index: 1;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  cursor: pointer;
+  display: block;
+  background: rgba(0, 0, 0, 0);
+}
+.fr-element .fr-video.fr-active > * {
+  z-index: 2;
+  position: relative;
+}
+.fr-element .fr-video > * {
+  -webkit-box-sizing: content-box;
+  -moz-box-sizing: content-box;
+  box-sizing: content-box;
+  max-width: 100%;
+  border: none;
+}
+.fr-box .fr-video-resizer {
+  position: absolute;
+  border: solid 1px #1e88e5;
+  display: none;
+  user-select: none;
+  -o-user-select: none;
+  -moz-user-select: none;
+  -khtml-user-select: none;
+  -webkit-user-select: none;
+  -ms-user-select: none;
+}
+.fr-box .fr-video-resizer.fr-active {
+  display: block;
+}
+.fr-box .fr-video-resizer .fr-handler {
+  display: block;
+  position: absolute;
+  background: #1e88e5;
+  border: solid 1px #ffffff;
+  z-index: 4;
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+}
+.fr-box .fr-video-resizer .fr-handler.fr-hnw {
+  cursor: nw-resize;
+}
+.fr-box .fr-video-resizer .fr-handler.fr-hne {
+  cursor: ne-resize;
+}
+.fr-box .fr-video-resizer .fr-handler.fr-hsw {
+  cursor: sw-resize;
+}
+.fr-box .fr-video-resizer .fr-handler.fr-hse {
+  cursor: se-resize;
+}
+.fr-box .fr-video-resizer .fr-handler {
+  width: 12px;
+  height: 12px;
+}
+.fr-box .fr-video-resizer .fr-handler.fr-hnw {
+  left: -6px;
+  top: -6px;
+}
+.fr-box .fr-video-resizer .fr-handler.fr-hne {
+  right: -6px;
+  top: -6px;
+}
+.fr-box .fr-video-resizer .fr-handler.fr-hsw {
+  left: -6px;
+  bottom: -6px;
+}
+.fr-box .fr-video-resizer .fr-handler.fr-hse {
+  right: -6px;
+  bottom: -6px;
+}
+@media (min-width: 1200px) {
+  .fr-box .fr-video-resizer .fr-handler {
+    width: 10px;
+    height: 10px;
+  }
+  .fr-box .fr-video-resizer .fr-handler.fr-hnw {
+    left: -5px;
+    top: -5px;
+  }
+  .fr-box .fr-video-resizer .fr-handler.fr-hne {
+    right: -5px;
+    top: -5px;
+  }
+  .fr-box .fr-video-resizer .fr-handler.fr-hsw {
+    left: -5px;
+    bottom: -5px;
+  }
+  .fr-box .fr-video-resizer .fr-handler.fr-hse {
+    right: -5px;
+    bottom: -5px;
+  }
+}
+.fr-popup .fr-video-size-layer .fr-video-group .fr-input-line {
+  width: calc(50% - 5px);
+  display: inline-block;
+}
+.fr-popup .fr-video-size-layer .fr-video-group .fr-input-line + .fr-input-line {
+  margin-left: 10px;
+}
+.fr-popup .fr-video-upload-layer {
+  border: dashed 2px #bdbdbd;
+  padding: 25px 0;
+  position: relative;
+  font-size: 14px;
+  letter-spacing: 1px;
+  line-height: 140%;
+  text-align: center;
+}
+.fr-popup .fr-video-upload-layer:hover {
+  background: #ebebeb;
+}
+.fr-popup .fr-video-upload-layer.fr-drop {
+  background: #ebebeb;
+  border-color: #1e88e5;
+}
+.fr-popup .fr-video-upload-layer .fr-form {
+  -webkit-opacity: 0;
+  -moz-opacity: 0;
+  opacity: 0;
+  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  z-index: 2147483640;
+  overflow: hidden;
+  margin: 0 !important;
+  padding: 0 !important;
+  width: 100% !important;
+}
+.fr-popup .fr-video-upload-layer .fr-form input {
+  cursor: pointer;
+  position: absolute;
+  right: 0px;
+  top: 0px;
+  bottom: 0px;
+  width: 500%;
+  height: 100%;
+  margin: 0px;
+  font-size: 400px;
+}
+.fr-popup .fr-video-progress-bar-layer > h3 {
+  font-size: 16px;
+  margin: 10px 0;
+  font-weight: normal;
+}
+.fr-popup .fr-video-progress-bar-layer > div.fr-action-buttons {
+  display: none;
+}
+.fr-popup .fr-video-progress-bar-layer > div.fr-loader {
+  background: #bcdbf7;
+  height: 10px;
+  width: 100%;
+  margin-top: 20px;
+  overflow: hidden;
+  position: relative;
+}
+.fr-popup .fr-video-progress-bar-layer > div.fr-loader span {
+  display: block;
+  height: 100%;
+  width: 0%;
+  background: #1e88e5;
+  -webkit-transition: width 0.2s ease 0s;
+  -moz-transition: width 0.2s ease 0s;
+  -ms-transition: width 0.2s ease 0s;
+  -o-transition: width 0.2s ease 0s;
+}
+.fr-popup .fr-video-progress-bar-layer > div.fr-loader.fr-indeterminate span {
+  width: 30% !important;
+  position: absolute;
+  top: 0;
+  -webkit-animation: loading 2s linear infinite;
+  -moz-animation: loading 2s linear infinite;
+  -o-animation: loading 2s linear infinite;
+  animation: loading 2s linear infinite;
+}
+.fr-popup .fr-video-progress-bar-layer.fr-error > div.fr-loader {
+  display: none;
+}
+.fr-popup .fr-video-progress-bar-layer.fr-error > div.fr-action-buttons {
+  display: block;
+}
+.fr-video-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: 0;
+  z-index: 2147483640;
+  display: none;
+}

Разница между файлами не показана из-за своего большого размера
+ 6 - 0
modules/boonex/froala/plugins/froala/css/froala_editor.pkgd.min.css


+ 406 - 0
modules/boonex/froala/plugins/froala/css/froala_style.css

@@ -0,0 +1,406 @@
+/*!
+ * froala_editor v2.7.5 (https://www.froala.com/wysiwyg-editor)
+ * License https://froala.com/wysiwyg-editor/terms/
+ * Copyright 2014-2018 Froala Labs
+ */
+
+.clearfix::after {
+  clear: both;
+  display: block;
+  content: "";
+  height: 0;
+}
+.hide-by-clipping {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  border: 0;
+}
+img.fr-rounded,
+.fr-img-caption.fr-rounded img {
+  border-radius: 10px;
+  -moz-border-radius: 10px;
+  -webkit-border-radius: 10px;
+  -moz-background-clip: padding;
+  -webkit-background-clip: padding-box;
+  background-clip: padding-box;
+}
+img.fr-bordered,
+.fr-img-caption.fr-bordered img {
+  border: solid 5px #CCC;
+}
+img.fr-bordered {
+  -webkit-box-sizing: content-box;
+  -moz-box-sizing: content-box;
+  box-sizing: content-box;
+}
+.fr-img-caption.fr-bordered img {
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+}
+img.fr-shadow,
+.fr-img-caption.fr-shadow img {
+  -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 1px 1px rgba(0, 0, 0, 0.16);
+  -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 1px 1px rgba(0, 0, 0, 0.16);
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 1px 1px rgba(0, 0, 0, 0.16);
+}
+.fr-view span[style~="color:"] a {
+  color: inherit;
+}
+.fr-view strong {
+  font-weight: 700;
+}
+.fr-view table {
+  border: none;
+  border-collapse: collapse;
+  empty-cells: show;
+  max-width: 100%;
+}
+.fr-view table.fr-dashed-borders td,
+.fr-view table.fr-dashed-borders th {
+  border-style: dashed;
+}
+.fr-view table.fr-alternate-rows tbody tr:nth-child(2n) {
+  background: #f5f5f5;
+}
+.fr-view table td,
+.fr-view table th {
+  border: 1px solid #dddddd;
+}
+.fr-view table td:empty,
+.fr-view table th:empty {
+  height: 20px;
+}
+.fr-view table td.fr-highlighted,
+.fr-view table th.fr-highlighted {
+  border: 1px double red;
+}
+.fr-view table td.fr-thick,
+.fr-view table th.fr-thick {
+  border-width: 2px;
+}
+.fr-view table th {
+  background: #e6e6e6;
+}
+.fr-view hr {
+  clear: both;
+  user-select: none;
+  -o-user-select: none;
+  -moz-user-select: none;
+  -khtml-user-select: none;
+  -webkit-user-select: none;
+  -ms-user-select: none;
+  page-break-after: always;
+}
+.fr-view .fr-file {
+  position: relative;
+}
+.fr-view .fr-file::after {
+  position: relative;
+  content: "\1F4CE";
+  font-weight: normal;
+}
+.fr-view pre {
+  white-space: pre-wrap;
+  word-wrap: break-word;
+}
+.fr-view[dir="rtl"] blockquote {
+  border-left: none;
+  border-right: solid 2px #5e35b1;
+  margin-right: 0;
+  padding-right: 5px;
+  padding-left: 0px;
+}
+.fr-view[dir="rtl"] blockquote blockquote {
+  border-color: #00bcd4;
+}
+.fr-view[dir="rtl"] blockquote blockquote blockquote {
+  border-color: #43a047;
+}
+.fr-view blockquote {
+  border-left: solid 2px #5e35b1;
+  margin-left: 0;
+  padding-left: 5px;
+  color: #5e35b1;
+}
+.fr-view blockquote blockquote {
+  border-color: #00bcd4;
+  color: #00bcd4;
+}
+.fr-view blockquote blockquote blockquote {
+  border-color: #43a047;
+  color: #43a047;
+}
+.fr-view span.fr-emoticon {
+  font-weight: normal;
+  font-family: "Apple Color Emoji", "Segoe UI Emoji", "NotoColorEmoji", "Segoe UI Symbol", "Android Emoji", "EmojiSymbols";
+  display: inline;
+  line-height: 0;
+}
+.fr-view span.fr-emoticon.fr-emoticon-img {
+  background-repeat: no-repeat !important;
+  font-size: inherit;
+  height: 1em;
+  width: 1em;
+  min-height: 20px;
+  min-width: 20px;
+  display: inline-block;
+  margin: -0.1em 0.1em 0.1em;
+  line-height: 1;
+  vertical-align: middle;
+}
+.fr-view .fr-text-gray {
+  color: #AAA !important;
+}
+.fr-view .fr-text-bordered {
+  border-top: solid 1px #222;
+  border-bottom: solid 1px #222;
+  padding: 10px 0;
+}
+.fr-view .fr-text-spaced {
+  letter-spacing: 1px;
+}
+.fr-view .fr-text-uppercase {
+  text-transform: uppercase;
+}
+.fr-view img {
+  position: relative;
+  max-width: 100%;
+}
+.fr-view img.fr-dib {
+  margin: 5px auto;
+  display: block;
+  float: none;
+  vertical-align: top;
+}
+.fr-view img.fr-dib.fr-fil {
+  margin-left: 0;
+  text-align: left;
+}
+.fr-view img.fr-dib.fr-fir {
+  margin-right: 0;
+  text-align: right;
+}
+.fr-view img.fr-dii {
+  display: inline-block;
+  float: none;
+  vertical-align: bottom;
+  margin-left: 5px;
+  margin-right: 5px;
+  max-width: calc(100% - (2 * 5px));
+}
+.fr-view img.fr-dii.fr-fil {
+  float: left;
+  margin: 5px 5px 5px 0;
+  max-width: calc(100% - 5px);
+}
+.fr-view img.fr-dii.fr-fir {
+  float: right;
+  margin: 5px 0 5px 5px;
+  max-width: calc(100% - 5px);
+}
+.fr-view span.fr-img-caption {
+  position: relative;
+  max-width: 100%;
+}
+.fr-view span.fr-img-caption.fr-dib {
+  margin: 5px auto;
+  display: block;
+  float: none;
+  vertical-align: top;
+}
+.fr-view span.fr-img-caption.fr-dib.fr-fil {
+  margin-left: 0;
+  text-align: left;
+}
+.fr-view span.fr-img-caption.fr-dib.fr-fir {
+  margin-right: 0;
+  text-align: right;
+}
+.fr-view span.fr-img-caption.fr-dii {
+  display: inline-block;
+  float: none;
+  vertical-align: bottom;
+  margin-left: 5px;
+  margin-right: 5px;
+  max-width: calc(100% - (2 * 5px));
+}
+.fr-view span.fr-img-caption.fr-dii.fr-fil {
+  float: left;
+  margin: 5px 5px 5px 0;
+  max-width: calc(100% - 5px);
+}
+.fr-view span.fr-img-caption.fr-dii.fr-fir {
+  float: right;
+  margin: 5px 0 5px 5px;
+  max-width: calc(100% - 5px);
+}
+.fr-view .fr-video {
+  text-align: center;
+  position: relative;
+}
+.fr-view .fr-video > * {
+  -webkit-box-sizing: content-box;
+  -moz-box-sizing: content-box;
+  box-sizing: content-box;
+  max-width: 100%;
+  border: none;
+}
+.fr-view .fr-video.fr-dvb {
+  display: block;
+  clear: both;
+}
+.fr-view .fr-video.fr-dvb.fr-fvl {
+  text-align: left;
+}
+.fr-view .fr-video.fr-dvb.fr-fvr {
+  text-align: right;
+}
+.fr-view .fr-video.fr-dvi {
+  display: inline-block;
+}
+.fr-view .fr-video.fr-dvi.fr-fvl {
+  float: left;
+}
+.fr-view .fr-video.fr-dvi.fr-fvr {
+  float: right;
+}
+.fr-view a.fr-strong {
+  font-weight: 700;
+}
+.fr-view a.fr-green {
+  color: green;
+}
+.fr-view .fr-img-caption {
+  text-align: center;
+}
+.fr-view .fr-img-caption .fr-img-wrap {
+  padding: 0px;
+  display: inline-block;
+  margin: auto;
+  text-align: center;
+}
+.fr-view .fr-img-caption .fr-img-wrap img {
+  display: block;
+  margin: auto;
+}
+.fr-view .fr-img-caption .fr-img-wrap > span {
+  margin: auto;
+  display: block;
+  padding: 5px 5px 10px;
+  font-size: 14px;
+  font-weight: initial;
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+  -webkit-opacity: 0.9;
+  -moz-opacity: 0.9;
+  opacity: 0.9;
+  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
+  width: 100%;
+  text-align: center;
+}
+.fr-view button.fr-rounded,
+.fr-view input.fr-rounded,
+.fr-view textarea.fr-rounded {
+  border-radius: 10px;
+  -moz-border-radius: 10px;
+  -webkit-border-radius: 10px;
+  -moz-background-clip: padding;
+  -webkit-background-clip: padding-box;
+  background-clip: padding-box;
+}
+.fr-view button.fr-large,
+.fr-view input.fr-large,
+.fr-view textarea.fr-large {
+  font-size: 24px;
+}
+/**
+ * Image style.
+ */
+a.fr-view.fr-strong {
+  font-weight: 700;
+}
+a.fr-view.fr-green {
+  color: green;
+}
+/**
+ * Link style.
+ */
+img.fr-view {
+  position: relative;
+  max-width: 100%;
+}
+img.fr-view.fr-dib {
+  margin: 5px auto;
+  display: block;
+  float: none;
+  vertical-align: top;
+}
+img.fr-view.fr-dib.fr-fil {
+  margin-left: 0;
+  text-align: left;
+}
+img.fr-view.fr-dib.fr-fir {
+  margin-right: 0;
+  text-align: right;
+}
+img.fr-view.fr-dii {
+  display: inline-block;
+  float: none;
+  vertical-align: bottom;
+  margin-left: 5px;
+  margin-right: 5px;
+  max-width: calc(100% - (2 * 5px));
+}
+img.fr-view.fr-dii.fr-fil {
+  float: left;
+  margin: 5px 5px 5px 0;
+  max-width: calc(100% - 5px);
+}
+img.fr-view.fr-dii.fr-fir {
+  float: right;
+  margin: 5px 0 5px 5px;
+  max-width: calc(100% - 5px);
+}
+span.fr-img-caption.fr-view {
+  position: relative;
+  max-width: 100%;
+}
+span.fr-img-caption.fr-view.fr-dib {
+  margin: 5px auto;
+  display: block;
+  float: none;
+  vertical-align: top;
+}
+span.fr-img-caption.fr-view.fr-dib.fr-fil {
+  margin-left: 0;
+  text-align: left;
+}
+span.fr-img-caption.fr-view.fr-dib.fr-fir {
+  margin-right: 0;
+  text-align: right;
+}
+span.fr-img-caption.fr-view.fr-dii {
+  display: inline-block;
+  float: none;
+  vertical-align: bottom;
+  margin-left: 5px;
+  margin-right: 5px;
+  max-width: calc(100% - (2 * 5px));
+}
+span.fr-img-caption.fr-view.fr-dii.fr-fil {
+  float: left;
+  margin: 5px 5px 5px 0;
+  max-width: calc(100% - 5px);
+}
+span.fr-img-caption.fr-view.fr-dii.fr-fir {
+  float: right;
+  margin: 5px 0 5px 5px;
+  max-width: calc(100% - 5px);
+}

Разница между файлами не показана из-за своего большого размера
+ 6 - 0
modules/boonex/froala/plugins/froala/css/froala_style.min.css


+ 57 - 0
modules/boonex/froala/plugins/froala/css/plugins/char_counter.css

@@ -0,0 +1,57 @@
+/*!
+ * froala_editor v2.7.5 (https://www.froala.com/wysiwyg-editor)
+ * License https://froala.com/wysiwyg-editor/terms/
+ * Copyright 2014-2018 Froala Labs
+ */
+
+.clearfix::after {
+  clear: both;
+  display: block;
+  content: "";
+  height: 0;
+}
+.hide-by-clipping {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  border: 0;
+}
+.fr-box .fr-counter {
+  position: absolute;
+  bottom: 0px;
+  padding: 5px;
+  right: 0px;
+  color: #cccccc;
+  content: attr(data-chars);
+  font-size: 15px;
+  font-family: "Times New Roman", Georgia, Serif;
+  z-index: 1;
+  background: #ffffff;
+  border-top: solid 1px #ebebeb;
+  border-left: solid 1px #ebebeb;
+  border-radius: 2px 0 0 0;
+  -moz-border-radius: 2px 0 0 0;
+  -webkit-border-radius: 2px 0 0 0;
+  -moz-background-clip: padding;
+  -webkit-background-clip: padding-box;
+  background-clip: padding-box;
+}
+.fr-box.fr-rtl .fr-counter {
+  left: 0px;
+  right: auto;
+  border-left: none;
+  border-right: solid 1px #ebebeb;
+  border-radius: 0 2px 0 0;
+  -moz-border-radius: 0 2px 0 0;
+  -webkit-border-radius: 0 2px 0 0;
+  -moz-background-clip: padding;
+  -webkit-background-clip: padding-box;
+  background-clip: padding-box;
+}
+.fr-box.fr-code-view .fr-counter {
+  display: none;
+}

+ 7 - 0
modules/boonex/froala/plugins/froala/css/plugins/char_counter.min.css

@@ -0,0 +1,7 @@
+/*!
+ * froala_editor v2.7.5 (https://www.froala.com/wysiwyg-editor)
+ * License https://froala.com/wysiwyg-editor/terms/
+ * Copyright 2014-2018 Froala Labs
+ */
+
+.clearfix::after{clear:both;display:block;content:"";height:0}.hide-by-clipping{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}.fr-box .fr-counter{position:absolute;bottom:0;padding:5px;right:0;color:#ccc;content:attr(data-chars);font-size:15px;font-family:"Times New Roman",Georgia,Serif;z-index:1;background:#fff;border-top:solid 1px #ebebeb;border-left:solid 1px #ebebeb;border-radius:2px 0 0;-moz-border-radius:2px 0 0;-webkit-border-radius:2px 0 0;-moz-background-clip:padding;-webkit-background-clip:padding-box;background-clip:padding-box}.fr-box.fr-rtl .fr-counter{left:0;right:auto;border-left:0;border-right:solid 1px #ebebeb;border-radius:0 2px 0 0;-moz-border-radius:0 2px 0 0;-webkit-border-radius:0 2px 0 0;-moz-background-clip:padding;-webkit-background-clip:padding-box;background-clip:padding-box}.fr-box.fr-code-view .fr-counter{display:none}

+ 112 - 0
modules/boonex/froala/plugins/froala/css/plugins/code_view.css

@@ -0,0 +1,112 @@
+/*!
+ * froala_editor v2.7.5 (https://www.froala.com/wysiwyg-editor)
+ * License https://froala.com/wysiwyg-editor/terms/
+ * Copyright 2014-2018 Froala Labs
+ */
+
+.clearfix::after {
+  clear: both;
+  display: block;
+  content: "";
+  height: 0;
+}
+.hide-by-clipping {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  border: 0;
+}
+textarea.fr-code {
+  display: none;
+  width: 100%;
+  resize: none;
+  -moz-resize: none;
+  -webkit-resize: none;
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+  border: none;
+  padding: 10px;
+  margin: 0px;
+  font-family: "Courier New", monospace;
+  font-size: 14px;
+  background: #ffffff;
+  color: #000000;
+  outline: none;
+}
+.fr-box.fr-rtl textarea.fr-code {
+  direction: rtl;
+}
+.fr-box .CodeMirror {
+  display: none;
+}
+.fr-box.fr-code-view textarea.fr-code {
+  display: block;
+}
+.fr-box.fr-code-view.fr-inline {
+  -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 1px 1px rgba(0, 0, 0, 0.16);
+  -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 1px 1px rgba(0, 0, 0, 0.16);
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 1px 1px rgba(0, 0, 0, 0.16);
+}
+.fr-box.fr-code-view .fr-element,
+.fr-box.fr-code-view .fr-placeholder,
+.fr-box.fr-code-view .fr-iframe {
+  display: none;
+}
+.fr-box.fr-code-view .CodeMirror {
+  display: block;
+}
+.fr-box.fr-inline.fr-code-view .fr-command.fr-btn.html-switch {
+  display: block;
+}
+.fr-box.fr-inline .fr-command.fr-btn.html-switch {
+  position: absolute;
+  top: 0;
+  right: 0;
+  -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 1px 1px rgba(0, 0, 0, 0.16);
+  -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 1px 1px rgba(0, 0, 0, 0.16);
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 1px 1px rgba(0, 0, 0, 0.16);
+  display: none;
+  background: #ffffff;
+  color: #222222;
+  -moz-outline: 0;
+  outline: 0;
+  border: 0;
+  line-height: 1;
+  cursor: pointer;
+  text-align: left;
+  padding: 12px 12px;
+  -webkit-transition: background 0.2s ease 0s;
+  -moz-transition: background 0.2s ease 0s;
+  -ms-transition: background 0.2s ease 0s;
+  -o-transition: background 0.2s ease 0s;
+  border-radius: 0;
+  -moz-border-radius: 0;
+  -webkit-border-radius: 0;
+  -moz-background-clip: padding;
+  -webkit-background-clip: padding-box;
+  background-clip: padding-box;
+  z-index: 2;
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+  text-decoration: none;
+  user-select: none;
+  -o-user-select: none;
+  -moz-user-select: none;
+  -khtml-user-select: none;
+  -webkit-user-select: none;
+  -ms-user-select: none;
+}
+.fr-box.fr-inline .fr-command.fr-btn.html-switch i {
+  font-size: 14px;
+  width: 14px;
+  text-align: center;
+}
+.fr-box.fr-inline .fr-command.fr-btn.html-switch.fr-desktop:hover {
+  background: #ebebeb;
+}

Разница между файлами не показана из-за своего большого размера
+ 6 - 0
modules/boonex/froala/plugins/froala/css/plugins/code_view.min.css


+ 155 - 0
modules/boonex/froala/plugins/froala/css/plugins/colors.css

@@ -0,0 +1,155 @@
+/*!
+ * froala_editor v2.7.5 (https://www.froala.com/wysiwyg-editor)
+ * License https://froala.com/wysiwyg-editor/terms/
+ * Copyright 2014-2018 Froala Labs
+ */
+
+.clearfix::after {
+  clear: both;
+  display: block;
+  content: "";
+  height: 0;
+}
+.hide-by-clipping {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  border: 0;
+}
+.fr-popup .fr-colors-tabs {
+  -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 1px 1px rgba(0, 0, 0, 0.16);
+  -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 1px 1px rgba(0, 0, 0, 0.16);
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 1px 1px rgba(0, 0, 0, 0.16);
+  margin-bottom: 5px;
+  line-height: 16px;
+  margin-left: -2px;
+  margin-right: -2px;
+}
+.fr-popup .fr-colors-tabs .fr-colors-tab {
+  display: inline-block;
+  width: 50%;
+  cursor: pointer;
+  text-align: center;
+  color: #222222;
+  font-size: 13px;
+  padding: 8px 0;
+  position: relative;
+}
+.fr-popup .fr-colors-tabs .fr-colors-tab:hover,
+.fr-popup .fr-colors-tabs .fr-colors-tab:focus {
+  color: #1e88e5;
+}
+.fr-popup .fr-colors-tabs .fr-colors-tab[data-param1="background"]::after {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  height: 2px;
+  background: #1e88e5;
+  content: '';
+  -webkit-transition: transform 0.2s ease 0s;
+  -moz-transition: transform 0.2s ease 0s;
+  -ms-transition: transform 0.2s ease 0s;
+  -o-transition: transform 0.2s ease 0s;
+}
+.fr-popup .fr-colors-tabs .fr-colors-tab.fr-selected-tab {
+  color: #1e88e5;
+}
+.fr-popup .fr-colors-tabs .fr-colors-tab.fr-selected-tab[data-param1="text"] ~ [data-param1="background"]::after {
+  -webkit-transform: translate3d(-100%, 0, 0);
+  -moz-transform: translate3d(-100%, 0, 0);
+  -ms-transform: translate3d(-100%, 0, 0);
+  -o-transform: translate3d(-100%, 0, 0);
+}
+.fr-popup .fr-color-hex-layer {
+  width: 100%;
+  margin: 0px;
+  padding: 10px;
+}
+.fr-popup .fr-color-hex-layer .fr-input-line {
+  float: left;
+  width: calc(100% - 50px);
+  padding: 8px 0 0;
+}
+.fr-popup .fr-color-hex-layer .fr-action-buttons {
+  float: right;
+  width: 50px;
+}
+.fr-popup .fr-color-hex-layer .fr-action-buttons button {
+  background-color: #1e88e5;
+  color: #FFF;
+  border-radius: 2px;
+  -moz-border-radius: 2px;
+  -webkit-border-radius: 2px;
+  -moz-background-clip: padding;
+  -webkit-background-clip: padding-box;
+  background-clip: padding-box;
+  font-size: 13px;
+  height: 32px;
+}
+.fr-popup .fr-color-hex-layer .fr-action-buttons button:hover {
+  background-color: #166dba;
+  color: #FFF;
+}
+.fr-popup .fr-separator + .fr-colors-tabs {
+  -webkit-box-shadow: none;
+  -moz-box-shadow: none;
+  box-shadow: none;
+  margin-left: 2px;
+  margin-right: 2px;
+}
+.fr-popup .fr-color-set {
+  line-height: 0;
+  display: none;
+}
+.fr-popup .fr-color-set.fr-selected-set {
+  display: block;
+}
+.fr-popup .fr-color-set > span {
+  display: inline-block;
+  width: 32px;
+  height: 32px;
+  position: relative;
+  z-index: 1;
+}
+.fr-popup .fr-color-set > span > i,
+.fr-popup .fr-color-set > span > svg {
+  text-align: center;
+  line-height: 32px;
+  height: 32px;
+  width: 32px;
+  font-size: 13px;
+  position: absolute;
+  bottom: 0;
+  cursor: default;
+  left: 0;
+}
+.fr-popup .fr-color-set > span .fr-selected-color {
+  color: #ffffff;
+  font-family: FontAwesome;
+  font-size: 13px;
+  font-weight: 400;
+  line-height: 32px;
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  right: 0;
+  left: 0;
+  text-align: center;
+  cursor: default;
+}
+.fr-popup .fr-color-set > span:hover,
+.fr-popup .fr-color-set > span:focus {
+  outline: 1px solid #222222;
+  z-index: 2;
+}
+.fr-rtl .fr-popup .fr-colors-tabs .fr-colors-tab.fr-selected-tab[data-param1="text"] ~ [data-param1="background"]::after {
+  -webkit-transform: translate3d(100%, 0, 0);
+  -moz-transform: translate3d(100%, 0, 0);
+  -ms-transform: translate3d(100%, 0, 0);
+  -o-transform: translate3d(100%, 0, 0);
+}

Разница между файлами не показана из-за своего большого размера
+ 6 - 0
modules/boonex/froala/plugins/froala/css/plugins/colors.min.css


+ 43 - 0
modules/boonex/froala/plugins/froala/css/plugins/draggable.css

@@ -0,0 +1,43 @@
+/*!
+ * froala_editor v2.7.5 (https://www.froala.com/wysiwyg-editor)
+ * License https://froala.com/wysiwyg-editor/terms/
+ * Copyright 2014-2018 Froala Labs
+ */
+
+.clearfix::after {
+  clear: both;
+  display: block;
+  content: "";
+  height: 0;
+}
+.hide-by-clipping {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  border: 0;
+}
+.fr-drag-helper {
+  background: #1e88e5;
+  height: 2px;
+  margin-top: -1px;
+  -webkit-opacity: 0.2;
+  -moz-opacity: 0.2;
+  opacity: 0.2;
+  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
+  position: absolute;
+  z-index: 2147483640;
+  display: none;
+}
+.fr-drag-helper.fr-visible {
+  display: block;
+}
+.fr-dragging {
+  -webkit-opacity: 0.4;
+  -moz-opacity: 0.4;
+  opacity: 0.4;
+  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
+}

+ 7 - 0
modules/boonex/froala/plugins/froala/css/plugins/draggable.min.css

@@ -0,0 +1,7 @@
+/*!
+ * froala_editor v2.7.5 (https://www.froala.com/wysiwyg-editor)
+ * License https://froala.com/wysiwyg-editor/terms/
+ * Copyright 2014-2018 Froala Labs
+ */
+
+.clearfix::after{clear:both;display:block;content:"";height:0}.hide-by-clipping{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}.fr-drag-helper{background:#1e88e5;height:2px;margin-top:-1px;-webkit-opacity:.2;-moz-opacity:.2;opacity:.2;-ms-filter:"alpha(Opacity=0)";position:absolute;z-index:2147483640;display:none}.fr-drag-helper.fr-visible{display:block}.fr-dragging{-webkit-opacity:.4;-moz-opacity:.4;opacity:.4;-ms-filter:"alpha(Opacity=0)"}

+ 42 - 0
modules/boonex/froala/plugins/froala/css/plugins/emoticons.css

@@ -0,0 +1,42 @@
+/*!
+ * froala_editor v2.7.5 (https://www.froala.com/wysiwyg-editor)
+ * License https://froala.com/wysiwyg-editor/terms/
+ * Copyright 2014-2018 Froala Labs
+ */
+
+.clearfix::after {
+  clear: both;
+  display: block;
+  content: "";
+  height: 0;
+}
+.hide-by-clipping {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  border: 0;
+}
+.fr-popup .fr-emoticon {
+  display: inline-block;
+  font-size: 20px;
+  width: 20px;
+  padding: 5px;
+  line-height: 1;
+  cursor: default;
+  font-weight: normal;
+  font-family: "Apple Color Emoji", "Segoe UI Emoji", "NotoColorEmoji", "Segoe UI Symbol", "Android Emoji", "EmojiSymbols";
+  -webkit-box-sizing: content-box;
+  -moz-box-sizing: content-box;
+  box-sizing: content-box;
+}
+.fr-popup .fr-emoticon img {
+  height: 20px;
+}
+.fr-popup .fr-link:focus {
+  outline: 0;
+  background: #ebebeb;
+}

+ 7 - 0
modules/boonex/froala/plugins/froala/css/plugins/emoticons.min.css

@@ -0,0 +1,7 @@
+/*!
+ * froala_editor v2.7.5 (https://www.froala.com/wysiwyg-editor)
+ * License https://froala.com/wysiwyg-editor/terms/
+ * Copyright 2014-2018 Froala Labs
+ */
+
+.clearfix::after{clear:both;display:block;content:"";height:0}.hide-by-clipping{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}.fr-popup .fr-emoticon{display:inline-block;font-size:20px;width:20px;padding:5px;line-height:1;cursor:default;font-weight:400;font-family:"Apple Color Emoji","Segoe UI Emoji",NotoColorEmoji,"Segoe UI Symbol","Android Emoji",EmojiSymbols;-webkit-box-sizing:content-box;-moz-box-sizing:content-box;box-sizing:content-box}.fr-popup .fr-emoticon img{height:20px}.fr-popup .fr-link:focus{outline:0;background:#ebebeb}

+ 146 - 0
modules/boonex/froala/plugins/froala/css/plugins/file.css

@@ -0,0 +1,146 @@
+/*!
+ * froala_editor v2.7.5 (https://www.froala.com/wysiwyg-editor)
+ * License https://froala.com/wysiwyg-editor/terms/
+ * Copyright 2014-2018 Froala Labs
+ */
+
+.clearfix::after {
+  clear: both;
+  display: block;
+  content: "";
+  height: 0;
+}
+.hide-by-clipping {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  border: 0;
+}
+.fr-popup .fr-file-upload-layer {
+  border: dashed 2px #bdbdbd;
+  padding: 25px 0;
+  position: relative;
+  font-size: 14px;
+  letter-spacing: 1px;
+  line-height: 140%;
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+  text-align: center;
+}
+.fr-popup .fr-file-upload-layer:hover {
+  background: #ebebeb;
+}
+.fr-popup .fr-file-upload-layer.fr-drop {
+  background: #ebebeb;
+  border-color: #1e88e5;
+}
+.fr-popup .fr-file-upload-layer .fr-form {
+  -webkit-opacity: 0;
+  -moz-opacity: 0;
+  opacity: 0;
+  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  z-index: 2147483640;
+  overflow: hidden;
+  margin: 0 !important;
+  padding: 0 !important;
+  width: 100% !important;
+}
+.fr-popup .fr-file-upload-layer .fr-form input {
+  cursor: pointer;
+  position: absolute;
+  right: 0px;
+  top: 0px;
+  bottom: 0px;
+  width: 500%;
+  height: 100%;
+  margin: 0px;
+  font-size: 400px;
+}
+.fr-popup .fr-file-progress-bar-layer {
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+}
+.fr-popup .fr-file-progress-bar-layer > h3 {
+  font-size: 16px;
+  margin: 10px 0;
+  font-weight: normal;
+}
+.fr-popup .fr-file-progress-bar-layer > div.fr-action-buttons {
+  display: none;
+}
+.fr-popup .fr-file-progress-bar-layer > div.fr-loader {
+  background: #bcdbf7;
+  height: 10px;
+  width: 100%;
+  margin-top: 20px;
+  overflow: hidden;
+  position: relative;
+}
+.fr-popup .fr-file-progress-bar-layer > div.fr-loader span {
+  display: block;
+  height: 100%;
+  width: 0%;
+  background: #1e88e5;
+  -webkit-transition: width 0.2s ease 0s;
+  -moz-transition: width 0.2s ease 0s;
+  -ms-transition: width 0.2s ease 0s;
+  -o-transition: width 0.2s ease 0s;
+}
+.fr-popup .fr-file-progress-bar-layer > div.fr-loader.fr-indeterminate span {
+  width: 30% !important;
+  position: absolute;
+  top: 0;
+  -webkit-animation: loading 2s linear infinite;
+  -moz-animation: loading 2s linear infinite;
+  -o-animation: loading 2s linear infinite;
+  animation: loading 2s linear infinite;
+}
+.fr-popup .fr-file-progress-bar-layer.fr-error > div.fr-loader {
+  display: none;
+}
+.fr-popup .fr-file-progress-bar-layer.fr-error > div.fr-action-buttons {
+  display: block;
+}
+@keyframes loading {
+  from {
+    left: -25%;
+  }
+  to {
+    left: 100%;
+  }
+}
+@-webkit-keyframes loading {
+  from {
+    left: -25%;
+  }
+  to {
+    left: 100%;
+  }
+}
+@-moz-keyframes loading {
+  from {
+    left: -25%;
+  }
+  to {
+    left: 100%;
+  }
+}
+@-o-keyframes loading {
+  from {
+    left: -25%;
+  }
+  to {
+    left: 100%;
+  }
+}

Разница между файлами не показана из-за своего большого размера
+ 6 - 0
modules/boonex/froala/plugins/froala/css/plugins/file.min.css


+ 28 - 0
modules/boonex/froala/plugins/froala/css/plugins/fullscreen.css

@@ -0,0 +1,28 @@
+/*!
+ * froala_editor v2.7.5 (https://www.froala.com/wysiwyg-editor)
+ * License https://froala.com/wysiwyg-editor/terms/
+ * Copyright 2014-2018 Froala Labs
+ */
+
+body.fr-fullscreen {
+  overflow: hidden;
+  height: 100%;
+  width: 100%;
+  position: fixed;
+}
+.fr-box.fr-fullscreen {
+  margin: 0 !important;
+  position: fixed;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: 0;
+  z-index: 2147483630 !important;
+  width: auto !important;
+}
+.fr-box.fr-fullscreen .fr-toolbar.fr-top {
+  top: 0 !important;
+}
+.fr-box.fr-fullscreen .fr-toolbar.fr-bottom {
+  bottom: 0 !important;
+}

+ 7 - 0
modules/boonex/froala/plugins/froala/css/plugins/fullscreen.min.css

@@ -0,0 +1,7 @@
+/*!
+ * froala_editor v2.7.5 (https://www.froala.com/wysiwyg-editor)
+ * License https://froala.com/wysiwyg-editor/terms/
+ * Copyright 2014-2018 Froala Labs
+ */
+
+body.fr-fullscreen{overflow:hidden;height:100%;width:100%;position:fixed}.fr-box.fr-fullscreen{margin:0!important;position:fixed;top:0;left:0;bottom:0;right:0;z-index:2147483630!important;width:auto!important}.fr-box.fr-fullscreen .fr-toolbar.fr-top{top:0!important}.fr-box.fr-fullscreen .fr-toolbar.fr-bottom{bottom:0!important}

+ 52 - 0
modules/boonex/froala/plugins/froala/css/plugins/help.css

@@ -0,0 +1,52 @@
+/*!
+ * froala_editor v2.7.5 (https://www.froala.com/wysiwyg-editor)
+ * License https://froala.com/wysiwyg-editor/terms/
+ * Copyright 2014-2018 Froala Labs
+ */
+
+.clearfix::after {
+  clear: both;
+  display: block;
+  content: "";
+  height: 0;
+}
+.hide-by-clipping {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  border: 0;
+}
+.fr-modal .fr-modal-wrapper .fr-modal-body .fr-help-modal {
+  text-align: left;
+  padding: 20px 20px 10px;
+}
+.fr-modal .fr-modal-wrapper .fr-modal-body .fr-help-modal table {
+  border-collapse: collapse;
+  font-size: 14px;
+  line-height: 1.5;
+  width: 100%;
+}
+.fr-modal .fr-modal-wrapper .fr-modal-body .fr-help-modal table + table {
+  margin-top: 20px;
+}
+.fr-modal .fr-modal-wrapper .fr-modal-body .fr-help-modal table tr {
+  border: 0;
+}
+.fr-modal .fr-modal-wrapper .fr-modal-body .fr-help-modal table th,
+.fr-modal .fr-modal-wrapper .fr-modal-body .fr-help-modal table td {
+  padding: 6px 0 4px;
+}
+.fr-modal .fr-modal-wrapper .fr-modal-body .fr-help-modal table tbody tr {
+  border-bottom: solid 1px #ebebeb;
+}
+.fr-modal .fr-modal-wrapper .fr-modal-body .fr-help-modal table tbody td:first-child {
+  width: 60%;
+  color: #646464;
+}
+.fr-modal .fr-modal-wrapper .fr-modal-body .fr-help-modal table tbody td:nth-child(n+2) {
+  letter-spacing: 0.5px;
+}

+ 7 - 0
modules/boonex/froala/plugins/froala/css/plugins/help.min.css

@@ -0,0 +1,7 @@
+/*!
+ * froala_editor v2.7.5 (https://www.froala.com/wysiwyg-editor)
+ * License https://froala.com/wysiwyg-editor/terms/
+ * Copyright 2014-2018 Froala Labs
+ */
+
+.clearfix::after{clear:both;display:block;content:"";height:0}.hide-by-clipping{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}.fr-modal .fr-modal-wrapper .fr-modal-body .fr-help-modal{text-align:left;padding:20px 20px 10px}.fr-modal .fr-modal-wrapper .fr-modal-body .fr-help-modal table{border-collapse:collapse;font-size:14px;line-height:1.5;width:100%}.fr-modal .fr-modal-wrapper .fr-modal-body .fr-help-modal table+table{margin-top:20px}.fr-modal .fr-modal-wrapper .fr-modal-body .fr-help-modal table tr{border:0}.fr-modal .fr-modal-wrapper .fr-modal-body .fr-help-modal table th,.fr-modal .fr-modal-wrapper .fr-modal-body .fr-help-modal table td{padding:6px 0 4px}.fr-modal .fr-modal-wrapper .fr-modal-body .fr-help-modal table tbody tr{border-bottom:solid 1px #ebebeb}.fr-modal .fr-modal-wrapper .fr-modal-body .fr-help-modal table tbody td:first-child{width:60%;color:#646464}.fr-modal .fr-modal-wrapper .fr-modal-body .fr-help-modal table tbody td:nth-child(n+2){letter-spacing:.5px}

+ 244 - 0
modules/boonex/froala/plugins/froala/css/plugins/image.css

@@ -0,0 +1,244 @@
+/*!
+ * froala_editor v2.7.5 (https://www.froala.com/wysiwyg-editor)
+ * License https://froala.com/wysiwyg-editor/terms/
+ * Copyright 2014-2018 Froala Labs
+ */
+
+.clearfix::after {
+  clear: both;
+  display: block;
+  content: "";
+  height: 0;
+}
+.hide-by-clipping {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  border: 0;
+}
+.fr-element img {
+  cursor: pointer;
+}
+.fr-image-resizer {
+  position: absolute;
+  border: solid 1px #1e88e5;
+  display: none;
+  user-select: none;
+  -o-user-select: none;
+  -moz-user-select: none;
+  -khtml-user-select: none;
+  -webkit-user-select: none;
+  -ms-user-select: none;
+  -webkit-box-sizing: content-box;
+  -moz-box-sizing: content-box;
+  box-sizing: content-box;
+}
+.fr-image-resizer.fr-active {
+  display: block;
+}
+.fr-image-resizer .fr-handler {
+  display: block;
+  position: absolute;
+  background: #1e88e5;
+  border: solid 1px #ffffff;
+  z-index: 4;
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+}
+.fr-image-resizer .fr-handler.fr-hnw {
+  cursor: nw-resize;
+}
+.fr-image-resizer .fr-handler.fr-hne {
+  cursor: ne-resize;
+}
+.fr-image-resizer .fr-handler.fr-hsw {
+  cursor: sw-resize;
+}
+.fr-image-resizer .fr-handler.fr-hse {
+  cursor: se-resize;
+}
+.fr-image-resizer .fr-handler {
+  width: 12px;
+  height: 12px;
+}
+.fr-image-resizer .fr-handler.fr-hnw {
+  left: -6px;
+  top: -6px;
+}
+.fr-image-resizer .fr-handler.fr-hne {
+  right: -6px;
+  top: -6px;
+}
+.fr-image-resizer .fr-handler.fr-hsw {
+  left: -6px;
+  bottom: -6px;
+}
+.fr-image-resizer .fr-handler.fr-hse {
+  right: -6px;
+  bottom: -6px;
+}
+@media (min-width: 1200px) {
+  .fr-image-resizer .fr-handler {
+    width: 10px;
+    height: 10px;
+  }
+  .fr-image-resizer .fr-handler.fr-hnw {
+    left: -5px;
+    top: -5px;
+  }
+  .fr-image-resizer .fr-handler.fr-hne {
+    right: -5px;
+    top: -5px;
+  }
+  .fr-image-resizer .fr-handler.fr-hsw {
+    left: -5px;
+    bottom: -5px;
+  }
+  .fr-image-resizer .fr-handler.fr-hse {
+    right: -5px;
+    bottom: -5px;
+  }
+}
+.fr-image-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: 0;
+  z-index: 2147483640;
+  display: none;
+}
+.fr-popup .fr-image-upload-layer {
+  border: dashed 2px #bdbdbd;
+  padding: 25px 0;
+  position: relative;
+  font-size: 14px;
+  letter-spacing: 1px;
+  line-height: 140%;
+  text-align: center;
+}
+.fr-popup .fr-image-upload-layer:hover {
+  background: #ebebeb;
+}
+.fr-popup .fr-image-upload-layer.fr-drop {
+  background: #ebebeb;
+  border-color: #1e88e5;
+}
+.fr-popup .fr-image-upload-layer .fr-form {
+  -webkit-opacity: 0;
+  -moz-opacity: 0;
+  opacity: 0;
+  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  z-index: 2147483640;
+  overflow: hidden;
+  margin: 0 !important;
+  padding: 0 !important;
+  width: 100% !important;
+}
+.fr-popup .fr-image-upload-layer .fr-form input {
+  cursor: pointer;
+  position: absolute;
+  right: 0px;
+  top: 0px;
+  bottom: 0px;
+  width: 500%;
+  height: 100%;
+  margin: 0px;
+  font-size: 400px;
+}
+.fr-popup .fr-image-progress-bar-layer > h3 {
+  font-size: 16px;
+  margin: 10px 0;
+  font-weight: normal;
+}
+.fr-popup .fr-image-progress-bar-layer > div.fr-action-buttons {
+  display: none;
+}
+.fr-popup .fr-image-progress-bar-layer > div.fr-loader {
+  background: #bcdbf7;
+  height: 10px;
+  width: 100%;
+  margin-top: 20px;
+  overflow: hidden;
+  position: relative;
+}
+.fr-popup .fr-image-progress-bar-layer > div.fr-loader span {
+  display: block;
+  height: 100%;
+  width: 0%;
+  background: #1e88e5;
+  -webkit-transition: width 0.2s ease 0s;
+  -moz-transition: width 0.2s ease 0s;
+  -ms-transition: width 0.2s ease 0s;
+  -o-transition: width 0.2s ease 0s;
+}
+.fr-popup .fr-image-progress-bar-layer > div.fr-loader.fr-indeterminate span {
+  width: 30% !important;
+  position: absolute;
+  top: 0;
+  -webkit-animation: loading 2s linear infinite;
+  -moz-animation: loading 2s linear infinite;
+  -o-animation: loading 2s linear infinite;
+  animation: loading 2s linear infinite;
+}
+.fr-popup .fr-image-progress-bar-layer.fr-error > div.fr-loader {
+  display: none;
+}
+.fr-popup .fr-image-progress-bar-layer.fr-error > div.fr-action-buttons {
+  display: block;
+}
+.fr-image-size-layer .fr-image-group .fr-input-line {
+  width: calc(50% - 5px);
+  display: inline-block;
+}
+.fr-image-size-layer .fr-image-group .fr-input-line + .fr-input-line {
+  margin-left: 10px;
+}
+.fr-uploading {
+  -webkit-opacity: 0.4;
+  -moz-opacity: 0.4;
+  opacity: 0.4;
+  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
+}
+@keyframes loading {
+  from {
+    left: -25%;
+  }
+  to {
+    left: 100%;
+  }
+}
+@-webkit-keyframes loading {
+  from {
+    left: -25%;
+  }
+  to {
+    left: 100%;
+  }
+}
+@-moz-keyframes loading {
+  from {
+    left: -25%;
+  }
+  to {
+    left: 100%;
+  }
+}
+@-o-keyframes loading {
+  from {
+    left: -25%;
+  }
+  to {
+    left: 100%;
+  }
+}

Разница между файлами не показана из-за своего большого размера
+ 6 - 0
modules/boonex/froala/plugins/froala/css/plugins/image.min.css


+ 265 - 0
modules/boonex/froala/plugins/froala/css/plugins/image_manager.css

@@ -0,0 +1,265 @@
+/*!
+ * froala_editor v2.7.5 (https://www.froala.com/wysiwyg-editor)
+ * License https://froala.com/wysiwyg-editor/terms/
+ * Copyright 2014-2018 Froala Labs
+ */
+
+.clearfix::after {
+  clear: both;
+  display: block;
+  content: "";
+  height: 0;
+}
+.hide-by-clipping {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  border: 0;
+}
+.fr-modal-head .fr-modal-head-line::after {
+  clear: both;
+  display: block;
+  content: "";
+  height: 0;
+}
+.fr-modal-head .fr-modal-head-line i.fr-modal-more {
+  float: left;
+  opacity: 1;
+  -webkit-transition: padding 0.2s ease 0s, width 0.2s ease 0s, opacity 0.2s ease 0s;
+  -moz-transition: padding 0.2s ease 0s, width 0.2s ease 0s, opacity 0.2s ease 0s;
+  -ms-transition: padding 0.2s ease 0s, width 0.2s ease 0s, opacity 0.2s ease 0s;
+  -o-transition: padding 0.2s ease 0s, width 0.2s ease 0s, opacity 0.2s ease 0s;
+}
+.fr-modal-head .fr-modal-head-line i.fr-modal-more.fr-not-available {
+  opacity: 0;
+  width: 0;
+  padding: 12px 0;
+}
+.fr-modal-head .fr-modal-tags {
+  display: none;
+  text-align: left;
+}
+.fr-modal-head .fr-modal-tags a {
+  display: inline-block;
+  opacity: 0;
+  padding: 6px 8px;
+  margin: 8px 0 8px 8px;
+  text-decoration: none;
+  border-radius: 2px;
+  -moz-border-radius: 2px;
+  -webkit-border-radius: 2px;
+  -moz-background-clip: padding;
+  -webkit-background-clip: padding-box;
+  background-clip: padding-box;
+  color: #1e88e5;
+  -webkit-transition: opacity 0.2s ease 0s, background 0.2s ease 0s;
+  -moz-transition: opacity 0.2s ease 0s, background 0.2s ease 0s;
+  -ms-transition: opacity 0.2s ease 0s, background 0.2s ease 0s;
+  -o-transition: opacity 0.2s ease 0s, background 0.2s ease 0s;
+  cursor: pointer;
+}
+.fr-modal-head .fr-modal-tags a:focus {
+  outline: none;
+}
+.fr-modal-head .fr-modal-tags a.fr-selected-tag {
+  background: #d6d6d6;
+}
+div.fr-modal-body .fr-preloader {
+  display: block;
+  margin: 50px auto;
+}
+div.fr-modal-body div.fr-image-list {
+  text-align: center;
+  margin: 0 10px;
+  padding: 0;
+}
+div.fr-modal-body div.fr-image-list::after {
+  clear: both;
+  display: block;
+  content: "";
+  height: 0;
+}
+div.fr-modal-body div.fr-image-list .fr-list-column {
+  float: left;
+  width: calc((100% - 10px) / 2);
+}
+@media (min-width: 768px) and (max-width: 1199px) {
+  div.fr-modal-body div.fr-image-list .fr-list-column {
+    width: calc((100% - 20px) / 3);
+  }
+}
+@media (min-width: 1200px) {
+  div.fr-modal-body div.fr-image-list .fr-list-column {
+    width: calc((100% - 30px) / 4);
+  }
+}
+div.fr-modal-body div.fr-image-list .fr-list-column + .fr-list-column {
+  margin-left: 10px;
+}
+div.fr-modal-body div.fr-image-list div.fr-image-container {
+  position: relative;
+  width: 100%;
+  display: block;
+  -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 1px 1px rgba(0, 0, 0, 0.16);
+  -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 1px 1px rgba(0, 0, 0, 0.16);
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 1px 1px rgba(0, 0, 0, 0.16);
+  border-radius: 2px;
+  -moz-border-radius: 2px;
+  -webkit-border-radius: 2px;
+  -moz-background-clip: padding;
+  -webkit-background-clip: padding-box;
+  background-clip: padding-box;
+  overflow: hidden;
+}
+div.fr-modal-body div.fr-image-list div.fr-image-container:first-child {
+  margin-top: 10px;
+}
+div.fr-modal-body div.fr-image-list div.fr-image-container + div {
+  margin-top: 10px;
+}
+div.fr-modal-body div.fr-image-list div.fr-image-container.fr-image-deleting::after {
+  position: absolute;
+  -webkit-opacity: 0.5;
+  -moz-opacity: 0.5;
+  opacity: 0.5;
+  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
+  -webkit-transition: opacity 0.2s ease 0s;
+  -moz-transition: opacity 0.2s ease 0s;
+  -ms-transition: opacity 0.2s ease 0s;
+  -o-transition: opacity 0.2s ease 0s;
+  background: #000000;
+  content: "";
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: 0;
+  z-index: 2;
+}
+div.fr-modal-body div.fr-image-list div.fr-image-container.fr-image-deleting::before {
+  content: attr(data-deleting);
+  color: #ffffff;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: 0;
+  margin: auto;
+  position: absolute;
+  z-index: 3;
+  font-size: 15px;
+  height: 20px;
+}
+div.fr-modal-body div.fr-image-list div.fr-image-container.fr-empty {
+  height: 95px;
+  background: #cccccc;
+  z-index: 1;
+}
+div.fr-modal-body div.fr-image-list div.fr-image-container.fr-empty::after {
+  position: absolute;
+  margin: auto;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  content: attr(data-loading);
+  display: inline-block;
+  height: 20px;
+}
+div.fr-modal-body div.fr-image-list div.fr-image-container img {
+  width: 100%;
+  vertical-align: middle;
+  position: relative;
+  z-index: 2;
+  -webkit-opacity: 1;
+  -moz-opacity: 1;
+  opacity: 1;
+  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
+  -webkit-transition: opacity 0.2s ease 0s, filter 0.2s ease 0s;
+  -moz-transition: opacity 0.2s ease 0s, filter 0.2s ease 0s;
+  -ms-transition: opacity 0.2s ease 0s, filter 0.2s ease 0s;
+  -o-transition: opacity 0.2s ease 0s, filter 0.2s ease 0s;
+  -webkit-transform: translateZ(0);
+  -moz-transform: translateZ(0);
+  -ms-transform: translateZ(0);
+  -o-transform: translateZ(0);
+}
+div.fr-modal-body div.fr-image-list div.fr-image-container.fr-mobile-selected img {
+  -webkit-opacity: 0.75;
+  -moz-opacity: 0.75;
+  opacity: 0.75;
+  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
+}
+div.fr-modal-body div.fr-image-list div.fr-image-container.fr-mobile-selected .fr-delete-img,
+div.fr-modal-body div.fr-image-list div.fr-image-container.fr-mobile-selected .fr-insert-img {
+  display: inline-block;
+}
+div.fr-modal-body div.fr-image-list div.fr-image-container .fr-delete-img,
+div.fr-modal-body div.fr-image-list div.fr-image-container .fr-insert-img {
+  display: none;
+  top: 50%;
+  border-radius: 100%;
+  -moz-border-radius: 100%;
+  -webkit-border-radius: 100%;
+  -moz-background-clip: padding;
+  -webkit-background-clip: padding-box;
+  background-clip: padding-box;
+  -webkit-transition: background 0.2s ease 0s, color 0.2s ease 0s;
+  -moz-transition: background 0.2s ease 0s, color 0.2s ease 0s;
+  -ms-transition: background 0.2s ease 0s, color 0.2s ease 0s;
+  -o-transition: background 0.2s ease 0s, color 0.2s ease 0s;
+  -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 1px 1px rgba(0, 0, 0, 0.16);
+  -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 1px 1px rgba(0, 0, 0, 0.16);
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 1px 1px rgba(0, 0, 0, 0.16);
+  position: absolute;
+  cursor: pointer;
+  margin: 0;
+  width: 36px;
+  height: 36px;
+  line-height: 36px;
+  text-decoration: none;
+  z-index: 3;
+}
+div.fr-modal-body div.fr-image-list div.fr-image-container .fr-delete-img {
+  background: #b8312f;
+  color: #ffffff;
+  left: 50%;
+  -webkit-transform: translateY(-50%) translateX(25%);
+  -moz-transform: translateY(-50%) translateX(25%);
+  -ms-transform: translateY(-50%) translateX(25%);
+  -o-transform: translateY(-50%) translateX(25%);
+}
+div.fr-modal-body div.fr-image-list div.fr-image-container .fr-insert-img {
+  background: #ffffff;
+  color: #1e88e5;
+  left: 50%;
+  -webkit-transform: translateY(-50%) translateX(-125%);
+  -moz-transform: translateY(-50%) translateX(-125%);
+  -ms-transform: translateY(-50%) translateX(-125%);
+  -o-transform: translateY(-50%) translateX(-125%);
+}
+.fr-desktop .fr-modal-wrapper .fr-modal-head .fr-modal-tags a:hover {
+  background: #ebebeb;
+}
+.fr-desktop .fr-modal-wrapper .fr-modal-head .fr-modal-tags a.fr-selected-tag {
+  background: #d6d6d6;
+}
+.fr-desktop .fr-modal-wrapper div.fr-modal-body div.fr-image-list div.fr-image-container:hover img {
+  -webkit-opacity: 0.75;
+  -moz-opacity: 0.75;
+  opacity: 0.75;
+  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
+}
+.fr-desktop .fr-modal-wrapper div.fr-modal-body div.fr-image-list div.fr-image-container:hover .fr-delete-img,
+.fr-desktop .fr-modal-wrapper div.fr-modal-body div.fr-image-list div.fr-image-container:hover .fr-insert-img {
+  display: inline-block;
+}
+.fr-desktop .fr-modal-wrapper div.fr-modal-body div.fr-image-list div.fr-image-container .fr-delete-img:hover {
+  background: #bf4644;
+  color: #ffffff;
+}
+.fr-desktop .fr-modal-wrapper div.fr-modal-body div.fr-image-list div.fr-image-container .fr-insert-img:hover {
+  background: #ebebeb;
+}

Разница между файлами не показана из-за своего большого размера
+ 6 - 0
modules/boonex/froala/plugins/froala/css/plugins/image_manager.min.css


+ 37 - 0
modules/boonex/froala/plugins/froala/css/plugins/line_breaker.css

@@ -0,0 +1,37 @@
+/*!
+ * froala_editor v2.7.5 (https://www.froala.com/wysiwyg-editor)
+ * License https://froala.com/wysiwyg-editor/terms/
+ * Copyright 2014-2018 Froala Labs
+ */
+
+.clearfix::after {
+  clear: both;
+  display: block;
+  content: "";
+  height: 0;
+}
+.hide-by-clipping {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  border: 0;
+}
+.fr-line-breaker {
+  cursor: text;
+  border-top: 1px solid #1e88e5;
+  position: fixed;
+  z-index: 2;
+  display: none;
+}
+.fr-line-breaker.fr-visible {
+  display: block;
+}
+.fr-line-breaker a.fr-floating-btn {
+  position: absolute;
+  left: calc(50% - (32px / 2));
+  top: -16px;
+}

+ 7 - 0
modules/boonex/froala/plugins/froala/css/plugins/line_breaker.min.css

@@ -0,0 +1,7 @@
+/*!
+ * froala_editor v2.7.5 (https://www.froala.com/wysiwyg-editor)
+ * License https://froala.com/wysiwyg-editor/terms/
+ * Copyright 2014-2018 Froala Labs
+ */
+
+.clearfix::after{clear:both;display:block;content:"";height:0}.hide-by-clipping{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}.fr-line-breaker{cursor:text;border-top:1px solid #1e88e5;position:fixed;z-index:2;display:none}.fr-line-breaker.fr-visible{display:block}.fr-line-breaker a.fr-floating-btn{position:absolute;left:calc(50% - (32px / 2));top:-16px}

+ 70 - 0
modules/boonex/froala/plugins/froala/css/plugins/quick_insert.css

@@ -0,0 +1,70 @@
+/*!
+ * froala_editor v2.7.5 (https://www.froala.com/wysiwyg-editor)
+ * License https://froala.com/wysiwyg-editor/terms/
+ * Copyright 2014-2018 Froala Labs
+ */
+
+.clearfix::after {
+  clear: both;
+  display: block;
+  content: "";
+  height: 0;
+}
+.hide-by-clipping {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  border: 0;
+}
+.fr-quick-insert {
+  position: absolute;
+  z-index: 2147483639;
+  white-space: nowrap;
+  padding-right: 5px;
+  margin-left: -5px;
+  -webkit-box-sizing: content-box;
+  -moz-box-sizing: content-box;
+  box-sizing: content-box;
+}
+.fr-quick-insert.fr-on a.fr-floating-btn svg {
+  -webkit-transform: rotate(135deg);
+  -moz-transform: rotate(135deg);
+  -ms-transform: rotate(135deg);
+  -o-transform: rotate(135deg);
+}
+.fr-quick-insert.fr-hidden {
+  display: none;
+}
+.fr-qi-helper {
+  position: absolute;
+  z-index: 3;
+  padding-left: 16px;
+  white-space: nowrap;
+}
+.fr-qi-helper a.fr-btn.fr-floating-btn {
+  text-align: center;
+  display: inline-block;
+  color: #222222;
+  -webkit-opacity: 0;
+  -moz-opacity: 0;
+  opacity: 0;
+  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
+  -webkit-transform: scale(0);
+  -moz-transform: scale(0);
+  -ms-transform: scale(0);
+  -o-transform: scale(0);
+}
+.fr-qi-helper a.fr-btn.fr-floating-btn.fr-size-1 {
+  -webkit-opacity: 1;
+  -moz-opacity: 1;
+  opacity: 1;
+  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
+  -webkit-transform: scale(1);
+  -moz-transform: scale(1);
+  -ms-transform: scale(1);
+  -o-transform: scale(1);
+}

+ 7 - 0
modules/boonex/froala/plugins/froala/css/plugins/quick_insert.min.css

@@ -0,0 +1,7 @@
+/*!
+ * froala_editor v2.7.5 (https://www.froala.com/wysiwyg-editor)
+ * License https://froala.com/wysiwyg-editor/terms/
+ * Copyright 2014-2018 Froala Labs
+ */
+
+.clearfix::after{clear:both;display:block;content:"";height:0}.hide-by-clipping{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}.fr-quick-insert{position:absolute;z-index:2147483639;white-space:nowrap;padding-right:5px;margin-left:-5px;-webkit-box-sizing:content-box;-moz-box-sizing:content-box;box-sizing:content-box}.fr-quick-insert.fr-on a.fr-floating-btn svg{-webkit-transform:rotate(135deg);-moz-transform:rotate(135deg);-ms-transform:rotate(135deg);-o-transform:rotate(135deg)}.fr-quick-insert.fr-hidden{display:none}.fr-qi-helper{position:absolute;z-index:3;padding-left:16px;white-space:nowrap}.fr-qi-helper a.fr-btn.fr-floating-btn{text-align:center;display:inline-block;color:#222;-webkit-opacity:0;-moz-opacity:0;opacity:0;-ms-filter:"alpha(Opacity=0)";-webkit-transform:scale(0);-moz-transform:scale(0);-ms-transform:scale(0);-o-transform:scale(0)}.fr-qi-helper a.fr-btn.fr-floating-btn.fr-size-1{-webkit-opacity:1;-moz-opacity:1;opacity:1;-ms-filter:"alpha(Opacity=0)";-webkit-transform:scale(1);-moz-transform:scale(1);-ms-transform:scale(1);-o-transform:scale(1)}

+ 51 - 0
modules/boonex/froala/plugins/froala/css/plugins/special_characters.css

@@ -0,0 +1,51 @@
+/*!
+ * froala_editor v2.7.5 (https://www.froala.com/wysiwyg-editor)
+ * License https://froala.com/wysiwyg-editor/terms/
+ * Copyright 2014-2018 Froala Labs
+ */
+
+.clearfix::after {
+  clear: both;
+  display: block;
+  content: "";
+  height: 0;
+}
+.hide-by-clipping {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  border: 0;
+}
+.fr-modal .fr-modal-wrapper .fr-modal-body .fr-special-characters-modal {
+  text-align: left;
+  padding: 20px 20px 10px;
+}
+.fr-modal .fr-modal-wrapper .fr-modal-body .fr-special-characters-modal .fr-special-characters-list {
+  margin-bottom: 20px;
+}
+.fr-modal .fr-modal-wrapper .fr-modal-body .fr-special-characters-modal .fr-special-characters-title {
+  font-weight: bold;
+  font-size: 14px;
+  padding: 6px 0 4px;
+  margin: 0 0 5px;
+}
+.fr-modal .fr-modal-wrapper .fr-modal-body .fr-special-characters-modal .fr-special-character {
+  display: inline-block;
+  font-size: 16px;
+  width: 20px;
+  height: 20px;
+  padding: 5px;
+  line-height: 20px;
+  cursor: default;
+  font-weight: normal;
+  -webkit-box-sizing: content-box;
+  -moz-box-sizing: content-box;
+  box-sizing: content-box;
+  text-align: center;
+  border: 1px solid #cccccc;
+  margin: -1px 0 0 -1px;
+}

+ 7 - 0
modules/boonex/froala/plugins/froala/css/plugins/special_characters.min.css

@@ -0,0 +1,7 @@
+/*!
+ * froala_editor v2.7.5 (https://www.froala.com/wysiwyg-editor)
+ * License https://froala.com/wysiwyg-editor/terms/
+ * Copyright 2014-2018 Froala Labs
+ */
+
+.clearfix::after{clear:both;display:block;content:"";height:0}.hide-by-clipping{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}.fr-modal .fr-modal-wrapper .fr-modal-body .fr-special-characters-modal{text-align:left;padding:20px 20px 10px}.fr-modal .fr-modal-wrapper .fr-modal-body .fr-special-characters-modal .fr-special-characters-list{margin-bottom:20px}.fr-modal .fr-modal-wrapper .fr-modal-body .fr-special-characters-modal .fr-special-characters-title{font-weight:700;font-size:14px;padding:6px 0 4px;margin:0 0 5px}.fr-modal .fr-modal-wrapper .fr-modal-body .fr-special-characters-modal .fr-special-character{display:inline-block;font-size:16px;width:20px;height:20px;padding:5px;line-height:20px;cursor:default;font-weight:400;-webkit-box-sizing:content-box;-moz-box-sizing:content-box;box-sizing:content-box;text-align:center;border:1px solid #ccc;margin:-1px 0 0 -1px}

+ 181 - 0
modules/boonex/froala/plugins/froala/css/plugins/table.css

@@ -0,0 +1,181 @@
+/*!
+ * froala_editor v2.7.5 (https://www.froala.com/wysiwyg-editor)
+ * License https://froala.com/wysiwyg-editor/terms/
+ * Copyright 2014-2018 Froala Labs
+ */
+
+.clearfix::after {
+  clear: both;
+  display: block;
+  content: "";
+  height: 0;
+}
+.hide-by-clipping {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  border: 0;
+}
+.fr-element table td.fr-selected-cell,
+.fr-element table th.fr-selected-cell {
+  border: 1px double #1e88e5;
+}
+.fr-element table tr {
+  user-select: none;
+  -o-user-select: none;
+  -moz-user-select: none;
+  -khtml-user-select: none;
+  -webkit-user-select: none;
+  -ms-user-select: none;
+}
+.fr-element table td,
+.fr-element table th {
+  user-select: text;
+  -o-user-select: text;
+  -moz-user-select: text;
+  -khtml-user-select: text;
+  -webkit-user-select: text;
+  -ms-user-select: text;
+}
+.fr-element .fr-no-selection table td,
+.fr-element .fr-no-selection table th {
+  user-select: none;
+  -o-user-select: none;
+  -moz-user-select: none;
+  -khtml-user-select: none;
+  -webkit-user-select: none;
+  -ms-user-select: none;
+}
+.fr-table-resizer {
+  cursor: col-resize;
+  position: absolute;
+  z-index: 3;
+  display: none;
+}
+.fr-table-resizer.fr-moving {
+  z-index: 2;
+}
+.fr-table-resizer div {
+  -webkit-opacity: 0;
+  -moz-opacity: 0;
+  opacity: 0;
+  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
+  border-right: 1px solid #1e88e5;
+}
+.fr-no-selection {
+  user-select: none;
+  -o-user-select: none;
+  -moz-user-select: none;
+  -khtml-user-select: none;
+  -webkit-user-select: none;
+  -ms-user-select: none;
+}
+.fr-popup .fr-table-colors-hex-layer {
+  width: 100%;
+  margin: 0px;
+  padding: 10px;
+}
+.fr-popup .fr-table-colors-hex-layer .fr-input-line {
+  float: left;
+  width: calc(100% - 50px);
+  padding: 8px 0 0;
+}
+.fr-popup .fr-table-colors-hex-layer .fr-action-buttons {
+  float: right;
+  width: 50px;
+}
+.fr-popup .fr-table-colors-hex-layer .fr-action-buttons button {
+  background-color: #1e88e5;
+  color: #FFF;
+  border-radius: 2px;
+  -moz-border-radius: 2px;
+  -webkit-border-radius: 2px;
+  -moz-background-clip: padding;
+  -webkit-background-clip: padding-box;
+  background-clip: padding-box;
+  font-size: 13px;
+  height: 32px;
+}
+.fr-popup .fr-table-colors-hex-layer .fr-action-buttons button:hover {
+  background-color: #166dba;
+  color: #FFF;
+}
+.fr-popup .fr-table-size .fr-table-size-info {
+  text-align: center;
+  font-size: 14px;
+  padding: 8px;
+}
+.fr-popup .fr-table-size .fr-select-table-size {
+  line-height: 0;
+  padding: 0 5px 5px;
+  white-space: nowrap;
+}
+.fr-popup .fr-table-size .fr-select-table-size > span {
+  display: inline-block;
+  padding: 0px 4px 4px 0;
+  background: transparent;
+}
+.fr-popup .fr-table-size .fr-select-table-size > span > span {
+  display: inline-block;
+  width: 18px;
+  height: 18px;
+  border: 1px solid #dddddd;
+}
+.fr-popup .fr-table-size .fr-select-table-size > span.hover {
+  background: transparent;
+}
+.fr-popup .fr-table-size .fr-select-table-size > span.hover > span {
+  background: rgba(30, 136, 229, 0.3);
+  border: solid 1px #1e88e5;
+}
+.fr-popup .fr-table-size .fr-select-table-size .new-line::after {
+  clear: both;
+  display: block;
+  content: "";
+  height: 0;
+}
+.fr-popup.fr-above .fr-table-size .fr-select-table-size > span {
+  display: inline-block !important;
+}
+.fr-popup .fr-table-colors-buttons {
+  margin-bottom: 5px;
+}
+.fr-popup .fr-table-colors {
+  line-height: 0;
+  display: block;
+}
+.fr-popup .fr-table-colors > span {
+  display: inline-block;
+  width: 32px;
+  height: 32px;
+  position: relative;
+  z-index: 1;
+}
+.fr-popup .fr-table-colors > span > i {
+  text-align: center;
+  line-height: 32px;
+  height: 32px;
+  width: 32px;
+  font-size: 13px;
+  position: absolute;
+  bottom: 0;
+  cursor: default;
+  left: 0;
+}
+.fr-popup .fr-table-colors > span:focus {
+  outline: 1px solid #222222;
+  z-index: 2;
+}
+.fr-popup.fr-desktop .fr-table-size .fr-select-table-size > span > span {
+  width: 12px;
+  height: 12px;
+}
+.fr-insert-helper {
+  position: absolute;
+  z-index: 9999;
+  white-space: nowrap;
+}

Разница между файлами не показана из-за своего большого размера
+ 6 - 0
modules/boonex/froala/plugins/froala/css/plugins/table.min.css


+ 231 - 0
modules/boonex/froala/plugins/froala/css/plugins/video.css

@@ -0,0 +1,231 @@
+/*!
+ * froala_editor v2.7.5 (https://www.froala.com/wysiwyg-editor)
+ * License https://froala.com/wysiwyg-editor/terms/
+ * Copyright 2014-2018 Froala Labs
+ */
+
+.clearfix::after {
+  clear: both;
+  display: block;
+  content: "";
+  height: 0;
+}
+.hide-by-clipping {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  border: 0;
+}
+.fr-element .fr-video {
+  user-select: none;
+  -o-user-select: none;
+  -moz-user-select: none;
+  -khtml-user-select: none;
+  -webkit-user-select: none;
+  -ms-user-select: none;
+}
+.fr-element .fr-video::after {
+  position: absolute;
+  content: '';
+  z-index: 1;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  cursor: pointer;
+  display: block;
+  background: rgba(0, 0, 0, 0);
+}
+.fr-element .fr-video.fr-active > * {
+  z-index: 2;
+  position: relative;
+}
+.fr-element .fr-video > * {
+  -webkit-box-sizing: content-box;
+  -moz-box-sizing: content-box;
+  box-sizing: content-box;
+  max-width: 100%;
+  border: none;
+}
+.fr-box .fr-video-resizer {
+  position: absolute;
+  border: solid 1px #1e88e5;
+  display: none;
+  user-select: none;
+  -o-user-select: none;
+  -moz-user-select: none;
+  -khtml-user-select: none;
+  -webkit-user-select: none;
+  -ms-user-select: none;
+}
+.fr-box .fr-video-resizer.fr-active {
+  display: block;
+}
+.fr-box .fr-video-resizer .fr-handler {
+  display: block;
+  position: absolute;
+  background: #1e88e5;
+  border: solid 1px #ffffff;
+  z-index: 4;
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+}
+.fr-box .fr-video-resizer .fr-handler.fr-hnw {
+  cursor: nw-resize;
+}
+.fr-box .fr-video-resizer .fr-handler.fr-hne {
+  cursor: ne-resize;
+}
+.fr-box .fr-video-resizer .fr-handler.fr-hsw {
+  cursor: sw-resize;
+}
+.fr-box .fr-video-resizer .fr-handler.fr-hse {
+  cursor: se-resize;
+}
+.fr-box .fr-video-resizer .fr-handler {
+  width: 12px;
+  height: 12px;
+}
+.fr-box .fr-video-resizer .fr-handler.fr-hnw {
+  left: -6px;
+  top: -6px;
+}
+.fr-box .fr-video-resizer .fr-handler.fr-hne {
+  right: -6px;
+  top: -6px;
+}
+.fr-box .fr-video-resizer .fr-handler.fr-hsw {
+  left: -6px;
+  bottom: -6px;
+}
+.fr-box .fr-video-resizer .fr-handler.fr-hse {
+  right: -6px;
+  bottom: -6px;
+}
+@media (min-width: 1200px) {
+  .fr-box .fr-video-resizer .fr-handler {
+    width: 10px;
+    height: 10px;
+  }
+  .fr-box .fr-video-resizer .fr-handler.fr-hnw {
+    left: -5px;
+    top: -5px;
+  }
+  .fr-box .fr-video-resizer .fr-handler.fr-hne {
+    right: -5px;
+    top: -5px;
+  }
+  .fr-box .fr-video-resizer .fr-handler.fr-hsw {
+    left: -5px;
+    bottom: -5px;
+  }
+  .fr-box .fr-video-resizer .fr-handler.fr-hse {
+    right: -5px;
+    bottom: -5px;
+  }
+}
+.fr-popup .fr-video-size-layer .fr-video-group .fr-input-line {
+  width: calc(50% - 5px);
+  display: inline-block;
+}
+.fr-popup .fr-video-size-layer .fr-video-group .fr-input-line + .fr-input-line {
+  margin-left: 10px;
+}
+.fr-popup .fr-video-upload-layer {
+  border: dashed 2px #bdbdbd;
+  padding: 25px 0;
+  position: relative;
+  font-size: 14px;
+  letter-spacing: 1px;
+  line-height: 140%;
+  text-align: center;
+}
+.fr-popup .fr-video-upload-layer:hover {
+  background: #ebebeb;
+}
+.fr-popup .fr-video-upload-layer.fr-drop {
+  background: #ebebeb;
+  border-color: #1e88e5;
+}
+.fr-popup .fr-video-upload-layer .fr-form {
+  -webkit-opacity: 0;
+  -moz-opacity: 0;
+  opacity: 0;
+  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  z-index: 2147483640;
+  overflow: hidden;
+  margin: 0 !important;
+  padding: 0 !important;
+  width: 100% !important;
+}
+.fr-popup .fr-video-upload-layer .fr-form input {
+  cursor: pointer;
+  position: absolute;
+  right: 0px;
+  top: 0px;
+  bottom: 0px;
+  width: 500%;
+  height: 100%;
+  margin: 0px;
+  font-size: 400px;
+}
+.fr-popup .fr-video-progress-bar-layer > h3 {
+  font-size: 16px;
+  margin: 10px 0;
+  font-weight: normal;
+}
+.fr-popup .fr-video-progress-bar-layer > div.fr-action-buttons {
+  display: none;
+}
+.fr-popup .fr-video-progress-bar-layer > div.fr-loader {
+  background: #bcdbf7;
+  height: 10px;
+  width: 100%;
+  margin-top: 20px;
+  overflow: hidden;
+  position: relative;
+}
+.fr-popup .fr-video-progress-bar-layer > div.fr-loader span {
+  display: block;
+  height: 100%;
+  width: 0%;
+  background: #1e88e5;
+  -webkit-transition: width 0.2s ease 0s;
+  -moz-transition: width 0.2s ease 0s;
+  -ms-transition: width 0.2s ease 0s;
+  -o-transition: width 0.2s ease 0s;
+}
+.fr-popup .fr-video-progress-bar-layer > div.fr-loader.fr-indeterminate span {
+  width: 30% !important;
+  position: absolute;
+  top: 0;
+  -webkit-animation: loading 2s linear infinite;
+  -moz-animation: loading 2s linear infinite;
+  -o-animation: loading 2s linear infinite;
+  animation: loading 2s linear infinite;
+}
+.fr-popup .fr-video-progress-bar-layer.fr-error > div.fr-loader {
+  display: none;
+}
+.fr-popup .fr-video-progress-bar-layer.fr-error > div.fr-action-buttons {
+  display: block;
+}
+.fr-video-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: 0;
+  z-index: 2147483640;
+  display: none;
+}

Разница между файлами не показана из-за своего большого размера
+ 6 - 0
modules/boonex/froala/plugins/froala/css/plugins/video.min.css


+ 1281 - 0
modules/boonex/froala/plugins/froala/css/themes/dark.css

@@ -0,0 +1,1281 @@
+/*!
+ * froala_editor v2.7.5 (https://www.froala.com/wysiwyg-editor)
+ * License https://froala.com/wysiwyg-editor/terms/
+ * Copyright 2014-2018 Froala Labs
+ */
+
+.clearfix::after {
+  clear: both;
+  display: block;
+  content: "";
+  height: 0;
+}
+.hide-by-clipping {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  border: 0;
+}
+.dark-theme.fr-box.fr-basic .fr-element {
+  color: #000000;
+  padding: 16px;
+  overflow-x: auto;
+  min-height: 52px;
+}
+.dark-theme .fr-element {
+  -webkit-user-select: auto;
+}
+.dark-theme.fr-box a.fr-floating-btn {
+  -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 1px 1px rgba(0, 0, 0, 0.16);
+  -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 1px 1px rgba(0, 0, 0, 0.16);
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 1px 1px rgba(0, 0, 0, 0.16);
+  height: 32px;
+  width: 32px;
+  background: #ffffff;
+  color: #42a5f5;
+  -webkit-transition: background 0.2s ease 0s, color 0.2s ease 0s, transform 0.2s ease 0s;
+  -moz-transition: background 0.2s ease 0s, color 0.2s ease 0s, transform 0.2s ease 0s;
+  -ms-transition: background 0.2s ease 0s, color 0.2s ease 0s, transform 0.2s ease 0s;
+  -o-transition: background 0.2s ease 0s, color 0.2s ease 0s, transform 0.2s ease 0s;
+  left: 0;
+  top: 0;
+  line-height: 32px;
+  border: none;
+}
+.dark-theme.fr-box a.fr-floating-btn svg {
+  -webkit-transition: transform 0.2s ease 0s;
+  -moz-transition: transform 0.2s ease 0s;
+  -ms-transition: transform 0.2s ease 0s;
+  -o-transition: transform 0.2s ease 0s;
+  fill: #42a5f5;
+}
+.dark-theme.fr-box a.fr-floating-btn i,
+.dark-theme.fr-box a.fr-floating-btn svg {
+  font-size: 14px;
+  line-height: 32px;
+}
+.dark-theme.fr-box a.fr-floating-btn:hover {
+  background: #3d3d3d;
+}
+.dark-theme.fr-box a.fr-floating-btn:hover svg {
+  fill: #42a5f5;
+}
+.dark-theme .fr-wrapper .fr-placeholder {
+  font-size: 12px;
+  color: #aaaaaa;
+  top: 0;
+  left: 0;
+  right: 0;
+}
+.dark-theme .fr-wrapper ::-moz-selection {
+  background: #b5d6fd;
+  color: #000000;
+}
+.dark-theme .fr-wrapper ::selection {
+  background: #b5d6fd;
+  color: #000000;
+}
+.dark-theme.fr-box.fr-basic .fr-wrapper {
+  background: #ffffff;
+  border: 0px;
+  border-top: 0;
+  top: 0;
+  left: 0;
+}
+.dark-theme.fr-box.fr-basic.fr-top .fr-wrapper {
+  border-top: 0;
+  border-radius: 0 0 2px 2px;
+  -moz-border-radius: 0 0 2px 2px;
+  -webkit-border-radius: 0 0 2px 2px;
+  -moz-background-clip: padding;
+  -webkit-background-clip: padding-box;
+  background-clip: padding-box;
+  -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 1px 1px rgba(0, 0, 0, 0.16);
+  -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 1px 1px rgba(0, 0, 0, 0.16);
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 1px 1px rgba(0, 0, 0, 0.16);
+}
+.dark-theme.fr-box.fr-basic.fr-bottom .fr-wrapper {
+  border-bottom: 0;
+  border-radius: 2px 2px 0 0;
+  -moz-border-radius: 2px 2px 0 0;
+  -webkit-border-radius: 2px 2px 0 0;
+  -moz-background-clip: padding;
+  -webkit-background-clip: padding-box;
+  background-clip: padding-box;
+  -webkit-box-shadow: 0 -1px 3px rgba(0, 0, 0, 0.12), 0 -1px 1px 1px rgba(0, 0, 0, 0.16);
+  -moz-box-shadow: 0 -1px 3px rgba(0, 0, 0, 0.12), 0 -1px 1px 1px rgba(0, 0, 0, 0.16);
+  box-shadow: 0 -1px 3px rgba(0, 0, 0, 0.12), 0 -1px 1px 1px rgba(0, 0, 0, 0.16);
+}
+.dark-theme .fr-sticky-on.fr-sticky-ios {
+  left: 0;
+  right: 0;
+}
+.dark-theme.fr-box .fr-counter {
+  color: #aaaaaa;
+  background: #ffffff;
+  border-top: solid 1px #ebebeb;
+  border-left: solid 1px #ebebeb;
+  border-radius: 2px 0 0 0;
+  -moz-border-radius: 2px 0 0 0;
+  -webkit-border-radius: 2px 0 0 0;
+  -moz-background-clip: padding;
+  -webkit-background-clip: padding-box;
+  background-clip: padding-box;
+}
+.dark-theme.fr-box.fr-rtl .fr-counter {
+  right: auto;
+  border-right: solid 1px #ebebeb;
+  border-radius: 0 2px 0 0;
+  -moz-border-radius: 0 2px 0 0;
+  -webkit-border-radius: 0 2px 0 0;
+  -moz-background-clip: padding;
+  -webkit-background-clip: padding-box;
+  background-clip: padding-box;
+}
+.dark-theme textarea.fr-code {
+  background: #ffffff;
+  color: #000000;
+}
+.dark-theme.fr-box.fr-code-view.fr-inline {
+  -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 1px 1px rgba(0, 0, 0, 0.16);
+  -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 1px 1px rgba(0, 0, 0, 0.16);
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 1px 1px rgba(0, 0, 0, 0.16);
+}
+.dark-theme.fr-box.fr-inline .fr-command.fr-btn.html-switch {
+  top: 0;
+  right: 0;
+  -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 1px 1px rgba(0, 0, 0, 0.16);
+  -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 1px 1px rgba(0, 0, 0, 0.16);
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 1px 1px rgba(0, 0, 0, 0.16);
+  background: #ffffff;
+  color: #ffffff;
+  -moz-outline: 0;
+  outline: 0;
+  border: 0;
+  padding: 12px 12px;
+  -webkit-transition: background 0.2s ease 0s;
+  -moz-transition: background 0.2s ease 0s;
+  -ms-transition: background 0.2s ease 0s;
+  -o-transition: background 0.2s ease 0s;
+}
+.dark-theme.fr-box.fr-inline .fr-command.fr-btn.html-switch i {
+  font-size: 14px;
+  width: 14px;
+}
+.dark-theme.fr-box.fr-inline .fr-command.fr-btn.html-switch.fr-desktop:hover {
+  background: #3d3d3d;
+}
+.dark-theme.fr-popup .fr-colors-tabs {
+  -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 1px 1px rgba(0, 0, 0, 0.16);
+  -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 1px 1px rgba(0, 0, 0, 0.16);
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 1px 1px rgba(0, 0, 0, 0.16);
+}
+.dark-theme.fr-popup .fr-colors-tabs .fr-colors-tab {
+  color: #ffffff;
+  padding: 8px 0;
+}
+.dark-theme.fr-popup .fr-colors-tabs .fr-colors-tab:hover,
+.dark-theme.fr-popup .fr-colors-tabs .fr-colors-tab:focus {
+  color: #42a5f5;
+}
+.dark-theme.fr-popup .fr-colors-tabs .fr-colors-tab[data-param1="background"]::after {
+  bottom: 0;
+  left: 0;
+  background: #42a5f5;
+  -webkit-transition: transform 0.2s ease 0s;
+  -moz-transition: transform 0.2s ease 0s;
+  -ms-transition: transform 0.2s ease 0s;
+  -o-transition: transform 0.2s ease 0s;
+}
+.dark-theme.fr-popup .fr-colors-tabs .fr-colors-tab.fr-selected-tab {
+  color: #42a5f5;
+}
+.dark-theme.fr-popup .fr-color-hex-layer .fr-input-line {
+  padding: 8px 0 0;
+}
+.dark-theme.fr-popup .fr-color-hex-layer .fr-action-buttons button {
+  background-color: #42a5f5;
+  border-radius: 2px;
+  -moz-border-radius: 2px;
+  -webkit-border-radius: 2px;
+  -moz-background-clip: padding;
+  -webkit-background-clip: padding-box;
+  background-clip: padding-box;
+}
+.dark-theme.fr-popup .fr-color-hex-layer .fr-action-buttons button:hover {
+  background-color: #128ef2;
+}
+.dark-theme.fr-popup .fr-color-set {
+  line-height: 0;
+}
+.dark-theme.fr-popup .fr-color-set > span > i,
+.dark-theme.fr-popup .fr-color-set > span > svg {
+  bottom: 0;
+  left: 0;
+}
+.dark-theme.fr-popup .fr-color-set > span .fr-selected-color {
+  color: #ffffff;
+  font-weight: 400;
+  top: 0;
+  bottom: 0;
+  right: 0;
+  left: 0;
+}
+.dark-theme.fr-popup .fr-color-set > span:hover,
+.dark-theme.fr-popup .fr-color-set > span:focus {
+  outline: 1px solid #ffffff;
+}
+.dark-theme .fr-drag-helper {
+  background: #42a5f5;
+  z-index: 2147483640;
+}
+.dark-theme.fr-popup .fr-link:focus {
+  outline: 0;
+  background: #3d3d3d;
+}
+.dark-theme.fr-popup .fr-file-upload-layer {
+  border: dashed 2px #808080;
+  padding: 25px 0;
+}
+.dark-theme.fr-popup .fr-file-upload-layer:hover {
+  background: #3d3d3d;
+}
+.dark-theme.fr-popup .fr-file-upload-layer.fr-drop {
+  background: #3d3d3d;
+  border-color: #42a5f5;
+}
+.dark-theme.fr-popup .fr-file-upload-layer .fr-form {
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  z-index: 2147483640;
+}
+.dark-theme.fr-popup .fr-file-progress-bar-layer > h3 {
+  margin: 10px 0;
+}
+.dark-theme.fr-popup .fr-file-progress-bar-layer > div.fr-loader {
+  background: #c6e4fc;
+}
+.dark-theme.fr-popup .fr-file-progress-bar-layer > div.fr-loader span {
+  background: #42a5f5;
+  -webkit-transition: width 0.2s ease 0s;
+  -moz-transition: width 0.2s ease 0s;
+  -ms-transition: width 0.2s ease 0s;
+  -o-transition: width 0.2s ease 0s;
+}
+.dark-theme.fr-popup .fr-file-progress-bar-layer > div.fr-loader.fr-indeterminate span {
+  top: 0;
+}
+.dark-theme.fr-box.fr-fullscreen {
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: 0;
+}
+.dark-theme.fr-modal .fr-modal-wrapper .fr-modal-body .fr-help-modal table tr {
+  border: 0;
+}
+.dark-theme.fr-modal .fr-modal-wrapper .fr-modal-body .fr-help-modal table tbody tr {
+  border-bottom: solid 1px #595959;
+}
+.dark-theme.fr-modal .fr-modal-wrapper .fr-modal-body .fr-help-modal table tbody td:first-child {
+  color: #ffffff;
+}
+.dark-theme .fr-image-resizer {
+  border: solid 1px #42a5f5;
+}
+.dark-theme .fr-image-resizer .fr-handler {
+  background: #42a5f5;
+  border: solid 1px #ffffff;
+}
+.dark-theme .fr-image-resizer .fr-handler {
+  width: 12px;
+  height: 12px;
+}
+.dark-theme .fr-image-resizer .fr-handler.fr-hnw {
+  left: -6px;
+  top: -6px;
+}
+.dark-theme .fr-image-resizer .fr-handler.fr-hne {
+  right: -6px;
+  top: -6px;
+}
+.dark-theme .fr-image-resizer .fr-handler.fr-hsw {
+  left: -6px;
+  bottom: -6px;
+}
+.dark-theme .fr-image-resizer .fr-handler.fr-hse {
+  right: -6px;
+  bottom: -6px;
+}
+@media (min-width: 1200px) {
+  .dark-theme .fr-image-resizer .fr-handler {
+    width: 10px;
+    height: 10px;
+  }
+  .dark-theme .fr-image-resizer .fr-handler.fr-hnw {
+    left: -5px;
+    top: -5px;
+  }
+  .dark-theme .fr-image-resizer .fr-handler.fr-hne {
+    right: -5px;
+    top: -5px;
+  }
+  .dark-theme .fr-image-resizer .fr-handler.fr-hsw {
+    left: -5px;
+    bottom: -5px;
+  }
+  .dark-theme .fr-image-resizer .fr-handler.fr-hse {
+    right: -5px;
+    bottom: -5px;
+  }
+}
+.dark-theme.fr-image-overlay {
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: 0;
+  z-index: 2147483640;
+}
+.dark-theme.fr-popup .fr-image-upload-layer {
+  border: dashed 2px #808080;
+  padding: 25px 0;
+}
+.dark-theme.fr-popup .fr-image-upload-layer:hover {
+  background: #3d3d3d;
+}
+.dark-theme.fr-popup .fr-image-upload-layer.fr-drop {
+  background: #3d3d3d;
+  border-color: #42a5f5;
+}
+.dark-theme.fr-popup .fr-image-upload-layer .fr-form {
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  z-index: 2147483640;
+}
+.dark-theme.fr-popup .fr-image-progress-bar-layer > h3 {
+  margin: 10px 0;
+}
+.dark-theme.fr-popup .fr-image-progress-bar-layer > div.fr-loader {
+  background: #c6e4fc;
+}
+.dark-theme.fr-popup .fr-image-progress-bar-layer > div.fr-loader span {
+  background: #42a5f5;
+  -webkit-transition: width 0.2s ease 0s;
+  -moz-transition: width 0.2s ease 0s;
+  -ms-transition: width 0.2s ease 0s;
+  -o-transition: width 0.2s ease 0s;
+}
+.dark-theme.fr-popup .fr-image-progress-bar-layer > div.fr-loader.fr-indeterminate span {
+  top: 0;
+}
+.dark-theme.fr-modal-head .fr-modal-head-line i.fr-modal-more {
+  -webkit-transition: padding 0.2s ease 0s, width 0.2s ease 0s, opacity 0.2s ease 0s;
+  -moz-transition: padding 0.2s ease 0s, width 0.2s ease 0s, opacity 0.2s ease 0s;
+  -ms-transition: padding 0.2s ease 0s, width 0.2s ease 0s, opacity 0.2s ease 0s;
+  -o-transition: padding 0.2s ease 0s, width 0.2s ease 0s, opacity 0.2s ease 0s;
+}
+.dark-theme.fr-modal-head .fr-modal-head-line i.fr-modal-more.fr-not-available {
+  opacity: 0;
+  width: 0;
+  padding: 12px 0;
+}
+.dark-theme.fr-modal-head .fr-modal-tags a {
+  opacity: 0;
+  border-radius: 2px;
+  -moz-border-radius: 2px;
+  -webkit-border-radius: 2px;
+  -moz-background-clip: padding;
+  -webkit-background-clip: padding-box;
+  background-clip: padding-box;
+  color: #42a5f5;
+  -webkit-transition: opacity 0.2s ease 0s, background 0.2s ease 0s;
+  -moz-transition: opacity 0.2s ease 0s, background 0.2s ease 0s;
+  -ms-transition: opacity 0.2s ease 0s, background 0.2s ease 0s;
+  -o-transition: opacity 0.2s ease 0s, background 0.2s ease 0s;
+}
+.dark-theme.fr-modal-head .fr-modal-tags a.fr-selected-tag {
+  background: #2e2e2e;
+}
+.dark-themediv.fr-modal-body .fr-preloader {
+  margin: 50px auto;
+}
+.dark-themediv.fr-modal-body div.fr-image-list {
+  padding: 0;
+}
+.dark-themediv.fr-modal-body div.fr-image-list div.fr-image-container {
+  -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 1px 1px rgba(0, 0, 0, 0.16);
+  -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 1px 1px rgba(0, 0, 0, 0.16);
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 1px 1px rgba(0, 0, 0, 0.16);
+  border-radius: 2px;
+  -moz-border-radius: 2px;
+  -webkit-border-radius: 2px;
+  -moz-background-clip: padding;
+  -webkit-background-clip: padding-box;
+  background-clip: padding-box;
+}
+.dark-themediv.fr-modal-body div.fr-image-list div.fr-image-container.fr-image-deleting::after {
+  -webkit-transition: opacity 0.2s ease 0s;
+  -moz-transition: opacity 0.2s ease 0s;
+  -ms-transition: opacity 0.2s ease 0s;
+  -o-transition: opacity 0.2s ease 0s;
+  background: #000000;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: 0;
+}
+.dark-themediv.fr-modal-body div.fr-image-list div.fr-image-container.fr-image-deleting::before {
+  color: #ffffff;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: 0;
+  margin: auto;
+}
+.dark-themediv.fr-modal-body div.fr-image-list div.fr-image-container.fr-empty {
+  background: #aaaaaa;
+}
+.dark-themediv.fr-modal-body div.fr-image-list div.fr-image-container.fr-empty::after {
+  margin: auto;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+}
+.dark-themediv.fr-modal-body div.fr-image-list div.fr-image-container img {
+  -webkit-transition: opacity 0.2s ease 0s, filter 0.2s ease 0s;
+  -moz-transition: opacity 0.2s ease 0s, filter 0.2s ease 0s;
+  -ms-transition: opacity 0.2s ease 0s, filter 0.2s ease 0s;
+  -o-transition: opacity 0.2s ease 0s, filter 0.2s ease 0s;
+}
+.dark-themediv.fr-modal-body div.fr-image-list div.fr-image-container .fr-delete-img,
+.dark-themediv.fr-modal-body div.fr-image-list div.fr-image-container .fr-insert-img {
+  -webkit-transition: background 0.2s ease 0s, color 0.2s ease 0s;
+  -moz-transition: background 0.2s ease 0s, color 0.2s ease 0s;
+  -ms-transition: background 0.2s ease 0s, color 0.2s ease 0s;
+  -o-transition: background 0.2s ease 0s, color 0.2s ease 0s;
+  -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 1px 1px rgba(0, 0, 0, 0.16);
+  -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 1px 1px rgba(0, 0, 0, 0.16);
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 1px 1px rgba(0, 0, 0, 0.16);
+  margin: 0;
+}
+.dark-themediv.fr-modal-body div.fr-image-list div.fr-image-container .fr-delete-img {
+  background: #b8312f;
+  color: #ffffff;
+}
+.dark-themediv.fr-modal-body div.fr-image-list div.fr-image-container .fr-insert-img {
+  background: #353535;
+  color: #42a5f5;
+}
+.dark-theme.dark-theme.fr-desktop .fr-modal-wrapper .fr-modal-head .fr-modal-tags a:hover {
+  background: #3d3d3d;
+}
+.dark-theme.dark-theme.fr-desktop .fr-modal-wrapper .fr-modal-head .fr-modal-tags a.fr-selected-tag {
+  background: #2e2e2e;
+}
+.dark-theme.dark-theme.fr-desktop .fr-modal-wrapper div.fr-modal-body div.fr-image-list div.fr-image-container .fr-delete-img:hover {
+  background: #bf4644;
+  color: #ffffff;
+}
+.dark-theme.dark-theme.fr-desktop .fr-modal-wrapper div.fr-modal-body div.fr-image-list div.fr-image-container .fr-insert-img:hover {
+  background: #3d3d3d;
+}
+.dark-theme .fr-line-breaker {
+  border-top: 1px solid #42a5f5;
+}
+.dark-theme .fr-line-breaker a.fr-floating-btn {
+  left: calc(50% - (32px / 2));
+  top: -16px;
+}
+.dark-theme .fr-qi-helper {
+  padding-left: 16px;
+}
+.dark-theme .fr-qi-helper a.fr-btn.fr-floating-btn {
+  color: #ffffff;
+}
+.dark-theme.fr-modal .fr-modal-wrapper .fr-modal-body .fr-special-characters-modal .fr-special-character {
+  border: 1px solid #aaaaaa;
+}
+.dark-theme .fr-element table td.fr-selected-cell,
+.dark-theme .fr-element table th.fr-selected-cell {
+  border: 1px double #42a5f5;
+}
+.dark-theme .fr-table-resizer div {
+  border-right: 1px solid #42a5f5;
+}
+.dark-theme.fr-popup .fr-table-colors-hex-layer .fr-input-line {
+  padding: 8px 0 0;
+}
+.dark-theme.fr-popup .fr-table-colors-hex-layer .fr-action-buttons button {
+  background-color: #42a5f5;
+  border-radius: 2px;
+  -moz-border-radius: 2px;
+  -webkit-border-radius: 2px;
+  -moz-background-clip: padding;
+  -webkit-background-clip: padding-box;
+  background-clip: padding-box;
+}
+.dark-theme.fr-popup .fr-table-colors-hex-layer .fr-action-buttons button:hover {
+  background-color: #128ef2;
+}
+.dark-theme.fr-popup .fr-table-size .fr-select-table-size {
+  line-height: 0;
+}
+.dark-theme.fr-popup .fr-table-size .fr-select-table-size > span {
+  padding: 0px 4px 4px 0;
+}
+.dark-theme.fr-popup .fr-table-size .fr-select-table-size > span > span {
+  border: 1px solid #dddddd;
+}
+.dark-theme.fr-popup .fr-table-size .fr-select-table-size > span.hover > span {
+  background: rgba(66, 165, 245, 0.3);
+  border: solid 1px #42a5f5;
+}
+.dark-theme.fr-popup .fr-table-colors {
+  line-height: 0;
+}
+.dark-theme.fr-popup .fr-table-colors > span > i {
+  bottom: 0;
+  left: 0;
+}
+.dark-theme.fr-popup .fr-table-colors > span:focus {
+  outline: 1px solid #ffffff;
+}
+.dark-theme .fr-element .fr-video::after {
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+}
+.dark-theme.fr-box .fr-video-resizer {
+  border: solid 1px #42a5f5;
+}
+.dark-theme.fr-box .fr-video-resizer .fr-handler {
+  background: #42a5f5;
+  border: solid 1px #ffffff;
+}
+.dark-theme.fr-box .fr-video-resizer .fr-handler {
+  width: 12px;
+  height: 12px;
+}
+.dark-theme.fr-box .fr-video-resizer .fr-handler.fr-hnw {
+  left: -6px;
+  top: -6px;
+}
+.dark-theme.fr-box .fr-video-resizer .fr-handler.fr-hne {
+  right: -6px;
+  top: -6px;
+}
+.dark-theme.fr-box .fr-video-resizer .fr-handler.fr-hsw {
+  left: -6px;
+  bottom: -6px;
+}
+.dark-theme.fr-box .fr-video-resizer .fr-handler.fr-hse {
+  right: -6px;
+  bottom: -6px;
+}
+@media (min-width: 1200px) {
+  .dark-theme.fr-box .fr-video-resizer .fr-handler {
+    width: 10px;
+    height: 10px;
+  }
+  .dark-theme.fr-box .fr-video-resizer .fr-handler.fr-hnw {
+    left: -5px;
+    top: -5px;
+  }
+  .dark-theme.fr-box .fr-video-resizer .fr-handler.fr-hne {
+    right: -5px;
+    top: -5px;
+  }
+  .dark-theme.fr-box .fr-video-resizer .fr-handler.fr-hsw {
+    left: -5px;
+    bottom: -5px;
+  }
+  .dark-theme.fr-box .fr-video-resizer .fr-handler.fr-hse {
+    right: -5px;
+    bottom: -5px;
+  }
+}
+.dark-theme.fr-popup .fr-video-upload-layer {
+  border: dashed 2px #808080;
+  padding: 25px 0;
+}
+.dark-theme.fr-popup .fr-video-upload-layer:hover {
+  background: #3d3d3d;
+}
+.dark-theme.fr-popup .fr-video-upload-layer.fr-drop {
+  background: #3d3d3d;
+  border-color: #42a5f5;
+}
+.dark-theme.fr-popup .fr-video-upload-layer .fr-form {
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  z-index: 2147483640;
+}
+.dark-theme.fr-popup .fr-video-progress-bar-layer > h3 {
+  margin: 10px 0;
+}
+.dark-theme.fr-popup .fr-video-progress-bar-layer > div.fr-loader {
+  background: #c6e4fc;
+}
+.dark-theme.fr-popup .fr-video-progress-bar-layer > div.fr-loader span {
+  background: #42a5f5;
+  -webkit-transition: width 0.2s ease 0s;
+  -moz-transition: width 0.2s ease 0s;
+  -ms-transition: width 0.2s ease 0s;
+  -o-transition: width 0.2s ease 0s;
+}
+.dark-theme.fr-popup .fr-video-progress-bar-layer > div.fr-loader.fr-indeterminate span {
+  top: 0;
+}
+.dark-theme.fr-video-overlay {
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: 0;
+  z-index: 2147483640;
+}
+.dark-theme .fr-view span[style~="color:"] a {
+  color: inherit;
+}
+.dark-theme .fr-view strong {
+  font-weight: 700;
+}
+.dark-theme .fr-view table.fr-alternate-rows tbody tr:nth-child(2n) {
+  background: #d3d3d3;
+}
+.dark-theme .fr-view table td,
+.dark-theme .fr-view table th {
+  border: 1px solid #dddddd;
+}
+.dark-theme .fr-view table th {
+  background: #e6e6e6;
+}
+.dark-theme .fr-view[dir="rtl"] blockquote {
+  border-right: solid 2px #5e35b1;
+  margin-right: 0;
+}
+.dark-theme .fr-view[dir="rtl"] blockquote blockquote {
+  border-color: #00bcd4;
+}
+.dark-theme .fr-view[dir="rtl"] blockquote blockquote blockquote {
+  border-color: #43a047;
+}
+.dark-theme .fr-view blockquote {
+  border-left: solid 2px #5e35b1;
+  margin-left: 0;
+  color: #5e35b1;
+}
+.dark-theme .fr-view blockquote blockquote {
+  border-color: #00bcd4;
+  color: #00bcd4;
+}
+.dark-theme .fr-view blockquote blockquote blockquote {
+  border-color: #43a047;
+  color: #43a047;
+}
+.dark-theme .fr-view span.fr-emoticon {
+  line-height: 0;
+}
+.dark-theme .fr-view span.fr-emoticon.fr-emoticon-img {
+  font-size: inherit;
+}
+.dark-theme .fr-view .fr-text-bordered {
+  padding: 10px 0;
+}
+.dark-theme .fr-view .fr-img-caption .fr-img-wrap {
+  margin: auto;
+}
+.dark-theme .fr-view .fr-img-caption .fr-img-wrap img {
+  margin: auto;
+}
+.dark-theme .fr-view .fr-img-caption .fr-img-wrap > span {
+  margin: auto;
+}
+.dark-theme .fr-element .fr-embedly::after {
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+}
+.dark-theme.fr-box .fr-embedly-resizer {
+  border: solid 1px #42a5f5;
+}
+.dark-theme .examples-variante > a {
+  font-size: 14px;
+  font-family: Arial, Helvetica, sans-serif;
+}
+.dark-theme .sc-cm-holder > .sc-cm {
+  border-top: 5px solid #222222 !important;
+}
+.dark-theme .sc-cm__item_dropdown:hover > a,
+.dark-theme .sc-cm a:hover {
+  background-color: #3d3d3d !important;
+}
+.dark-theme .sc-cm__item_active > a,
+.dark-theme .sc-cm__item_active > a:hover,
+.dark-theme .sc-cm a:active,
+.dark-theme .sc-cm a:focus {
+  background-color: #2e2e2e !important;
+}
+.dark-theme .sc-cm-holder > .sc-cm:before {
+  background-color: #3d3d3d !important;
+}
+.dark-theme .fr-tooltip {
+  top: 0;
+  left: 0;
+  border-radius: 2px;
+  -moz-border-radius: 2px;
+  -webkit-border-radius: 2px;
+  -moz-background-clip: padding;
+  -webkit-background-clip: padding-box;
+  background-clip: padding-box;
+  -webkit-box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 2px 2px 1px rgba(0, 0, 0, 0.14);
+  -moz-box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 2px 2px 1px rgba(0, 0, 0, 0.14);
+  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 2px 2px 1px rgba(0, 0, 0, 0.14);
+  background: #222222;
+  color: #ffffff;
+  font-size: 11px;
+  line-height: 22px;
+  font-family: Arial, Helvetica, sans-serif;
+  -webkit-transition: opacity 0.2s ease 0s;
+  -moz-transition: opacity 0.2s ease 0s;
+  -ms-transition: opacity 0.2s ease 0s;
+  -o-transition: opacity 0.2s ease 0s;
+}
+.dark-theme.fr-toolbar .fr-command.fr-btn,
+.dark-theme.fr-popup .fr-command.fr-btn {
+  color: #ffffff;
+  -moz-outline: 0;
+  outline: 0;
+  border: 0;
+  margin: 0px 2px;
+  -webkit-transition: background 0.2s ease 0s;
+  -moz-transition: background 0.2s ease 0s;
+  -ms-transition: background 0.2s ease 0s;
+  -o-transition: background 0.2s ease 0s;
+  padding: 0;
+  width: 38px;
+  height: 38px;
+}
+.dark-theme.fr-toolbar .fr-command.fr-btn::-moz-focus-inner,
+.dark-theme.fr-popup .fr-command.fr-btn::-moz-focus-inner {
+  border: 0;
+}
+.dark-theme.fr-toolbar .fr-command.fr-btn.fr-btn-text,
+.dark-theme.fr-popup .fr-command.fr-btn.fr-btn-text {
+  width: auto;
+}
+.dark-theme.fr-toolbar .fr-command.fr-btn i,
+.dark-theme.fr-popup .fr-command.fr-btn i,
+.dark-theme.fr-toolbar .fr-command.fr-btn svg,
+.dark-theme.fr-popup .fr-command.fr-btn svg {
+  font-size: 14px;
+  width: 14px;
+  margin: 12px 12px;
+}
+.dark-theme.fr-toolbar .fr-command.fr-btn span,
+.dark-theme.fr-popup .fr-command.fr-btn span {
+  font-size: 14px;
+  line-height: 17px;
+  min-width: 34px;
+  height: 17px;
+  padding: 0 2px;
+}
+.dark-theme.fr-toolbar .fr-command.fr-btn img,
+.dark-theme.fr-popup .fr-command.fr-btn img {
+  margin: 12px 12px;
+  width: 14px;
+}
+.dark-theme.fr-toolbar .fr-command.fr-btn.fr-active,
+.dark-theme.fr-popup .fr-command.fr-btn.fr-active {
+  color: #42a5f5;
+  background: transparent;
+}
+.dark-theme.fr-toolbar .fr-command.fr-btn.fr-dropdown.fr-selection,
+.dark-theme.fr-popup .fr-command.fr-btn.fr-dropdown.fr-selection {
+  width: auto;
+}
+.dark-theme.fr-toolbar .fr-command.fr-btn.fr-dropdown i,
+.dark-theme.fr-popup .fr-command.fr-btn.fr-dropdown i,
+.dark-theme.fr-toolbar .fr-command.fr-btn.fr-dropdown span,
+.dark-theme.fr-popup .fr-command.fr-btn.fr-dropdown span,
+.dark-theme.fr-toolbar .fr-command.fr-btn.fr-dropdown img,
+.dark-theme.fr-popup .fr-command.fr-btn.fr-dropdown img,
+.dark-theme.fr-toolbar .fr-command.fr-btn.fr-dropdown svg,
+.dark-theme.fr-popup .fr-command.fr-btn.fr-dropdown svg {
+  margin-left: 8px;
+  margin-right: 16px;
+}
+.dark-theme.fr-toolbar .fr-command.fr-btn.fr-dropdown.fr-active,
+.dark-theme.fr-popup .fr-command.fr-btn.fr-dropdown.fr-active {
+  color: #ffffff;
+  background: #2e2e2e;
+}
+.dark-theme.fr-toolbar .fr-command.fr-btn.fr-dropdown.fr-active:hover,
+.dark-theme.fr-popup .fr-command.fr-btn.fr-dropdown.fr-active:hover,
+.dark-theme.fr-toolbar .fr-command.fr-btn.fr-dropdown.fr-active:focus,
+.dark-theme.fr-popup .fr-command.fr-btn.fr-dropdown.fr-active:focus {
+  background: #2e2e2e !important;
+  color: #ffffff !important;
+}
+.dark-theme.fr-toolbar .fr-command.fr-btn.fr-dropdown.fr-active:hover::after,
+.dark-theme.fr-popup .fr-command.fr-btn.fr-dropdown.fr-active:hover::after,
+.dark-theme.fr-toolbar .fr-command.fr-btn.fr-dropdown.fr-active:focus::after,
+.dark-theme.fr-popup .fr-command.fr-btn.fr-dropdown.fr-active:focus::after {
+  border-top-color: #ffffff !important;
+}
+.dark-theme.fr-toolbar .fr-command.fr-btn.fr-dropdown::after,
+.dark-theme.fr-popup .fr-command.fr-btn.fr-dropdown::after {
+  width: 0;
+  height: 0;
+  border-left: 4px solid transparent;
+  border-right: 4px solid transparent;
+  border-top: 4px solid #ffffff;
+  right: 4px;
+  top: 17px;
+}
+.dark-theme.fr-toolbar .fr-command.fr-btn.fr-disabled,
+.dark-theme.fr-popup .fr-command.fr-btn.fr-disabled {
+  color: #808080;
+}
+.dark-theme.fr-toolbar .fr-command.fr-btn.fr-disabled::after,
+.dark-theme.fr-popup .fr-command.fr-btn.fr-disabled::after {
+  border-top-color: #808080 !important;
+}
+.dark-theme.fr-toolbar.fr-disabled .fr-btn,
+.dark-theme.fr-popup.fr-disabled .fr-btn,
+.dark-theme.fr-toolbar.fr-disabled .fr-btn.fr-active,
+.dark-theme.fr-popup.fr-disabled .fr-btn.fr-active {
+  color: #808080;
+}
+.dark-theme.fr-toolbar.fr-disabled .fr-btn.fr-dropdown::after,
+.dark-theme.fr-popup.fr-disabled .fr-btn.fr-dropdown::after,
+.dark-theme.fr-toolbar.fr-disabled .fr-btn.fr-active.fr-dropdown::after,
+.dark-theme.fr-popup.fr-disabled .fr-btn.fr-active.fr-dropdown::after {
+  border-top-color: #808080;
+}
+.dark-theme.fr-desktop .fr-command:hover,
+.dark-theme.fr-desktop .fr-command:focus {
+  outline: 0;
+  color: #ffffff;
+  background: #3d3d3d;
+}
+.dark-theme.fr-desktop .fr-command:hover::after,
+.dark-theme.fr-desktop .fr-command:focus::after {
+  border-top-color: #ffffff !important;
+}
+.dark-theme.fr-desktop .fr-command.fr-selected {
+  color: #ffffff;
+  background: #2e2e2e;
+}
+.dark-theme.fr-desktop .fr-command.fr-active:hover,
+.dark-theme.fr-desktop .fr-command.fr-active:focus {
+  color: #42a5f5;
+  background: #3d3d3d;
+}
+.dark-theme.fr-desktop .fr-command.fr-active.fr-selected {
+  color: #42a5f5;
+  background: #2e2e2e;
+}
+.dark-theme.fr-toolbar.fr-mobile .fr-command.fr-blink,
+.dark-theme.fr-popup.fr-mobile .fr-command.fr-blink {
+  background: transparent;
+}
+.dark-theme .fr-command.fr-btn + .fr-dropdown-menu {
+  right: auto;
+  bottom: auto;
+  height: auto;
+  border-radius: 0 0 2px 2px;
+  -moz-border-radius: 0 0 2px 2px;
+  -webkit-border-radius: 0 0 2px 2px;
+  -moz-background-clip: padding;
+  -webkit-background-clip: padding-box;
+  background-clip: padding-box;
+}
+.dark-theme .fr-command.fr-btn + .fr-dropdown-menu.test-height .fr-dropdown-wrapper {
+  height: auto;
+  max-height: 275px;
+}
+.dark-theme .fr-command.fr-btn + .fr-dropdown-menu .fr-dropdown-wrapper {
+  background: #353535;
+  padding: 0;
+  margin: auto;
+  -webkit-transition: max-height 0.2s ease 0s;
+  -moz-transition: max-height 0.2s ease 0s;
+  -ms-transition: max-height 0.2s ease 0s;
+  -o-transition: max-height 0.2s ease 0s;
+  margin-top: 0;
+  max-height: 0;
+  height: 0;
+}
+.dark-theme .fr-command.fr-btn + .fr-dropdown-menu .fr-dropdown-wrapper .fr-dropdown-content {
+  overflow: auto;
+  max-height: 275px;
+}
+.dark-theme .fr-command.fr-btn + .fr-dropdown-menu .fr-dropdown-wrapper .fr-dropdown-content ul.fr-dropdown-list {
+  margin: 0;
+  padding: 0;
+}
+.dark-theme .fr-command.fr-btn + .fr-dropdown-menu .fr-dropdown-wrapper .fr-dropdown-content ul.fr-dropdown-list li {
+  padding: 0;
+  margin: 0;
+}
+.dark-theme .fr-command.fr-btn + .fr-dropdown-menu .fr-dropdown-wrapper .fr-dropdown-content ul.fr-dropdown-list li a {
+  color: inherit;
+}
+.dark-theme .fr-command.fr-btn + .fr-dropdown-menu .fr-dropdown-wrapper .fr-dropdown-content ul.fr-dropdown-list li a.fr-active {
+  background: #2e2e2e;
+}
+.dark-theme .fr-command.fr-btn + .fr-dropdown-menu .fr-dropdown-wrapper .fr-dropdown-content ul.fr-dropdown-list li a.fr-disabled {
+  color: #808080;
+}
+.dark-theme .fr-command.fr-btn.fr-active + .fr-dropdown-menu {
+  -webkit-box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 2px 2px 1px rgba(0, 0, 0, 0.14);
+  -moz-box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 2px 2px 1px rgba(0, 0, 0, 0.14);
+  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 2px 2px 1px rgba(0, 0, 0, 0.14);
+}
+.dark-theme .fr-command.fr-btn.fr-active + .fr-dropdown-menu .fr-dropdown-wrapper {
+  height: auto;
+  max-height: 275px;
+}
+.dark-theme .fr-bottom > .fr-command.fr-btn + .fr-dropdown-menu {
+  border-radius: 2px 2px 0 0;
+  -moz-border-radius: 2px 2px 0 0;
+  -webkit-border-radius: 2px 2px 0 0;
+  -moz-background-clip: padding;
+  -webkit-background-clip: padding-box;
+  background-clip: padding-box;
+}
+.dark-theme.fr-modal {
+  color: #ffffff;
+  font-family: Arial, Helvetica, sans-serif;
+  overflow-x: auto;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: 0;
+  z-index: 2147483640;
+}
+.dark-theme.fr-modal.fr-middle .fr-modal-wrapper {
+  margin-top: 0;
+  margin-bottom: 0;
+  margin-left: auto;
+  margin-right: auto;
+}
+.dark-theme.fr-modal .fr-modal-wrapper {
+  border-radius: 2px;
+  -moz-border-radius: 2px;
+  -webkit-border-radius: 2px;
+  -moz-background-clip: padding;
+  -webkit-background-clip: padding-box;
+  background-clip: padding-box;
+  margin: 20px auto;
+  background: #ffffff;
+  -webkit-box-shadow: 0 5px 8px rgba(0, 0, 0, 0.19), 0 4px 3px 1px rgba(0, 0, 0, 0.14);
+  -moz-box-shadow: 0 5px 8px rgba(0, 0, 0, 0.19), 0 4px 3px 1px rgba(0, 0, 0, 0.14);
+  box-shadow: 0 5px 8px rgba(0, 0, 0, 0.19), 0 4px 3px 1px rgba(0, 0, 0, 0.14);
+  border: 0px;
+  border-top: 5px solid #222222;
+}
+@media (min-width: 768px) and (max-width: 991px) {
+  .dark-theme.fr-modal .fr-modal-wrapper {
+    margin: 30px auto;
+  }
+}
+@media (min-width: 992px) {
+  .dark-theme.fr-modal .fr-modal-wrapper {
+    margin: 50px auto;
+  }
+}
+.dark-theme.fr-modal .fr-modal-wrapper .fr-modal-head {
+  background: #353535;
+  -webkit-box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 2px 2px 1px rgba(0, 0, 0, 0.14);
+  -moz-box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 2px 2px 1px rgba(0, 0, 0, 0.14);
+  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 2px 2px 1px rgba(0, 0, 0, 0.14);
+  border-bottom: 0px;
+  -webkit-transition: height 0.2s ease 0s;
+  -moz-transition: height 0.2s ease 0s;
+  -ms-transition: height 0.2s ease 0s;
+  -o-transition: height 0.2s ease 0s;
+}
+.dark-theme.fr-modal .fr-modal-wrapper .fr-modal-head .fr-modal-close {
+  color: #ffffff;
+  top: 0;
+  right: 0;
+  -webkit-transition: color 0.2s ease 0s;
+  -moz-transition: color 0.2s ease 0s;
+  -ms-transition: color 0.2s ease 0s;
+  -o-transition: color 0.2s ease 0s;
+}
+.dark-theme.fr-modal .fr-modal-wrapper .fr-modal-head h4 {
+  margin: 0;
+  font-weight: 400;
+}
+.dark-theme.fr-modal .fr-modal-wrapper div.fr-modal-body:focus {
+  outline: 0;
+}
+.dark-theme.fr-modal .fr-modal-wrapper div.fr-modal-body button.fr-command {
+  color: #42a5f5;
+  -webkit-transition: background 0.2s ease 0s;
+  -moz-transition: background 0.2s ease 0s;
+  -ms-transition: background 0.2s ease 0s;
+  -o-transition: background 0.2s ease 0s;
+  border-radius: 2px;
+  -moz-border-radius: 2px;
+  -webkit-border-radius: 2px;
+  -moz-background-clip: padding;
+  -webkit-background-clip: padding-box;
+  background-clip: padding-box;
+}
+.dark-theme.fr-modal .fr-modal-wrapper div.fr-modal-body button.fr-command:hover,
+.dark-theme.fr-modal .fr-modal-wrapper div.fr-modal-body button.fr-command:focus {
+  background: #3d3d3d;
+  color: #42a5f5;
+}
+.dark-theme.fr-modal .fr-modal-wrapper div.fr-modal-body button.fr-command:active {
+  background: #2e2e2e;
+  color: #42a5f5;
+}
+.dark-theme.fr-modal .fr-modal-wrapper div.fr-modal-body button::-moz-focus-inner {
+  border: 0;
+}
+.dark-theme.dark-theme.fr-desktop .fr-modal-wrapper .fr-modal-head i:hover {
+  background: #3d3d3d;
+}
+.dark-theme.fr-overlay {
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  background: #000000;
+}
+.dark-theme.fr-popup {
+  color: #ffffff;
+  background: #353535;
+  -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 1px 1px rgba(0, 0, 0, 0.16);
+  -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 1px 1px rgba(0, 0, 0, 0.16);
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 1px 1px rgba(0, 0, 0, 0.16);
+  border-radius: 2px;
+  -moz-border-radius: 2px;
+  -webkit-border-radius: 2px;
+  -moz-background-clip: padding;
+  -webkit-background-clip: padding-box;
+  background-clip: padding-box;
+  font-family: Arial, Helvetica, sans-serif;
+  border: 0px;
+  border-top: 5px solid #222222;
+}
+.dark-theme.fr-popup .fr-input-focus {
+  background: #363636;
+}
+.dark-theme.fr-popup.fr-above {
+  border-top: 0;
+  border-bottom: 5px solid #222222;
+  -webkit-box-shadow: 0 -1px 3px rgba(0, 0, 0, 0.12), 0 -1px 1px 1px rgba(0, 0, 0, 0.16);
+  -moz-box-shadow: 0 -1px 3px rgba(0, 0, 0, 0.12), 0 -1px 1px 1px rgba(0, 0, 0, 0.16);
+  box-shadow: 0 -1px 3px rgba(0, 0, 0, 0.12), 0 -1px 1px 1px rgba(0, 0, 0, 0.16);
+}
+.dark-theme.fr-popup .fr-input-line {
+  padding: 8px 0;
+}
+.dark-theme.fr-popup .fr-input-line input[type="text"],
+.dark-theme.fr-popup .fr-input-line textarea {
+  margin: 0px 0 1px 0;
+  border-bottom: solid 1px #bdbdbd;
+  color: #ffffff;
+}
+.dark-theme.fr-popup .fr-input-line input[type="text"]:focus,
+.dark-theme.fr-popup .fr-input-line textarea:focus {
+  border-bottom: solid 2px #42a5f5;
+}
+.dark-theme.fr-popup .fr-input-line input + label,
+.dark-theme.fr-popup .fr-input-line textarea + label {
+  top: 0;
+  left: 0;
+  -webkit-transition: color 0.2s ease 0s;
+  -moz-transition: color 0.2s ease 0s;
+  -ms-transition: color 0.2s ease 0s;
+  -o-transition: color 0.2s ease 0s;
+  background: #353535;
+}
+.dark-theme.fr-popup .fr-input-line input.fr-not-empty:focus + label,
+.dark-theme.fr-popup .fr-input-line textarea.fr-not-empty:focus + label {
+  color: #42a5f5;
+}
+.dark-theme.fr-popup .fr-input-line input.fr-not-empty + label,
+.dark-theme.fr-popup .fr-input-line textarea.fr-not-empty + label {
+  color: #808080;
+}
+.dark-theme.fr-popup .fr-buttons {
+  -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 1px 1px rgba(0, 0, 0, 0.16);
+  -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 1px 1px rgba(0, 0, 0, 0.16);
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 1px 1px rgba(0, 0, 0, 0.16);
+  padding: 0 2px;
+  line-height: 0;
+  border-bottom: 0px;
+}
+.dark-theme.fr-popup .fr-layer {
+  width: 225px;
+}
+@media (min-width: 768px) {
+  .dark-theme.fr-popup .fr-layer {
+    width: 300px;
+  }
+}
+.dark-theme.fr-popup .fr-action-buttons button.fr-command {
+  color: #42a5f5;
+  -webkit-transition: background 0.2s ease 0s;
+  -moz-transition: background 0.2s ease 0s;
+  -ms-transition: background 0.2s ease 0s;
+  -o-transition: background 0.2s ease 0s;
+  border-radius: 2px;
+  -moz-border-radius: 2px;
+  -webkit-border-radius: 2px;
+  -moz-background-clip: padding;
+  -webkit-background-clip: padding-box;
+  background-clip: padding-box;
+}
+.dark-theme.fr-popup .fr-action-buttons button.fr-command:hover,
+.dark-theme.fr-popup .fr-action-buttons button.fr-command:focus {
+  background: #3d3d3d;
+  color: #42a5f5;
+}
+.dark-theme.fr-popup .fr-action-buttons button.fr-command:active {
+  background: #2e2e2e;
+  color: #42a5f5;
+}
+.dark-theme.fr-popup .fr-action-buttons button::-moz-focus-inner {
+  border: 0;
+}
+.dark-theme.fr-popup .fr-checkbox span {
+  border: solid 1px #ffffff;
+  border-radius: 2px;
+  -moz-border-radius: 2px;
+  -webkit-border-radius: 2px;
+  -moz-background-clip: padding;
+  -webkit-background-clip: padding-box;
+  background-clip: padding-box;
+  -webkit-transition: background 0.2s ease 0s, border-color 0.2s ease 0s;
+  -moz-transition: background 0.2s ease 0s, border-color 0.2s ease 0s;
+  -ms-transition: background 0.2s ease 0s, border-color 0.2s ease 0s;
+  -o-transition: background 0.2s ease 0s, border-color 0.2s ease 0s;
+}
+.dark-theme.fr-popup .fr-checkbox input {
+  margin: 0;
+  padding: 0;
+}
+.dark-theme.fr-popup .fr-checkbox input:checked + span {
+  background: #42a5f5;
+  border-color: #42a5f5;
+}
+.dark-theme.fr-popup .fr-checkbox input:focus + span {
+  border-color: #42a5f5;
+}
+.dark-theme.fr-popup.fr-rtl .fr-input-line input + label,
+.dark-theme.fr-popup.fr-rtl .fr-input-line textarea + label {
+  left: auto;
+  right: 0;
+}
+.dark-theme.fr-popup .fr-arrow {
+  width: 0;
+  height: 0;
+  border-left: 5px solid transparent;
+  border-right: 5px solid transparent;
+  border-bottom: 5px solid #222222;
+  top: -9px;
+  margin-left: -5px;
+}
+.dark-theme.fr-popup.fr-above .fr-arrow {
+  top: auto;
+  bottom: -9px;
+  border-bottom: 0;
+  border-top: 5px solid #222222;
+}
+.dark-theme.fr-toolbar {
+  color: #ffffff;
+  background: #353535;
+  font-family: Arial, Helvetica, sans-serif;
+  padding: 0 2px;
+  border-radius: 2px;
+  -moz-border-radius: 2px;
+  -webkit-border-radius: 2px;
+  -moz-background-clip: padding;
+  -webkit-background-clip: padding-box;
+  background-clip: padding-box;
+  -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 1px 1px rgba(0, 0, 0, 0.16);
+  -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 1px 1px rgba(0, 0, 0, 0.16);
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 1px 1px rgba(0, 0, 0, 0.16);
+  border: 0px;
+  border-top: 5px solid #222222;
+}
+.dark-theme.fr-toolbar.fr-inline .fr-arrow {
+  width: 0;
+  height: 0;
+  border-left: 5px solid transparent;
+  border-right: 5px solid transparent;
+  border-bottom: 5px solid #222222;
+  top: -9px;
+  margin-left: -5px;
+}
+.dark-theme.fr-toolbar.fr-inline.fr-above {
+  -webkit-box-shadow: 0 -1px 3px rgba(0, 0, 0, 0.12), 0 -1px 1px 1px rgba(0, 0, 0, 0.16);
+  -moz-box-shadow: 0 -1px 3px rgba(0, 0, 0, 0.12), 0 -1px 1px 1px rgba(0, 0, 0, 0.16);
+  box-shadow: 0 -1px 3px rgba(0, 0, 0, 0.12), 0 -1px 1px 1px rgba(0, 0, 0, 0.16);
+  border-bottom: 5px solid #222222;
+  border-top: 0;
+}
+.dark-theme.fr-toolbar.fr-inline.fr-above .fr-arrow {
+  top: auto;
+  bottom: -9px;
+  border-bottom: 0;
+  border-top-color: inherit;
+  border-top-width: 5px;
+}
+.dark-theme.fr-toolbar.fr-top {
+  top: 0;
+  border-radius: 2px 2px 0 0;
+  -moz-border-radius: 2px 2px 0 0;
+  -webkit-border-radius: 2px 2px 0 0;
+  -moz-background-clip: padding;
+  -webkit-background-clip: padding-box;
+  background-clip: padding-box;
+  -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 1px 1px rgba(0, 0, 0, 0.16);
+  -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 1px 1px rgba(0, 0, 0, 0.16);
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 1px 1px rgba(0, 0, 0, 0.16);
+}
+.dark-theme.fr-toolbar.fr-bottom {
+  bottom: 0;
+  border-radius: 0 0 2px 2px;
+  -moz-border-radius: 0 0 2px 2px;
+  -webkit-border-radius: 0 0 2px 2px;
+  -moz-background-clip: padding;
+  -webkit-background-clip: padding-box;
+  background-clip: padding-box;
+  -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 1px 1px rgba(0, 0, 0, 0.16);
+  -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 1px 1px rgba(0, 0, 0, 0.16);
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 1px 1px rgba(0, 0, 0, 0.16);
+}
+.dark-theme .fr-separator {
+  background: #595959;
+}
+.dark-theme .fr-separator.fr-vs {
+  height: 34px;
+  width: 1px;
+  margin: 2px;
+}
+.dark-theme .fr-separator.fr-hs {
+  height: 1px;
+  width: calc(100% - (2 * 2px));
+  margin: 0 2px;
+}

Разница между файлами не показана из-за своего большого размера
+ 6 - 0
modules/boonex/froala/plugins/froala/css/themes/dark.min.css


+ 1281 - 0
modules/boonex/froala/plugins/froala/css/themes/gray.css

@@ -0,0 +1,1281 @@
+/*!
+ * froala_editor v2.7.5 (https://www.froala.com/wysiwyg-editor)
+ * License https://froala.com/wysiwyg-editor/terms/
+ * Copyright 2014-2018 Froala Labs
+ */
+
+.clearfix::after {
+  clear: both;
+  display: block;
+  content: "";
+  height: 0;
+}
+.hide-by-clipping {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  border: 0;
+}
+.gray-theme.fr-box.fr-basic .fr-element {
+  color: #000000;
+  padding: 16px;
+  overflow-x: auto;
+  min-height: 52px;
+}
+.gray-theme .fr-element {
+  -webkit-user-select: auto;
+}
+.gray-theme.fr-box a.fr-floating-btn {
+  -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 1px 1px rgba(0, 0, 0, 0.16);
+  -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 1px 1px rgba(0, 0, 0, 0.16);
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 1px 1px rgba(0, 0, 0, 0.16);
+  height: 32px;
+  width: 32px;
+  background: #ffffff;
+  color: #0097a7;
+  -webkit-transition: background 0.2s ease 0s, color 0.2s ease 0s, transform 0.2s ease 0s;
+  -moz-transition: background 0.2s ease 0s, color 0.2s ease 0s, transform 0.2s ease 0s;
+  -ms-transition: background 0.2s ease 0s, color 0.2s ease 0s, transform 0.2s ease 0s;
+  -o-transition: background 0.2s ease 0s, color 0.2s ease 0s, transform 0.2s ease 0s;
+  left: 0;
+  top: 0;
+  line-height: 32px;
+  border: none;
+}
+.gray-theme.fr-box a.fr-floating-btn svg {
+  -webkit-transition: transform 0.2s ease 0s;
+  -moz-transition: transform 0.2s ease 0s;
+  -ms-transition: transform 0.2s ease 0s;
+  -o-transition: transform 0.2s ease 0s;
+  fill: #0097a7;
+}
+.gray-theme.fr-box a.fr-floating-btn i,
+.gray-theme.fr-box a.fr-floating-btn svg {
+  font-size: 14px;
+  line-height: 32px;
+}
+.gray-theme.fr-box a.fr-floating-btn:hover {
+  background: #e6e6e6;
+}
+.gray-theme.fr-box a.fr-floating-btn:hover svg {
+  fill: #0097a7;
+}
+.gray-theme .fr-wrapper .fr-placeholder {
+  font-size: 12px;
+  color: #aaaaaa;
+  top: 0;
+  left: 0;
+  right: 0;
+}
+.gray-theme .fr-wrapper ::-moz-selection {
+  background: #b5d6fd;
+  color: #000000;
+}
+.gray-theme .fr-wrapper ::selection {
+  background: #b5d6fd;
+  color: #000000;
+}
+.gray-theme.fr-box.fr-basic .fr-wrapper {
+  background: #ffffff;
+  border: 0px;
+  border-top: 0;
+  top: 0;
+  left: 0;
+}
+.gray-theme.fr-box.fr-basic.fr-top .fr-wrapper {
+  border-top: 0;
+  border-radius: 0 0 2px 2px;
+  -moz-border-radius: 0 0 2px 2px;
+  -webkit-border-radius: 0 0 2px 2px;
+  -moz-background-clip: padding;
+  -webkit-background-clip: padding-box;
+  background-clip: padding-box;
+  -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 1px 1px rgba(0, 0, 0, 0.16);
+  -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 1px 1px rgba(0, 0, 0, 0.16);
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 1px 1px rgba(0, 0, 0, 0.16);
+}
+.gray-theme.fr-box.fr-basic.fr-bottom .fr-wrapper {
+  border-bottom: 0;
+  border-radius: 2px 2px 0 0;
+  -moz-border-radius: 2px 2px 0 0;
+  -webkit-border-radius: 2px 2px 0 0;
+  -moz-background-clip: padding;
+  -webkit-background-clip: padding-box;
+  background-clip: padding-box;
+  -webkit-box-shadow: 0 -1px 3px rgba(0, 0, 0, 0.12), 0 -1px 1px 1px rgba(0, 0, 0, 0.16);
+  -moz-box-shadow: 0 -1px 3px rgba(0, 0, 0, 0.12), 0 -1px 1px 1px rgba(0, 0, 0, 0.16);
+  box-shadow: 0 -1px 3px rgba(0, 0, 0, 0.12), 0 -1px 1px 1px rgba(0, 0, 0, 0.16);
+}
+.gray-theme .fr-sticky-on.fr-sticky-ios {
+  left: 0;
+  right: 0;
+}
+.gray-theme.fr-box .fr-counter {
+  color: #cccccc;
+  background: #ffffff;
+  border-top: solid 1px #ebebeb;
+  border-left: solid 1px #ebebeb;
+  border-radius: 2px 0 0 0;
+  -moz-border-radius: 2px 0 0 0;
+  -webkit-border-radius: 2px 0 0 0;
+  -moz-background-clip: padding;
+  -webkit-background-clip: padding-box;
+  background-clip: padding-box;
+}
+.gray-theme.fr-box.fr-rtl .fr-counter {
+  right: auto;
+  border-right: solid 1px #ebebeb;
+  border-radius: 0 2px 0 0;
+  -moz-border-radius: 0 2px 0 0;
+  -webkit-border-radius: 0 2px 0 0;
+  -moz-background-clip: padding;
+  -webkit-background-clip: padding-box;
+  background-clip: padding-box;
+}
+.gray-theme textarea.fr-code {
+  background: #ffffff;
+  color: #000000;
+}
+.gray-theme.fr-box.fr-code-view.fr-inline {
+  -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 1px 1px rgba(0, 0, 0, 0.16);
+  -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 1px 1px rgba(0, 0, 0, 0.16);
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 1px 1px rgba(0, 0, 0, 0.16);
+}
+.gray-theme.fr-box.fr-inline .fr-command.fr-btn.html-switch {
+  top: 0;
+  right: 0;
+  -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 1px 1px rgba(0, 0, 0, 0.16);
+  -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 1px 1px rgba(0, 0, 0, 0.16);
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 1px 1px rgba(0, 0, 0, 0.16);
+  background: #ffffff;
+  color: #37474f;
+  -moz-outline: 0;
+  outline: 0;
+  border: 0;
+  padding: 12px 12px;
+  -webkit-transition: background 0.2s ease 0s;
+  -moz-transition: background 0.2s ease 0s;
+  -ms-transition: background 0.2s ease 0s;
+  -o-transition: background 0.2s ease 0s;
+}
+.gray-theme.fr-box.fr-inline .fr-command.fr-btn.html-switch i {
+  font-size: 14px;
+  width: 14px;
+}
+.gray-theme.fr-box.fr-inline .fr-command.fr-btn.html-switch.fr-desktop:hover {
+  background: #e6e6e6;
+}
+.gray-theme.fr-popup .fr-colors-tabs {
+  -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 1px 1px rgba(0, 0, 0, 0.16);
+  -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 1px 1px rgba(0, 0, 0, 0.16);
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 1px 1px rgba(0, 0, 0, 0.16);
+}
+.gray-theme.fr-popup .fr-colors-tabs .fr-colors-tab {
+  color: #37474f;
+  padding: 8px 0;
+}
+.gray-theme.fr-popup .fr-colors-tabs .fr-colors-tab:hover,
+.gray-theme.fr-popup .fr-colors-tabs .fr-colors-tab:focus {
+  color: #0097a7;
+}
+.gray-theme.fr-popup .fr-colors-tabs .fr-colors-tab[data-param1="background"]::after {
+  bottom: 0;
+  left: 0;
+  background: #0097a7;
+  -webkit-transition: transform 0.2s ease 0s;
+  -moz-transition: transform 0.2s ease 0s;
+  -ms-transition: transform 0.2s ease 0s;
+  -o-transition: transform 0.2s ease 0s;
+}
+.gray-theme.fr-popup .fr-colors-tabs .fr-colors-tab.fr-selected-tab {
+  color: #0097a7;
+}
+.gray-theme.fr-popup .fr-color-hex-layer .fr-input-line {
+  padding: 8px 0 0;
+}
+.gray-theme.fr-popup .fr-color-hex-layer .fr-action-buttons button {
+  background-color: #0097a7;
+  border-radius: 2px;
+  -moz-border-radius: 2px;
+  -webkit-border-radius: 2px;
+  -moz-background-clip: padding;
+  -webkit-background-clip: padding-box;
+  background-clip: padding-box;
+}
+.gray-theme.fr-popup .fr-color-hex-layer .fr-action-buttons button:hover {
+  background-color: #006974;
+}
+.gray-theme.fr-popup .fr-color-set {
+  line-height: 0;
+}
+.gray-theme.fr-popup .fr-color-set > span > i,
+.gray-theme.fr-popup .fr-color-set > span > svg {
+  bottom: 0;
+  left: 0;
+}
+.gray-theme.fr-popup .fr-color-set > span .fr-selected-color {
+  color: #ffffff;
+  font-weight: 400;
+  top: 0;
+  bottom: 0;
+  right: 0;
+  left: 0;
+}
+.gray-theme.fr-popup .fr-color-set > span:hover,
+.gray-theme.fr-popup .fr-color-set > span:focus {
+  outline: 1px solid #37474f;
+}
+.gray-theme .fr-drag-helper {
+  background: #0097a7;
+  z-index: 2147483640;
+}
+.gray-theme.fr-popup .fr-link:focus {
+  outline: 0;
+  background: #e6e6e6;
+}
+.gray-theme.fr-popup .fr-file-upload-layer {
+  border: dashed 2px #b7bdc0;
+  padding: 25px 0;
+}
+.gray-theme.fr-popup .fr-file-upload-layer:hover {
+  background: #e6e6e6;
+}
+.gray-theme.fr-popup .fr-file-upload-layer.fr-drop {
+  background: #e6e6e6;
+  border-color: #0097a7;
+}
+.gray-theme.fr-popup .fr-file-upload-layer .fr-form {
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  z-index: 2147483640;
+}
+.gray-theme.fr-popup .fr-file-progress-bar-layer > h3 {
+  margin: 10px 0;
+}
+.gray-theme.fr-popup .fr-file-progress-bar-layer > div.fr-loader {
+  background: #b3e0e5;
+}
+.gray-theme.fr-popup .fr-file-progress-bar-layer > div.fr-loader span {
+  background: #0097a7;
+  -webkit-transition: width 0.2s ease 0s;
+  -moz-transition: width 0.2s ease 0s;
+  -ms-transition: width 0.2s ease 0s;
+  -o-transition: width 0.2s ease 0s;
+}
+.gray-theme.fr-popup .fr-file-progress-bar-layer > div.fr-loader.fr-indeterminate span {
+  top: 0;
+}
+.gray-theme.fr-box.fr-fullscreen {
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: 0;
+}
+.gray-theme.fr-modal .fr-modal-wrapper .fr-modal-body .fr-help-modal table tr {
+  border: 0;
+}
+.gray-theme.fr-modal .fr-modal-wrapper .fr-modal-body .fr-help-modal table tbody tr {
+  border-bottom: solid 1px #ebebeb;
+}
+.gray-theme.fr-modal .fr-modal-wrapper .fr-modal-body .fr-help-modal table tbody td:first-child {
+  color: #737e84;
+}
+.gray-theme .fr-image-resizer {
+  border: solid 1px #0097a7;
+}
+.gray-theme .fr-image-resizer .fr-handler {
+  background: #0097a7;
+  border: solid 1px #ffffff;
+}
+.gray-theme .fr-image-resizer .fr-handler {
+  width: 12px;
+  height: 12px;
+}
+.gray-theme .fr-image-resizer .fr-handler.fr-hnw {
+  left: -6px;
+  top: -6px;
+}
+.gray-theme .fr-image-resizer .fr-handler.fr-hne {
+  right: -6px;
+  top: -6px;
+}
+.gray-theme .fr-image-resizer .fr-handler.fr-hsw {
+  left: -6px;
+  bottom: -6px;
+}
+.gray-theme .fr-image-resizer .fr-handler.fr-hse {
+  right: -6px;
+  bottom: -6px;
+}
+@media (min-width: 1200px) {
+  .gray-theme .fr-image-resizer .fr-handler {
+    width: 10px;
+    height: 10px;
+  }
+  .gray-theme .fr-image-resizer .fr-handler.fr-hnw {
+    left: -5px;
+    top: -5px;
+  }
+  .gray-theme .fr-image-resizer .fr-handler.fr-hne {
+    right: -5px;
+    top: -5px;
+  }
+  .gray-theme .fr-image-resizer .fr-handler.fr-hsw {
+    left: -5px;
+    bottom: -5px;
+  }
+  .gray-theme .fr-image-resizer .fr-handler.fr-hse {
+    right: -5px;
+    bottom: -5px;
+  }
+}
+.gray-theme.fr-image-overlay {
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: 0;
+  z-index: 2147483640;
+}
+.gray-theme.fr-popup .fr-image-upload-layer {
+  border: dashed 2px #b7bdc0;
+  padding: 25px 0;
+}
+.gray-theme.fr-popup .fr-image-upload-layer:hover {
+  background: #e6e6e6;
+}
+.gray-theme.fr-popup .fr-image-upload-layer.fr-drop {
+  background: #e6e6e6;
+  border-color: #0097a7;
+}
+.gray-theme.fr-popup .fr-image-upload-layer .fr-form {
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  z-index: 2147483640;
+}
+.gray-theme.fr-popup .fr-image-progress-bar-layer > h3 {
+  margin: 10px 0;
+}
+.gray-theme.fr-popup .fr-image-progress-bar-layer > div.fr-loader {
+  background: #b3e0e5;
+}
+.gray-theme.fr-popup .fr-image-progress-bar-layer > div.fr-loader span {
+  background: #0097a7;
+  -webkit-transition: width 0.2s ease 0s;
+  -moz-transition: width 0.2s ease 0s;
+  -ms-transition: width 0.2s ease 0s;
+  -o-transition: width 0.2s ease 0s;
+}
+.gray-theme.fr-popup .fr-image-progress-bar-layer > div.fr-loader.fr-indeterminate span {
+  top: 0;
+}
+.gray-theme.fr-modal-head .fr-modal-head-line i.fr-modal-more {
+  -webkit-transition: padding 0.2s ease 0s, width 0.2s ease 0s, opacity 0.2s ease 0s;
+  -moz-transition: padding 0.2s ease 0s, width 0.2s ease 0s, opacity 0.2s ease 0s;
+  -ms-transition: padding 0.2s ease 0s, width 0.2s ease 0s, opacity 0.2s ease 0s;
+  -o-transition: padding 0.2s ease 0s, width 0.2s ease 0s, opacity 0.2s ease 0s;
+}
+.gray-theme.fr-modal-head .fr-modal-head-line i.fr-modal-more.fr-not-available {
+  opacity: 0;
+  width: 0;
+  padding: 12px 0;
+}
+.gray-theme.fr-modal-head .fr-modal-tags a {
+  opacity: 0;
+  border-radius: 2px;
+  -moz-border-radius: 2px;
+  -webkit-border-radius: 2px;
+  -moz-background-clip: padding;
+  -webkit-background-clip: padding-box;
+  background-clip: padding-box;
+  color: #0097a7;
+  -webkit-transition: opacity 0.2s ease 0s, background 0.2s ease 0s;
+  -moz-transition: opacity 0.2s ease 0s, background 0.2s ease 0s;
+  -ms-transition: opacity 0.2s ease 0s, background 0.2s ease 0s;
+  -o-transition: opacity 0.2s ease 0s, background 0.2s ease 0s;
+}
+.gray-theme.fr-modal-head .fr-modal-tags a.fr-selected-tag {
+  background: #d6d6d6;
+}
+.gray-themediv.fr-modal-body .fr-preloader {
+  margin: 50px auto;
+}
+.gray-themediv.fr-modal-body div.fr-image-list {
+  padding: 0;
+}
+.gray-themediv.fr-modal-body div.fr-image-list div.fr-image-container {
+  -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 1px 1px rgba(0, 0, 0, 0.16);
+  -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 1px 1px rgba(0, 0, 0, 0.16);
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 1px 1px rgba(0, 0, 0, 0.16);
+  border-radius: 2px;
+  -moz-border-radius: 2px;
+  -webkit-border-radius: 2px;
+  -moz-background-clip: padding;
+  -webkit-background-clip: padding-box;
+  background-clip: padding-box;
+}
+.gray-themediv.fr-modal-body div.fr-image-list div.fr-image-container.fr-image-deleting::after {
+  -webkit-transition: opacity 0.2s ease 0s;
+  -moz-transition: opacity 0.2s ease 0s;
+  -ms-transition: opacity 0.2s ease 0s;
+  -o-transition: opacity 0.2s ease 0s;
+  background: #000000;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: 0;
+}
+.gray-themediv.fr-modal-body div.fr-image-list div.fr-image-container.fr-image-deleting::before {
+  color: #ffffff;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: 0;
+  margin: auto;
+}
+.gray-themediv.fr-modal-body div.fr-image-list div.fr-image-container.fr-empty {
+  background: #cccccc;
+}
+.gray-themediv.fr-modal-body div.fr-image-list div.fr-image-container.fr-empty::after {
+  margin: auto;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+}
+.gray-themediv.fr-modal-body div.fr-image-list div.fr-image-container img {
+  -webkit-transition: opacity 0.2s ease 0s, filter 0.2s ease 0s;
+  -moz-transition: opacity 0.2s ease 0s, filter 0.2s ease 0s;
+  -ms-transition: opacity 0.2s ease 0s, filter 0.2s ease 0s;
+  -o-transition: opacity 0.2s ease 0s, filter 0.2s ease 0s;
+}
+.gray-themediv.fr-modal-body div.fr-image-list div.fr-image-container .fr-delete-img,
+.gray-themediv.fr-modal-body div.fr-image-list div.fr-image-container .fr-insert-img {
+  -webkit-transition: background 0.2s ease 0s, color 0.2s ease 0s;
+  -moz-transition: background 0.2s ease 0s, color 0.2s ease 0s;
+  -ms-transition: background 0.2s ease 0s, color 0.2s ease 0s;
+  -o-transition: background 0.2s ease 0s, color 0.2s ease 0s;
+  -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 1px 1px rgba(0, 0, 0, 0.16);
+  -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 1px 1px rgba(0, 0, 0, 0.16);
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 1px 1px rgba(0, 0, 0, 0.16);
+  margin: 0;
+}
+.gray-themediv.fr-modal-body div.fr-image-list div.fr-image-container .fr-delete-img {
+  background: #b8312f;
+  color: #ffffff;
+}
+.gray-themediv.fr-modal-body div.fr-image-list div.fr-image-container .fr-insert-img {
+  background: #f5f5f5;
+  color: #0097a7;
+}
+.gray-theme.gray-theme.fr-desktop .fr-modal-wrapper .fr-modal-head .fr-modal-tags a:hover {
+  background: #e6e6e6;
+}
+.gray-theme.gray-theme.fr-desktop .fr-modal-wrapper .fr-modal-head .fr-modal-tags a.fr-selected-tag {
+  background: #d6d6d6;
+}
+.gray-theme.gray-theme.fr-desktop .fr-modal-wrapper div.fr-modal-body div.fr-image-list div.fr-image-container .fr-delete-img:hover {
+  background: #bf4644;
+  color: #ffffff;
+}
+.gray-theme.gray-theme.fr-desktop .fr-modal-wrapper div.fr-modal-body div.fr-image-list div.fr-image-container .fr-insert-img:hover {
+  background: #e6e6e6;
+}
+.gray-theme .fr-line-breaker {
+  border-top: 1px solid #0097a7;
+}
+.gray-theme .fr-line-breaker a.fr-floating-btn {
+  left: calc(50% - (32px / 2));
+  top: -16px;
+}
+.gray-theme .fr-qi-helper {
+  padding-left: 16px;
+}
+.gray-theme .fr-qi-helper a.fr-btn.fr-floating-btn {
+  color: #37474f;
+}
+.gray-theme.fr-modal .fr-modal-wrapper .fr-modal-body .fr-special-characters-modal .fr-special-character {
+  border: 1px solid #cccccc;
+}
+.gray-theme .fr-element table td.fr-selected-cell,
+.gray-theme .fr-element table th.fr-selected-cell {
+  border: 1px double #0097a7;
+}
+.gray-theme .fr-table-resizer div {
+  border-right: 1px solid #0097a7;
+}
+.gray-theme.fr-popup .fr-table-colors-hex-layer .fr-input-line {
+  padding: 8px 0 0;
+}
+.gray-theme.fr-popup .fr-table-colors-hex-layer .fr-action-buttons button {
+  background-color: #0097a7;
+  border-radius: 2px;
+  -moz-border-radius: 2px;
+  -webkit-border-radius: 2px;
+  -moz-background-clip: padding;
+  -webkit-background-clip: padding-box;
+  background-clip: padding-box;
+}
+.gray-theme.fr-popup .fr-table-colors-hex-layer .fr-action-buttons button:hover {
+  background-color: #006974;
+}
+.gray-theme.fr-popup .fr-table-size .fr-select-table-size {
+  line-height: 0;
+}
+.gray-theme.fr-popup .fr-table-size .fr-select-table-size > span {
+  padding: 0px 4px 4px 0;
+}
+.gray-theme.fr-popup .fr-table-size .fr-select-table-size > span > span {
+  border: 1px solid #dddddd;
+}
+.gray-theme.fr-popup .fr-table-size .fr-select-table-size > span.hover > span {
+  background: rgba(0, 151, 167, 0.3);
+  border: solid 1px #0097a7;
+}
+.gray-theme.fr-popup .fr-table-colors {
+  line-height: 0;
+}
+.gray-theme.fr-popup .fr-table-colors > span > i {
+  bottom: 0;
+  left: 0;
+}
+.gray-theme.fr-popup .fr-table-colors > span:focus {
+  outline: 1px solid #37474f;
+}
+.gray-theme .fr-element .fr-video::after {
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+}
+.gray-theme.fr-box .fr-video-resizer {
+  border: solid 1px #0097a7;
+}
+.gray-theme.fr-box .fr-video-resizer .fr-handler {
+  background: #0097a7;
+  border: solid 1px #ffffff;
+}
+.gray-theme.fr-box .fr-video-resizer .fr-handler {
+  width: 12px;
+  height: 12px;
+}
+.gray-theme.fr-box .fr-video-resizer .fr-handler.fr-hnw {
+  left: -6px;
+  top: -6px;
+}
+.gray-theme.fr-box .fr-video-resizer .fr-handler.fr-hne {
+  right: -6px;
+  top: -6px;
+}
+.gray-theme.fr-box .fr-video-resizer .fr-handler.fr-hsw {
+  left: -6px;
+  bottom: -6px;
+}
+.gray-theme.fr-box .fr-video-resizer .fr-handler.fr-hse {
+  right: -6px;
+  bottom: -6px;
+}
+@media (min-width: 1200px) {
+  .gray-theme.fr-box .fr-video-resizer .fr-handler {
+    width: 10px;
+    height: 10px;
+  }
+  .gray-theme.fr-box .fr-video-resizer .fr-handler.fr-hnw {
+    left: -5px;
+    top: -5px;
+  }
+  .gray-theme.fr-box .fr-video-resizer .fr-handler.fr-hne {
+    right: -5px;
+    top: -5px;
+  }
+  .gray-theme.fr-box .fr-video-resizer .fr-handler.fr-hsw {
+    left: -5px;
+    bottom: -5px;
+  }
+  .gray-theme.fr-box .fr-video-resizer .fr-handler.fr-hse {
+    right: -5px;
+    bottom: -5px;
+  }
+}
+.gray-theme.fr-popup .fr-video-upload-layer {
+  border: dashed 2px #b7bdc0;
+  padding: 25px 0;
+}
+.gray-theme.fr-popup .fr-video-upload-layer:hover {
+  background: #e6e6e6;
+}
+.gray-theme.fr-popup .fr-video-upload-layer.fr-drop {
+  background: #e6e6e6;
+  border-color: #0097a7;
+}
+.gray-theme.fr-popup .fr-video-upload-layer .fr-form {
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  z-index: 2147483640;
+}
+.gray-theme.fr-popup .fr-video-progress-bar-layer > h3 {
+  margin: 10px 0;
+}
+.gray-theme.fr-popup .fr-video-progress-bar-layer > div.fr-loader {
+  background: #b3e0e5;
+}
+.gray-theme.fr-popup .fr-video-progress-bar-layer > div.fr-loader span {
+  background: #0097a7;
+  -webkit-transition: width 0.2s ease 0s;
+  -moz-transition: width 0.2s ease 0s;
+  -ms-transition: width 0.2s ease 0s;
+  -o-transition: width 0.2s ease 0s;
+}
+.gray-theme.fr-popup .fr-video-progress-bar-layer > div.fr-loader.fr-indeterminate span {
+  top: 0;
+}
+.gray-theme.fr-video-overlay {
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: 0;
+  z-index: 2147483640;
+}
+.gray-theme .fr-view span[style~="color:"] a {
+  color: inherit;
+}
+.gray-theme .fr-view strong {
+  font-weight: 700;
+}
+.gray-theme .fr-view table.fr-alternate-rows tbody tr:nth-child(2n) {
+  background: #f5f5f5;
+}
+.gray-theme .fr-view table td,
+.gray-theme .fr-view table th {
+  border: 1px solid #dddddd;
+}
+.gray-theme .fr-view table th {
+  background: #e6e6e6;
+}
+.gray-theme .fr-view[dir="rtl"] blockquote {
+  border-right: solid 2px #5e35b1;
+  margin-right: 0;
+}
+.gray-theme .fr-view[dir="rtl"] blockquote blockquote {
+  border-color: #00bcd4;
+}
+.gray-theme .fr-view[dir="rtl"] blockquote blockquote blockquote {
+  border-color: #43a047;
+}
+.gray-theme .fr-view blockquote {
+  border-left: solid 2px #5e35b1;
+  margin-left: 0;
+  color: #5e35b1;
+}
+.gray-theme .fr-view blockquote blockquote {
+  border-color: #00bcd4;
+  color: #00bcd4;
+}
+.gray-theme .fr-view blockquote blockquote blockquote {
+  border-color: #43a047;
+  color: #43a047;
+}
+.gray-theme .fr-view span.fr-emoticon {
+  line-height: 0;
+}
+.gray-theme .fr-view span.fr-emoticon.fr-emoticon-img {
+  font-size: inherit;
+}
+.gray-theme .fr-view .fr-text-bordered {
+  padding: 10px 0;
+}
+.gray-theme .fr-view .fr-img-caption .fr-img-wrap {
+  margin: auto;
+}
+.gray-theme .fr-view .fr-img-caption .fr-img-wrap img {
+  margin: auto;
+}
+.gray-theme .fr-view .fr-img-caption .fr-img-wrap > span {
+  margin: auto;
+}
+.gray-theme .fr-element .fr-embedly::after {
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+}
+.gray-theme.fr-box .fr-embedly-resizer {
+  border: solid 1px #0097a7;
+}
+.gray-theme .examples-variante > a {
+  font-size: 14px;
+  font-family: Arial, Helvetica, sans-serif;
+}
+.gray-theme .sc-cm-holder > .sc-cm {
+  border-top: 5px solid #bdbdbd !important;
+}
+.gray-theme .sc-cm__item_dropdown:hover > a,
+.gray-theme .sc-cm a:hover {
+  background-color: #e6e6e6 !important;
+}
+.gray-theme .sc-cm__item_active > a,
+.gray-theme .sc-cm__item_active > a:hover,
+.gray-theme .sc-cm a:active,
+.gray-theme .sc-cm a:focus {
+  background-color: #d6d6d6 !important;
+}
+.gray-theme .sc-cm-holder > .sc-cm:before {
+  background-color: #e6e6e6 !important;
+}
+.gray-theme .fr-tooltip {
+  top: 0;
+  left: 0;
+  border-radius: 2px;
+  -moz-border-radius: 2px;
+  -webkit-border-radius: 2px;
+  -moz-background-clip: padding;
+  -webkit-background-clip: padding-box;
+  background-clip: padding-box;
+  -webkit-box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 2px 2px 1px rgba(0, 0, 0, 0.14);
+  -moz-box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 2px 2px 1px rgba(0, 0, 0, 0.14);
+  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 2px 2px 1px rgba(0, 0, 0, 0.14);
+  background: #222222;
+  color: #ffffff;
+  font-size: 11px;
+  line-height: 22px;
+  font-family: Arial, Helvetica, sans-serif;
+  -webkit-transition: opacity 0.2s ease 0s;
+  -moz-transition: opacity 0.2s ease 0s;
+  -ms-transition: opacity 0.2s ease 0s;
+  -o-transition: opacity 0.2s ease 0s;
+}
+.gray-theme.fr-toolbar .fr-command.fr-btn,
+.gray-theme.fr-popup .fr-command.fr-btn {
+  color: #37474f;
+  -moz-outline: 0;
+  outline: 0;
+  border: 0;
+  margin: 0px 2px;
+  -webkit-transition: background 0.2s ease 0s;
+  -moz-transition: background 0.2s ease 0s;
+  -ms-transition: background 0.2s ease 0s;
+  -o-transition: background 0.2s ease 0s;
+  padding: 0;
+  width: 38px;
+  height: 38px;
+}
+.gray-theme.fr-toolbar .fr-command.fr-btn::-moz-focus-inner,
+.gray-theme.fr-popup .fr-command.fr-btn::-moz-focus-inner {
+  border: 0;
+}
+.gray-theme.fr-toolbar .fr-command.fr-btn.fr-btn-text,
+.gray-theme.fr-popup .fr-command.fr-btn.fr-btn-text {
+  width: auto;
+}
+.gray-theme.fr-toolbar .fr-command.fr-btn i,
+.gray-theme.fr-popup .fr-command.fr-btn i,
+.gray-theme.fr-toolbar .fr-command.fr-btn svg,
+.gray-theme.fr-popup .fr-command.fr-btn svg {
+  font-size: 14px;
+  width: 14px;
+  margin: 12px 12px;
+}
+.gray-theme.fr-toolbar .fr-command.fr-btn span,
+.gray-theme.fr-popup .fr-command.fr-btn span {
+  font-size: 14px;
+  line-height: 17px;
+  min-width: 34px;
+  height: 17px;
+  padding: 0 2px;
+}
+.gray-theme.fr-toolbar .fr-command.fr-btn img,
+.gray-theme.fr-popup .fr-command.fr-btn img {
+  margin: 12px 12px;
+  width: 14px;
+}
+.gray-theme.fr-toolbar .fr-command.fr-btn.fr-active,
+.gray-theme.fr-popup .fr-command.fr-btn.fr-active {
+  color: #0097a7;
+  background: transparent;
+}
+.gray-theme.fr-toolbar .fr-command.fr-btn.fr-dropdown.fr-selection,
+.gray-theme.fr-popup .fr-command.fr-btn.fr-dropdown.fr-selection {
+  width: auto;
+}
+.gray-theme.fr-toolbar .fr-command.fr-btn.fr-dropdown i,
+.gray-theme.fr-popup .fr-command.fr-btn.fr-dropdown i,
+.gray-theme.fr-toolbar .fr-command.fr-btn.fr-dropdown span,
+.gray-theme.fr-popup .fr-command.fr-btn.fr-dropdown span,
+.gray-theme.fr-toolbar .fr-command.fr-btn.fr-dropdown img,
+.gray-theme.fr-popup .fr-command.fr-btn.fr-dropdown img,
+.gray-theme.fr-toolbar .fr-command.fr-btn.fr-dropdown svg,
+.gray-theme.fr-popup .fr-command.fr-btn.fr-dropdown svg {
+  margin-left: 8px;
+  margin-right: 16px;
+}
+.gray-theme.fr-toolbar .fr-command.fr-btn.fr-dropdown.fr-active,
+.gray-theme.fr-popup .fr-command.fr-btn.fr-dropdown.fr-active {
+  color: #37474f;
+  background: #d6d6d6;
+}
+.gray-theme.fr-toolbar .fr-command.fr-btn.fr-dropdown.fr-active:hover,
+.gray-theme.fr-popup .fr-command.fr-btn.fr-dropdown.fr-active:hover,
+.gray-theme.fr-toolbar .fr-command.fr-btn.fr-dropdown.fr-active:focus,
+.gray-theme.fr-popup .fr-command.fr-btn.fr-dropdown.fr-active:focus {
+  background: #d6d6d6 !important;
+  color: #37474f !important;
+}
+.gray-theme.fr-toolbar .fr-command.fr-btn.fr-dropdown.fr-active:hover::after,
+.gray-theme.fr-popup .fr-command.fr-btn.fr-dropdown.fr-active:hover::after,
+.gray-theme.fr-toolbar .fr-command.fr-btn.fr-dropdown.fr-active:focus::after,
+.gray-theme.fr-popup .fr-command.fr-btn.fr-dropdown.fr-active:focus::after {
+  border-top-color: #37474f !important;
+}
+.gray-theme.fr-toolbar .fr-command.fr-btn.fr-dropdown::after,
+.gray-theme.fr-popup .fr-command.fr-btn.fr-dropdown::after {
+  width: 0;
+  height: 0;
+  border-left: 4px solid transparent;
+  border-right: 4px solid transparent;
+  border-top: 4px solid #37474f;
+  right: 4px;
+  top: 17px;
+}
+.gray-theme.fr-toolbar .fr-command.fr-btn.fr-disabled,
+.gray-theme.fr-popup .fr-command.fr-btn.fr-disabled {
+  color: #b7bdc0;
+}
+.gray-theme.fr-toolbar .fr-command.fr-btn.fr-disabled::after,
+.gray-theme.fr-popup .fr-command.fr-btn.fr-disabled::after {
+  border-top-color: #b7bdc0 !important;
+}
+.gray-theme.fr-toolbar.fr-disabled .fr-btn,
+.gray-theme.fr-popup.fr-disabled .fr-btn,
+.gray-theme.fr-toolbar.fr-disabled .fr-btn.fr-active,
+.gray-theme.fr-popup.fr-disabled .fr-btn.fr-active {
+  color: #b7bdc0;
+}
+.gray-theme.fr-toolbar.fr-disabled .fr-btn.fr-dropdown::after,
+.gray-theme.fr-popup.fr-disabled .fr-btn.fr-dropdown::after,
+.gray-theme.fr-toolbar.fr-disabled .fr-btn.fr-active.fr-dropdown::after,
+.gray-theme.fr-popup.fr-disabled .fr-btn.fr-active.fr-dropdown::after {
+  border-top-color: #b7bdc0;
+}
+.gray-theme.fr-desktop .fr-command:hover,
+.gray-theme.fr-desktop .fr-command:focus {
+  outline: 0;
+  color: #37474f;
+  background: #e6e6e6;
+}
+.gray-theme.fr-desktop .fr-command:hover::after,
+.gray-theme.fr-desktop .fr-command:focus::after {
+  border-top-color: #37474f !important;
+}
+.gray-theme.fr-desktop .fr-command.fr-selected {
+  color: #37474f;
+  background: #d6d6d6;
+}
+.gray-theme.fr-desktop .fr-command.fr-active:hover,
+.gray-theme.fr-desktop .fr-command.fr-active:focus {
+  color: #0097a7;
+  background: #e6e6e6;
+}
+.gray-theme.fr-desktop .fr-command.fr-active.fr-selected {
+  color: #0097a7;
+  background: #d6d6d6;
+}
+.gray-theme.fr-toolbar.fr-mobile .fr-command.fr-blink,
+.gray-theme.fr-popup.fr-mobile .fr-command.fr-blink {
+  background: transparent;
+}
+.gray-theme .fr-command.fr-btn + .fr-dropdown-menu {
+  right: auto;
+  bottom: auto;
+  height: auto;
+  border-radius: 0 0 2px 2px;
+  -moz-border-radius: 0 0 2px 2px;
+  -webkit-border-radius: 0 0 2px 2px;
+  -moz-background-clip: padding;
+  -webkit-background-clip: padding-box;
+  background-clip: padding-box;
+}
+.gray-theme .fr-command.fr-btn + .fr-dropdown-menu.test-height .fr-dropdown-wrapper {
+  height: auto;
+  max-height: 275px;
+}
+.gray-theme .fr-command.fr-btn + .fr-dropdown-menu .fr-dropdown-wrapper {
+  background: #f5f5f5;
+  padding: 0;
+  margin: auto;
+  -webkit-transition: max-height 0.2s ease 0s;
+  -moz-transition: max-height 0.2s ease 0s;
+  -ms-transition: max-height 0.2s ease 0s;
+  -o-transition: max-height 0.2s ease 0s;
+  margin-top: 0;
+  max-height: 0;
+  height: 0;
+}
+.gray-theme .fr-command.fr-btn + .fr-dropdown-menu .fr-dropdown-wrapper .fr-dropdown-content {
+  overflow: auto;
+  max-height: 275px;
+}
+.gray-theme .fr-command.fr-btn + .fr-dropdown-menu .fr-dropdown-wrapper .fr-dropdown-content ul.fr-dropdown-list {
+  margin: 0;
+  padding: 0;
+}
+.gray-theme .fr-command.fr-btn + .fr-dropdown-menu .fr-dropdown-wrapper .fr-dropdown-content ul.fr-dropdown-list li {
+  padding: 0;
+  margin: 0;
+}
+.gray-theme .fr-command.fr-btn + .fr-dropdown-menu .fr-dropdown-wrapper .fr-dropdown-content ul.fr-dropdown-list li a {
+  color: inherit;
+}
+.gray-theme .fr-command.fr-btn + .fr-dropdown-menu .fr-dropdown-wrapper .fr-dropdown-content ul.fr-dropdown-list li a.fr-active {
+  background: #d6d6d6;
+}
+.gray-theme .fr-command.fr-btn + .fr-dropdown-menu .fr-dropdown-wrapper .fr-dropdown-content ul.fr-dropdown-list li a.fr-disabled {
+  color: #b7bdc0;
+}
+.gray-theme .fr-command.fr-btn.fr-active + .fr-dropdown-menu {
+  -webkit-box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 2px 2px 1px rgba(0, 0, 0, 0.14);
+  -moz-box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 2px 2px 1px rgba(0, 0, 0, 0.14);
+  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 2px 2px 1px rgba(0, 0, 0, 0.14);
+}
+.gray-theme .fr-command.fr-btn.fr-active + .fr-dropdown-menu .fr-dropdown-wrapper {
+  height: auto;
+  max-height: 275px;
+}
+.gray-theme .fr-bottom > .fr-command.fr-btn + .fr-dropdown-menu {
+  border-radius: 2px 2px 0 0;
+  -moz-border-radius: 2px 2px 0 0;
+  -webkit-border-radius: 2px 2px 0 0;
+  -moz-background-clip: padding;
+  -webkit-background-clip: padding-box;
+  background-clip: padding-box;
+}
+.gray-theme.fr-modal {
+  color: #37474f;
+  font-family: Arial, Helvetica, sans-serif;
+  overflow-x: auto;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: 0;
+  z-index: 2147483640;
+}
+.gray-theme.fr-modal.fr-middle .fr-modal-wrapper {
+  margin-top: 0;
+  margin-bottom: 0;
+  margin-left: auto;
+  margin-right: auto;
+}
+.gray-theme.fr-modal .fr-modal-wrapper {
+  border-radius: 2px;
+  -moz-border-radius: 2px;
+  -webkit-border-radius: 2px;
+  -moz-background-clip: padding;
+  -webkit-background-clip: padding-box;
+  background-clip: padding-box;
+  margin: 20px auto;
+  background: #ffffff;
+  -webkit-box-shadow: 0 5px 8px rgba(0, 0, 0, 0.19), 0 4px 3px 1px rgba(0, 0, 0, 0.14);
+  -moz-box-shadow: 0 5px 8px rgba(0, 0, 0, 0.19), 0 4px 3px 1px rgba(0, 0, 0, 0.14);
+  box-shadow: 0 5px 8px rgba(0, 0, 0, 0.19), 0 4px 3px 1px rgba(0, 0, 0, 0.14);
+  border: 0px;
+  border-top: 5px solid #bdbdbd;
+}
+@media (min-width: 768px) and (max-width: 991px) {
+  .gray-theme.fr-modal .fr-modal-wrapper {
+    margin: 30px auto;
+  }
+}
+@media (min-width: 992px) {
+  .gray-theme.fr-modal .fr-modal-wrapper {
+    margin: 50px auto;
+  }
+}
+.gray-theme.fr-modal .fr-modal-wrapper .fr-modal-head {
+  background: #f5f5f5;
+  -webkit-box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 2px 2px 1px rgba(0, 0, 0, 0.14);
+  -moz-box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 2px 2px 1px rgba(0, 0, 0, 0.14);
+  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 2px 2px 1px rgba(0, 0, 0, 0.14);
+  border-bottom: 0px;
+  -webkit-transition: height 0.2s ease 0s;
+  -moz-transition: height 0.2s ease 0s;
+  -ms-transition: height 0.2s ease 0s;
+  -o-transition: height 0.2s ease 0s;
+}
+.gray-theme.fr-modal .fr-modal-wrapper .fr-modal-head .fr-modal-close {
+  color: #37474f;
+  top: 0;
+  right: 0;
+  -webkit-transition: color 0.2s ease 0s;
+  -moz-transition: color 0.2s ease 0s;
+  -ms-transition: color 0.2s ease 0s;
+  -o-transition: color 0.2s ease 0s;
+}
+.gray-theme.fr-modal .fr-modal-wrapper .fr-modal-head h4 {
+  margin: 0;
+  font-weight: 400;
+}
+.gray-theme.fr-modal .fr-modal-wrapper div.fr-modal-body:focus {
+  outline: 0;
+}
+.gray-theme.fr-modal .fr-modal-wrapper div.fr-modal-body button.fr-command {
+  color: #0097a7;
+  -webkit-transition: background 0.2s ease 0s;
+  -moz-transition: background 0.2s ease 0s;
+  -ms-transition: background 0.2s ease 0s;
+  -o-transition: background 0.2s ease 0s;
+  border-radius: 2px;
+  -moz-border-radius: 2px;
+  -webkit-border-radius: 2px;
+  -moz-background-clip: padding;
+  -webkit-background-clip: padding-box;
+  background-clip: padding-box;
+}
+.gray-theme.fr-modal .fr-modal-wrapper div.fr-modal-body button.fr-command:hover,
+.gray-theme.fr-modal .fr-modal-wrapper div.fr-modal-body button.fr-command:focus {
+  background: #e6e6e6;
+  color: #0097a7;
+}
+.gray-theme.fr-modal .fr-modal-wrapper div.fr-modal-body button.fr-command:active {
+  background: #d6d6d6;
+  color: #0097a7;
+}
+.gray-theme.fr-modal .fr-modal-wrapper div.fr-modal-body button::-moz-focus-inner {
+  border: 0;
+}
+.gray-theme.gray-theme.fr-desktop .fr-modal-wrapper .fr-modal-head i:hover {
+  background: #e6e6e6;
+}
+.gray-theme.fr-overlay {
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  background: #000000;
+}
+.gray-theme.fr-popup {
+  color: #37474f;
+  background: #f5f5f5;
+  -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 1px 1px rgba(0, 0, 0, 0.16);
+  -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 1px 1px rgba(0, 0, 0, 0.16);
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 1px 1px rgba(0, 0, 0, 0.16);
+  border-radius: 2px;
+  -moz-border-radius: 2px;
+  -webkit-border-radius: 2px;
+  -moz-background-clip: padding;
+  -webkit-background-clip: padding-box;
+  background-clip: padding-box;
+  font-family: Arial, Helvetica, sans-serif;
+  border: 0px;
+  border-top: 5px solid #bdbdbd;
+}
+.gray-theme.fr-popup .fr-input-focus {
+  background: #ebebeb;
+}
+.gray-theme.fr-popup.fr-above {
+  border-top: 0;
+  border-bottom: 5px solid #bdbdbd;
+  -webkit-box-shadow: 0 -1px 3px rgba(0, 0, 0, 0.12), 0 -1px 1px 1px rgba(0, 0, 0, 0.16);
+  -moz-box-shadow: 0 -1px 3px rgba(0, 0, 0, 0.12), 0 -1px 1px 1px rgba(0, 0, 0, 0.16);
+  box-shadow: 0 -1px 3px rgba(0, 0, 0, 0.12), 0 -1px 1px 1px rgba(0, 0, 0, 0.16);
+}
+.gray-theme.fr-popup .fr-input-line {
+  padding: 8px 0;
+}
+.gray-theme.fr-popup .fr-input-line input[type="text"],
+.gray-theme.fr-popup .fr-input-line textarea {
+  margin: 0px 0 1px 0;
+  border-bottom: solid 1px #bdbdbd;
+  color: #37474f;
+}
+.gray-theme.fr-popup .fr-input-line input[type="text"]:focus,
+.gray-theme.fr-popup .fr-input-line textarea:focus {
+  border-bottom: solid 2px #0097a7;
+}
+.gray-theme.fr-popup .fr-input-line input + label,
+.gray-theme.fr-popup .fr-input-line textarea + label {
+  top: 0;
+  left: 0;
+  -webkit-transition: color 0.2s ease 0s;
+  -moz-transition: color 0.2s ease 0s;
+  -ms-transition: color 0.2s ease 0s;
+  -o-transition: color 0.2s ease 0s;
+  background: #f5f5f5;
+}
+.gray-theme.fr-popup .fr-input-line input.fr-not-empty:focus + label,
+.gray-theme.fr-popup .fr-input-line textarea.fr-not-empty:focus + label {
+  color: #0097a7;
+}
+.gray-theme.fr-popup .fr-input-line input.fr-not-empty + label,
+.gray-theme.fr-popup .fr-input-line textarea.fr-not-empty + label {
+  color: #808080;
+}
+.gray-theme.fr-popup .fr-buttons {
+  -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 1px 1px rgba(0, 0, 0, 0.16);
+  -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 1px 1px rgba(0, 0, 0, 0.16);
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 1px 1px rgba(0, 0, 0, 0.16);
+  padding: 0 2px;
+  line-height: 0;
+  border-bottom: 0px;
+}
+.gray-theme.fr-popup .fr-layer {
+  width: 225px;
+}
+@media (min-width: 768px) {
+  .gray-theme.fr-popup .fr-layer {
+    width: 300px;
+  }
+}
+.gray-theme.fr-popup .fr-action-buttons button.fr-command {
+  color: #0097a7;
+  -webkit-transition: background 0.2s ease 0s;
+  -moz-transition: background 0.2s ease 0s;
+  -ms-transition: background 0.2s ease 0s;
+  -o-transition: background 0.2s ease 0s;
+  border-radius: 2px;
+  -moz-border-radius: 2px;
+  -webkit-border-radius: 2px;
+  -moz-background-clip: padding;
+  -webkit-background-clip: padding-box;
+  background-clip: padding-box;
+}
+.gray-theme.fr-popup .fr-action-buttons button.fr-command:hover,
+.gray-theme.fr-popup .fr-action-buttons button.fr-command:focus {
+  background: #e6e6e6;
+  color: #0097a7;
+}
+.gray-theme.fr-popup .fr-action-buttons button.fr-command:active {
+  background: #d6d6d6;
+  color: #0097a7;
+}
+.gray-theme.fr-popup .fr-action-buttons button::-moz-focus-inner {
+  border: 0;
+}
+.gray-theme.fr-popup .fr-checkbox span {
+  border: solid 1px #37474f;
+  border-radius: 2px;
+  -moz-border-radius: 2px;
+  -webkit-border-radius: 2px;
+  -moz-background-clip: padding;
+  -webkit-background-clip: padding-box;
+  background-clip: padding-box;
+  -webkit-transition: background 0.2s ease 0s, border-color 0.2s ease 0s;
+  -moz-transition: background 0.2s ease 0s, border-color 0.2s ease 0s;
+  -ms-transition: background 0.2s ease 0s, border-color 0.2s ease 0s;
+  -o-transition: background 0.2s ease 0s, border-color 0.2s ease 0s;
+}
+.gray-theme.fr-popup .fr-checkbox input {
+  margin: 0;
+  padding: 0;
+}
+.gray-theme.fr-popup .fr-checkbox input:checked + span {
+  background: #0097a7;
+  border-color: #0097a7;
+}
+.gray-theme.fr-popup .fr-checkbox input:focus + span {
+  border-color: #0097a7;
+}
+.gray-theme.fr-popup.fr-rtl .fr-input-line input + label,
+.gray-theme.fr-popup.fr-rtl .fr-input-line textarea + label {
+  left: auto;
+  right: 0;
+}
+.gray-theme.fr-popup .fr-arrow {
+  width: 0;
+  height: 0;
+  border-left: 5px solid transparent;
+  border-right: 5px solid transparent;
+  border-bottom: 5px solid #bdbdbd;
+  top: -9px;
+  margin-left: -5px;
+}
+.gray-theme.fr-popup.fr-above .fr-arrow {
+  top: auto;
+  bottom: -9px;
+  border-bottom: 0;
+  border-top: 5px solid #bdbdbd;
+}
+.gray-theme.fr-toolbar {
+  color: #37474f;
+  background: #f5f5f5;
+  font-family: Arial, Helvetica, sans-serif;
+  padding: 0 2px;
+  border-radius: 2px;
+  -moz-border-radius: 2px;
+  -webkit-border-radius: 2px;
+  -moz-background-clip: padding;
+  -webkit-background-clip: padding-box;
+  background-clip: padding-box;
+  -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 1px 1px rgba(0, 0, 0, 0.16);
+  -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 1px 1px rgba(0, 0, 0, 0.16);
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 1px 1px rgba(0, 0, 0, 0.16);
+  border: 0px;
+  border-top: 5px solid #bdbdbd;
+}
+.gray-theme.fr-toolbar.fr-inline .fr-arrow {
+  width: 0;
+  height: 0;
+  border-left: 5px solid transparent;
+  border-right: 5px solid transparent;
+  border-bottom: 5px solid #bdbdbd;
+  top: -9px;
+  margin-left: -5px;
+}
+.gray-theme.fr-toolbar.fr-inline.fr-above {
+  -webkit-box-shadow: 0 -1px 3px rgba(0, 0, 0, 0.12), 0 -1px 1px 1px rgba(0, 0, 0, 0.16);
+  -moz-box-shadow: 0 -1px 3px rgba(0, 0, 0, 0.12), 0 -1px 1px 1px rgba(0, 0, 0, 0.16);
+  box-shadow: 0 -1px 3px rgba(0, 0, 0, 0.12), 0 -1px 1px 1px rgba(0, 0, 0, 0.16);
+  border-bottom: 5px solid #bdbdbd;
+  border-top: 0;
+}
+.gray-theme.fr-toolbar.fr-inline.fr-above .fr-arrow {
+  top: auto;
+  bottom: -9px;
+  border-bottom: 0;
+  border-top-color: inherit;
+  border-top-width: 5px;
+}
+.gray-theme.fr-toolbar.fr-top {
+  top: 0;
+  border-radius: 2px 2px 0 0;
+  -moz-border-radius: 2px 2px 0 0;
+  -webkit-border-radius: 2px 2px 0 0;
+  -moz-background-clip: padding;
+  -webkit-background-clip: padding-box;
+  background-clip: padding-box;
+  -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 1px 1px rgba(0, 0, 0, 0.16);
+  -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 1px 1px rgba(0, 0, 0, 0.16);
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 1px 1px rgba(0, 0, 0, 0.16);
+}
+.gray-theme.fr-toolbar.fr-bottom {
+  bottom: 0;
+  border-radius: 0 0 2px 2px;
+  -moz-border-radius: 0 0 2px 2px;
+  -webkit-border-radius: 0 0 2px 2px;
+  -moz-background-clip: padding;
+  -webkit-background-clip: padding-box;
+  background-clip: padding-box;
+  -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 1px 1px rgba(0, 0, 0, 0.16);
+  -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 1px 1px rgba(0, 0, 0, 0.16);
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 1px 1px rgba(0, 0, 0, 0.16);
+}
+.gray-theme .fr-separator {
+  background: #ebebeb;
+}
+.gray-theme .fr-separator.fr-vs {
+  height: 34px;
+  width: 1px;
+  margin: 2px;
+}
+.gray-theme .fr-separator.fr-hs {
+  height: 1px;
+  width: calc(100% - (2 * 2px));
+  margin: 0 2px;
+}

Разница между файлами не показана из-за своего большого размера
+ 6 - 0
modules/boonex/froala/plugins/froala/css/themes/gray.min.css


+ 1281 - 0
modules/boonex/froala/plugins/froala/css/themes/red.css

@@ -0,0 +1,1281 @@
+/*!
+ * froala_editor v2.7.5 (https://www.froala.com/wysiwyg-editor)
+ * License https://froala.com/wysiwyg-editor/terms/
+ * Copyright 2014-2018 Froala Labs
+ */
+
+.clearfix::after {
+  clear: both;
+  display: block;
+  content: "";
+  height: 0;
+}
+.hide-by-clipping {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  border: 0;
+}
+.red-theme.fr-box.fr-basic .fr-element {
+  color: #000000;
+  padding: 16px;
+  overflow-x: auto;
+  min-height: 52px;
+}
+.red-theme .fr-element {
+  -webkit-user-select: auto;
+}
+.red-theme.fr-box a.fr-floating-btn {
+  -webkit-box-shadow: none;
+  -moz-box-shadow: none;
+  box-shadow: none;
+  height: 32px;
+  width: 32px;
+  background: #ffffff;
+  color: #ffca28;
+  -webkit-transition: background 0.2s ease 0s, color 0.2s ease 0s, transform 0.2s ease 0s;
+  -moz-transition: background 0.2s ease 0s, color 0.2s ease 0s, transform 0.2s ease 0s;
+  -ms-transition: background 0.2s ease 0s, color 0.2s ease 0s, transform 0.2s ease 0s;
+  -o-transition: background 0.2s ease 0s, color 0.2s ease 0s, transform 0.2s ease 0s;
+  left: 0;
+  top: 0;
+  line-height: 32px;
+  border: solid 1px #cccccc;
+}
+.red-theme.fr-box a.fr-floating-btn svg {
+  -webkit-transition: transform 0.2s ease 0s;
+  -moz-transition: transform 0.2s ease 0s;
+  -ms-transition: transform 0.2s ease 0s;
+  -o-transition: transform 0.2s ease 0s;
+  fill: #ffca28;
+}
+.red-theme.fr-box a.fr-floating-btn i,
+.red-theme.fr-box a.fr-floating-btn svg {
+  font-size: 14px;
+  line-height: 32px;
+}
+.red-theme.fr-box a.fr-floating-btn:hover {
+  background: #ebebeb;
+}
+.red-theme.fr-box a.fr-floating-btn:hover svg {
+  fill: #ffca28;
+}
+.red-theme .fr-wrapper .fr-placeholder {
+  font-size: 12px;
+  color: #aaaaaa;
+  top: 0;
+  left: 0;
+  right: 0;
+}
+.red-theme .fr-wrapper ::-moz-selection {
+  background: #b5d6fd;
+  color: #000000;
+}
+.red-theme .fr-wrapper ::selection {
+  background: #b5d6fd;
+  color: #000000;
+}
+.red-theme.fr-box.fr-basic .fr-wrapper {
+  background: #ffffff;
+  border: solid 1px #671b1a;
+  border-top: 0;
+  top: 0;
+  left: 0;
+}
+.red-theme.fr-box.fr-basic.fr-top .fr-wrapper {
+  border-top: 0;
+  border-radius: 0 0 2px 2px;
+  -moz-border-radius: 0 0 2px 2px;
+  -webkit-border-radius: 0 0 2px 2px;
+  -moz-background-clip: padding;
+  -webkit-background-clip: padding-box;
+  background-clip: padding-box;
+  -webkit-box-shadow: none;
+  -moz-box-shadow: none;
+  box-shadow: none;
+}
+.red-theme.fr-box.fr-basic.fr-bottom .fr-wrapper {
+  border-bottom: 0;
+  border-radius: 2px 2px 0 0;
+  -moz-border-radius: 2px 2px 0 0;
+  -webkit-border-radius: 2px 2px 0 0;
+  -moz-background-clip: padding;
+  -webkit-background-clip: padding-box;
+  background-clip: padding-box;
+  -webkit-box-shadow: none;
+  -moz-box-shadow: none;
+  box-shadow: none;
+}
+.red-theme .fr-sticky-on.fr-sticky-ios {
+  left: 0;
+  right: 0;
+}
+.red-theme.fr-box .fr-counter {
+  color: #cccccc;
+  background: #ffffff;
+  border-top: solid 1px #ebebeb;
+  border-left: solid 1px #ebebeb;
+  border-radius: 2px 0 0 0;
+  -moz-border-radius: 2px 0 0 0;
+  -webkit-border-radius: 2px 0 0 0;
+  -moz-background-clip: padding;
+  -webkit-background-clip: padding-box;
+  background-clip: padding-box;
+}
+.red-theme.fr-box.fr-rtl .fr-counter {
+  right: auto;
+  border-right: solid 1px #ebebeb;
+  border-radius: 0 2px 0 0;
+  -moz-border-radius: 0 2px 0 0;
+  -webkit-border-radius: 0 2px 0 0;
+  -moz-background-clip: padding;
+  -webkit-background-clip: padding-box;
+  background-clip: padding-box;
+}
+.red-theme textarea.fr-code {
+  background: #ffffff;
+  color: #000000;
+}
+.red-theme.fr-box.fr-code-view.fr-inline {
+  -webkit-box-shadow: none;
+  -moz-box-shadow: none;
+  box-shadow: none;
+}
+.red-theme.fr-box.fr-inline .fr-command.fr-btn.html-switch {
+  top: 0;
+  right: 0;
+  -webkit-box-shadow: none;
+  -moz-box-shadow: none;
+  box-shadow: none;
+  background: #ffffff;
+  color: #ffffff;
+  -moz-outline: 0;
+  outline: 0;
+  border: 0;
+  padding: 12px 12px;
+  -webkit-transition: background 0.2s ease 0s;
+  -moz-transition: background 0.2s ease 0s;
+  -ms-transition: background 0.2s ease 0s;
+  -o-transition: background 0.2s ease 0s;
+}
+.red-theme.fr-box.fr-inline .fr-command.fr-btn.html-switch i {
+  font-size: 14px;
+  width: 14px;
+}
+.red-theme.fr-box.fr-inline .fr-command.fr-btn.html-switch.fr-desktop:hover {
+  background: #c65a59;
+}
+.red-theme.fr-popup .fr-colors-tabs {
+  -webkit-box-shadow: none;
+  -moz-box-shadow: none;
+  box-shadow: none;
+}
+.red-theme.fr-popup .fr-colors-tabs .fr-colors-tab {
+  color: #ffffff;
+  padding: 8px 0;
+}
+.red-theme.fr-popup .fr-colors-tabs .fr-colors-tab:hover,
+.red-theme.fr-popup .fr-colors-tabs .fr-colors-tab:focus {
+  color: #ffca28;
+}
+.red-theme.fr-popup .fr-colors-tabs .fr-colors-tab[data-param1="background"]::after {
+  bottom: 0;
+  left: 0;
+  background: #ffca28;
+  -webkit-transition: transform 0.2s ease 0s;
+  -moz-transition: transform 0.2s ease 0s;
+  -ms-transition: transform 0.2s ease 0s;
+  -o-transition: transform 0.2s ease 0s;
+}
+.red-theme.fr-popup .fr-colors-tabs .fr-colors-tab.fr-selected-tab {
+  color: #ffca28;
+}
+.red-theme.fr-popup .fr-color-hex-layer .fr-input-line {
+  padding: 8px 0 0;
+}
+.red-theme.fr-popup .fr-color-hex-layer .fr-action-buttons button {
+  background-color: #ffca28;
+  border-radius: 2px;
+  -moz-border-radius: 2px;
+  -webkit-border-radius: 2px;
+  -moz-background-clip: padding;
+  -webkit-background-clip: padding-box;
+  background-clip: padding-box;
+}
+.red-theme.fr-popup .fr-color-hex-layer .fr-action-buttons button:hover {
+  background-color: #f4b800;
+}
+.red-theme.fr-popup .fr-color-set {
+  line-height: 0;
+}
+.red-theme.fr-popup .fr-color-set > span > i,
+.red-theme.fr-popup .fr-color-set > span > svg {
+  bottom: 0;
+  left: 0;
+}
+.red-theme.fr-popup .fr-color-set > span .fr-selected-color {
+  color: #ffffff;
+  font-weight: 400;
+  top: 0;
+  bottom: 0;
+  right: 0;
+  left: 0;
+}
+.red-theme.fr-popup .fr-color-set > span:hover,
+.red-theme.fr-popup .fr-color-set > span:focus {
+  outline: 1px solid #ffffff;
+}
+.red-theme .fr-drag-helper {
+  background: #ffca28;
+  z-index: 2147483640;
+}
+.red-theme.fr-popup .fr-link:focus {
+  outline: 0;
+  background: #c65a59;
+}
+.red-theme.fr-popup .fr-file-upload-layer {
+  border: dashed 2px #edc9c9;
+  padding: 25px 0;
+}
+.red-theme.fr-popup .fr-file-upload-layer:hover {
+  background: #c65a59;
+}
+.red-theme.fr-popup .fr-file-upload-layer.fr-drop {
+  background: #c65a59;
+  border-color: #ffca28;
+}
+.red-theme.fr-popup .fr-file-upload-layer .fr-form {
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  z-index: 2147483640;
+}
+.red-theme.fr-popup .fr-file-progress-bar-layer > h3 {
+  margin: 10px 0;
+}
+.red-theme.fr-popup .fr-file-progress-bar-layer > div.fr-loader {
+  background: #ffefbf;
+}
+.red-theme.fr-popup .fr-file-progress-bar-layer > div.fr-loader span {
+  background: #ffca28;
+  -webkit-transition: width 0.2s ease 0s;
+  -moz-transition: width 0.2s ease 0s;
+  -ms-transition: width 0.2s ease 0s;
+  -o-transition: width 0.2s ease 0s;
+}
+.red-theme.fr-popup .fr-file-progress-bar-layer > div.fr-loader.fr-indeterminate span {
+  top: 0;
+}
+.red-theme.fr-box.fr-fullscreen {
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: 0;
+}
+.red-theme.fr-modal .fr-modal-wrapper .fr-modal-body .fr-help-modal table tr {
+  border: 0;
+}
+.red-theme.fr-modal .fr-modal-wrapper .fr-modal-body .fr-help-modal table tbody tr {
+  border-bottom: solid 1px rgba(255, 255, 255, 0.3);
+}
+.red-theme.fr-modal .fr-modal-wrapper .fr-modal-body .fr-help-modal table tbody td:first-child {
+  color: #ffffff;
+}
+.red-theme .fr-image-resizer {
+  border: solid 1px #ffca28;
+}
+.red-theme .fr-image-resizer .fr-handler {
+  background: #ffca28;
+  border: solid 1px #ffffff;
+}
+.red-theme .fr-image-resizer .fr-handler {
+  width: 12px;
+  height: 12px;
+}
+.red-theme .fr-image-resizer .fr-handler.fr-hnw {
+  left: -6px;
+  top: -6px;
+}
+.red-theme .fr-image-resizer .fr-handler.fr-hne {
+  right: -6px;
+  top: -6px;
+}
+.red-theme .fr-image-resizer .fr-handler.fr-hsw {
+  left: -6px;
+  bottom: -6px;
+}
+.red-theme .fr-image-resizer .fr-handler.fr-hse {
+  right: -6px;
+  bottom: -6px;
+}
+@media (min-width: 1200px) {
+  .red-theme .fr-image-resizer .fr-handler {
+    width: 10px;
+    height: 10px;
+  }
+  .red-theme .fr-image-resizer .fr-handler.fr-hnw {
+    left: -5px;
+    top: -5px;
+  }
+  .red-theme .fr-image-resizer .fr-handler.fr-hne {
+    right: -5px;
+    top: -5px;
+  }
+  .red-theme .fr-image-resizer .fr-handler.fr-hsw {
+    left: -5px;
+    bottom: -5px;
+  }
+  .red-theme .fr-image-resizer .fr-handler.fr-hse {
+    right: -5px;
+    bottom: -5px;
+  }
+}
+.red-theme.fr-image-overlay {
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: 0;
+  z-index: 2147483640;
+}
+.red-theme.fr-popup .fr-image-upload-layer {
+  border: dashed 2px #edc9c9;
+  padding: 25px 0;
+}
+.red-theme.fr-popup .fr-image-upload-layer:hover {
+  background: #c65a59;
+}
+.red-theme.fr-popup .fr-image-upload-layer.fr-drop {
+  background: #c65a59;
+  border-color: #ffca28;
+}
+.red-theme.fr-popup .fr-image-upload-layer .fr-form {
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  z-index: 2147483640;
+}
+.red-theme.fr-popup .fr-image-progress-bar-layer > h3 {
+  margin: 10px 0;
+}
+.red-theme.fr-popup .fr-image-progress-bar-layer > div.fr-loader {
+  background: #ffefbf;
+}
+.red-theme.fr-popup .fr-image-progress-bar-layer > div.fr-loader span {
+  background: #ffca28;
+  -webkit-transition: width 0.2s ease 0s;
+  -moz-transition: width 0.2s ease 0s;
+  -ms-transition: width 0.2s ease 0s;
+  -o-transition: width 0.2s ease 0s;
+}
+.red-theme.fr-popup .fr-image-progress-bar-layer > div.fr-loader.fr-indeterminate span {
+  top: 0;
+}
+.red-theme.fr-modal-head .fr-modal-head-line i.fr-modal-more {
+  -webkit-transition: padding 0.2s ease 0s, width 0.2s ease 0s, opacity 0.2s ease 0s;
+  -moz-transition: padding 0.2s ease 0s, width 0.2s ease 0s, opacity 0.2s ease 0s;
+  -ms-transition: padding 0.2s ease 0s, width 0.2s ease 0s, opacity 0.2s ease 0s;
+  -o-transition: padding 0.2s ease 0s, width 0.2s ease 0s, opacity 0.2s ease 0s;
+}
+.red-theme.fr-modal-head .fr-modal-head-line i.fr-modal-more.fr-not-available {
+  opacity: 0;
+  width: 0;
+  padding: 12px 0;
+}
+.red-theme.fr-modal-head .fr-modal-tags a {
+  opacity: 0;
+  border-radius: 2px;
+  -moz-border-radius: 2px;
+  -webkit-border-radius: 2px;
+  -moz-background-clip: padding;
+  -webkit-background-clip: padding-box;
+  background-clip: padding-box;
+  color: #ffca28;
+  -webkit-transition: opacity 0.2s ease 0s, background 0.2s ease 0s;
+  -moz-transition: opacity 0.2s ease 0s, background 0.2s ease 0s;
+  -ms-transition: opacity 0.2s ease 0s, background 0.2s ease 0s;
+  -o-transition: opacity 0.2s ease 0s, background 0.2s ease 0s;
+}
+.red-theme.fr-modal-head .fr-modal-tags a.fr-selected-tag {
+  background: #d48382;
+}
+.red-themediv.fr-modal-body .fr-preloader {
+  margin: 50px auto;
+}
+.red-themediv.fr-modal-body div.fr-image-list {
+  padding: 0;
+}
+.red-themediv.fr-modal-body div.fr-image-list div.fr-image-container {
+  -webkit-box-shadow: none;
+  -moz-box-shadow: none;
+  box-shadow: none;
+  border-radius: 2px;
+  -moz-border-radius: 2px;
+  -webkit-border-radius: 2px;
+  -moz-background-clip: padding;
+  -webkit-background-clip: padding-box;
+  background-clip: padding-box;
+}
+.red-themediv.fr-modal-body div.fr-image-list div.fr-image-container.fr-image-deleting::after {
+  -webkit-transition: opacity 0.2s ease 0s;
+  -moz-transition: opacity 0.2s ease 0s;
+  -ms-transition: opacity 0.2s ease 0s;
+  -o-transition: opacity 0.2s ease 0s;
+  background: #000000;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: 0;
+}
+.red-themediv.fr-modal-body div.fr-image-list div.fr-image-container.fr-image-deleting::before {
+  color: #ffffff;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: 0;
+  margin: auto;
+}
+.red-themediv.fr-modal-body div.fr-image-list div.fr-image-container.fr-empty {
+  background: #cccccc;
+}
+.red-themediv.fr-modal-body div.fr-image-list div.fr-image-container.fr-empty::after {
+  margin: auto;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+}
+.red-themediv.fr-modal-body div.fr-image-list div.fr-image-container img {
+  -webkit-transition: opacity 0.2s ease 0s, filter 0.2s ease 0s;
+  -moz-transition: opacity 0.2s ease 0s, filter 0.2s ease 0s;
+  -ms-transition: opacity 0.2s ease 0s, filter 0.2s ease 0s;
+  -o-transition: opacity 0.2s ease 0s, filter 0.2s ease 0s;
+}
+.red-themediv.fr-modal-body div.fr-image-list div.fr-image-container .fr-delete-img,
+.red-themediv.fr-modal-body div.fr-image-list div.fr-image-container .fr-insert-img {
+  -webkit-transition: background 0.2s ease 0s, color 0.2s ease 0s;
+  -moz-transition: background 0.2s ease 0s, color 0.2s ease 0s;
+  -ms-transition: background 0.2s ease 0s, color 0.2s ease 0s;
+  -o-transition: background 0.2s ease 0s, color 0.2s ease 0s;
+  -webkit-box-shadow: none;
+  -moz-box-shadow: none;
+  box-shadow: none;
+  margin: 0;
+}
+.red-themediv.fr-modal-body div.fr-image-list div.fr-image-container .fr-delete-img {
+  background: #b8312f;
+  color: #ffffff;
+}
+.red-themediv.fr-modal-body div.fr-image-list div.fr-image-container .fr-insert-img {
+  background: #b8312f;
+  color: #ffca28;
+}
+.red-theme.red-theme.fr-desktop .fr-modal-wrapper .fr-modal-head .fr-modal-tags a:hover {
+  background: #c65a59;
+}
+.red-theme.red-theme.fr-desktop .fr-modal-wrapper .fr-modal-head .fr-modal-tags a.fr-selected-tag {
+  background: #d48382;
+}
+.red-theme.red-theme.fr-desktop .fr-modal-wrapper div.fr-modal-body div.fr-image-list div.fr-image-container .fr-delete-img:hover {
+  background: #bf4644;
+  color: #ffffff;
+}
+.red-theme.red-theme.fr-desktop .fr-modal-wrapper div.fr-modal-body div.fr-image-list div.fr-image-container .fr-insert-img:hover {
+  background: #c65a59;
+}
+.red-theme .fr-line-breaker {
+  border-top: 1px solid #ffca28;
+}
+.red-theme .fr-line-breaker a.fr-floating-btn {
+  left: calc(50% - (32px / 2));
+  top: -16px;
+}
+.red-theme .fr-qi-helper {
+  padding-left: 16px;
+}
+.red-theme .fr-qi-helper a.fr-btn.fr-floating-btn {
+  color: #ffffff;
+}
+.red-theme.fr-modal .fr-modal-wrapper .fr-modal-body .fr-special-characters-modal .fr-special-character {
+  border: 1px solid #cccccc;
+}
+.red-theme .fr-element table td.fr-selected-cell,
+.red-theme .fr-element table th.fr-selected-cell {
+  border: 1px double #ffca28;
+}
+.red-theme .fr-table-resizer div {
+  border-right: 1px solid #ffca28;
+}
+.red-theme.fr-popup .fr-table-colors-hex-layer .fr-input-line {
+  padding: 8px 0 0;
+}
+.red-theme.fr-popup .fr-table-colors-hex-layer .fr-action-buttons button {
+  background-color: #ffca28;
+  border-radius: 2px;
+  -moz-border-radius: 2px;
+  -webkit-border-radius: 2px;
+  -moz-background-clip: padding;
+  -webkit-background-clip: padding-box;
+  background-clip: padding-box;
+}
+.red-theme.fr-popup .fr-table-colors-hex-layer .fr-action-buttons button:hover {
+  background-color: #f4b800;
+}
+.red-theme.fr-popup .fr-table-size .fr-select-table-size {
+  line-height: 0;
+}
+.red-theme.fr-popup .fr-table-size .fr-select-table-size > span {
+  padding: 0px 4px 4px 0;
+}
+.red-theme.fr-popup .fr-table-size .fr-select-table-size > span > span {
+  border: 1px solid #dddddd;
+}
+.red-theme.fr-popup .fr-table-size .fr-select-table-size > span.hover > span {
+  background: rgba(255, 202, 40, 0.3);
+  border: solid 1px #ffca28;
+}
+.red-theme.fr-popup .fr-table-colors {
+  line-height: 0;
+}
+.red-theme.fr-popup .fr-table-colors > span > i {
+  bottom: 0;
+  left: 0;
+}
+.red-theme.fr-popup .fr-table-colors > span:focus {
+  outline: 1px solid #ffffff;
+}
+.red-theme .fr-element .fr-video::after {
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+}
+.red-theme.fr-box .fr-video-resizer {
+  border: solid 1px #ffca28;
+}
+.red-theme.fr-box .fr-video-resizer .fr-handler {
+  background: #ffca28;
+  border: solid 1px #ffffff;
+}
+.red-theme.fr-box .fr-video-resizer .fr-handler {
+  width: 12px;
+  height: 12px;
+}
+.red-theme.fr-box .fr-video-resizer .fr-handler.fr-hnw {
+  left: -6px;
+  top: -6px;
+}
+.red-theme.fr-box .fr-video-resizer .fr-handler.fr-hne {
+  right: -6px;
+  top: -6px;
+}
+.red-theme.fr-box .fr-video-resizer .fr-handler.fr-hsw {
+  left: -6px;
+  bottom: -6px;
+}
+.red-theme.fr-box .fr-video-resizer .fr-handler.fr-hse {
+  right: -6px;
+  bottom: -6px;
+}
+@media (min-width: 1200px) {
+  .red-theme.fr-box .fr-video-resizer .fr-handler {
+    width: 10px;
+    height: 10px;
+  }
+  .red-theme.fr-box .fr-video-resizer .fr-handler.fr-hnw {
+    left: -5px;
+    top: -5px;
+  }
+  .red-theme.fr-box .fr-video-resizer .fr-handler.fr-hne {
+    right: -5px;
+    top: -5px;
+  }
+  .red-theme.fr-box .fr-video-resizer .fr-handler.fr-hsw {
+    left: -5px;
+    bottom: -5px;
+  }
+  .red-theme.fr-box .fr-video-resizer .fr-handler.fr-hse {
+    right: -5px;
+    bottom: -5px;
+  }
+}
+.red-theme.fr-popup .fr-video-upload-layer {
+  border: dashed 2px #edc9c9;
+  padding: 25px 0;
+}
+.red-theme.fr-popup .fr-video-upload-layer:hover {
+  background: #c65a59;
+}
+.red-theme.fr-popup .fr-video-upload-layer.fr-drop {
+  background: #c65a59;
+  border-color: #ffca28;
+}
+.red-theme.fr-popup .fr-video-upload-layer .fr-form {
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  z-index: 2147483640;
+}
+.red-theme.fr-popup .fr-video-progress-bar-layer > h3 {
+  margin: 10px 0;
+}
+.red-theme.fr-popup .fr-video-progress-bar-layer > div.fr-loader {
+  background: #ffefbf;
+}
+.red-theme.fr-popup .fr-video-progress-bar-layer > div.fr-loader span {
+  background: #ffca28;
+  -webkit-transition: width 0.2s ease 0s;
+  -moz-transition: width 0.2s ease 0s;
+  -ms-transition: width 0.2s ease 0s;
+  -o-transition: width 0.2s ease 0s;
+}
+.red-theme.fr-popup .fr-video-progress-bar-layer > div.fr-loader.fr-indeterminate span {
+  top: 0;
+}
+.red-theme.fr-video-overlay {
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: 0;
+  z-index: 2147483640;
+}
+.red-theme .fr-view span[style~="color:"] a {
+  color: inherit;
+}
+.red-theme .fr-view strong {
+  font-weight: 700;
+}
+.red-theme .fr-view table.fr-alternate-rows tbody tr:nth-child(2n) {
+  background: #f5f5f5;
+}
+.red-theme .fr-view table td,
+.red-theme .fr-view table th {
+  border: 1px solid #dddddd;
+}
+.red-theme .fr-view table th {
+  background: #e6e6e6;
+}
+.red-theme .fr-view[dir="rtl"] blockquote {
+  border-right: solid 2px #5e35b1;
+  margin-right: 0;
+}
+.red-theme .fr-view[dir="rtl"] blockquote blockquote {
+  border-color: #00bcd4;
+}
+.red-theme .fr-view[dir="rtl"] blockquote blockquote blockquote {
+  border-color: #43a047;
+}
+.red-theme .fr-view blockquote {
+  border-left: solid 2px #5e35b1;
+  margin-left: 0;
+  color: #5e35b1;
+}
+.red-theme .fr-view blockquote blockquote {
+  border-color: #00bcd4;
+  color: #00bcd4;
+}
+.red-theme .fr-view blockquote blockquote blockquote {
+  border-color: #43a047;
+  color: #43a047;
+}
+.red-theme .fr-view span.fr-emoticon {
+  line-height: 0;
+}
+.red-theme .fr-view span.fr-emoticon.fr-emoticon-img {
+  font-size: inherit;
+}
+.red-theme .fr-view .fr-text-bordered {
+  padding: 10px 0;
+}
+.red-theme .fr-view .fr-img-caption .fr-img-wrap {
+  margin: auto;
+}
+.red-theme .fr-view .fr-img-caption .fr-img-wrap img {
+  margin: auto;
+}
+.red-theme .fr-view .fr-img-caption .fr-img-wrap > span {
+  margin: auto;
+}
+.red-theme .fr-element .fr-embedly::after {
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+}
+.red-theme.fr-box .fr-embedly-resizer {
+  border: solid 1px #ffca28;
+}
+.red-theme .examples-variante > a {
+  font-size: 14px;
+  font-family: Arial, Helvetica, sans-serif;
+}
+.red-theme .sc-cm-holder > .sc-cm {
+  border-top: 5px solid #671b1a !important;
+}
+.red-theme .sc-cm__item_dropdown:hover > a,
+.red-theme .sc-cm a:hover {
+  background-color: #c65a59 !important;
+}
+.red-theme .sc-cm__item_active > a,
+.red-theme .sc-cm__item_active > a:hover,
+.red-theme .sc-cm a:active,
+.red-theme .sc-cm a:focus {
+  background-color: #d48382 !important;
+}
+.red-theme .sc-cm-holder > .sc-cm:before {
+  background-color: #c65a59 !important;
+}
+.red-theme .fr-tooltip {
+  top: 0;
+  left: 0;
+  border-radius: 2px;
+  -moz-border-radius: 2px;
+  -webkit-border-radius: 2px;
+  -moz-background-clip: padding;
+  -webkit-background-clip: padding-box;
+  background-clip: padding-box;
+  -webkit-box-shadow: none;
+  -moz-box-shadow: none;
+  box-shadow: none;
+  background: #222222;
+  color: #ffffff;
+  font-size: 11px;
+  line-height: 22px;
+  font-family: Arial, Helvetica, sans-serif;
+  -webkit-transition: opacity 0.2s ease 0s;
+  -moz-transition: opacity 0.2s ease 0s;
+  -ms-transition: opacity 0.2s ease 0s;
+  -o-transition: opacity 0.2s ease 0s;
+}
+.red-theme.fr-toolbar .fr-command.fr-btn,
+.red-theme.fr-popup .fr-command.fr-btn {
+  color: #ffffff;
+  -moz-outline: 0;
+  outline: 0;
+  border: 0;
+  margin: 0px 2px;
+  -webkit-transition: background 0.2s ease 0s;
+  -moz-transition: background 0.2s ease 0s;
+  -ms-transition: background 0.2s ease 0s;
+  -o-transition: background 0.2s ease 0s;
+  padding: 0;
+  width: 38px;
+  height: 38px;
+}
+.red-theme.fr-toolbar .fr-command.fr-btn::-moz-focus-inner,
+.red-theme.fr-popup .fr-command.fr-btn::-moz-focus-inner {
+  border: 0;
+}
+.red-theme.fr-toolbar .fr-command.fr-btn.fr-btn-text,
+.red-theme.fr-popup .fr-command.fr-btn.fr-btn-text {
+  width: auto;
+}
+.red-theme.fr-toolbar .fr-command.fr-btn i,
+.red-theme.fr-popup .fr-command.fr-btn i,
+.red-theme.fr-toolbar .fr-command.fr-btn svg,
+.red-theme.fr-popup .fr-command.fr-btn svg {
+  font-size: 14px;
+  width: 14px;
+  margin: 12px 12px;
+}
+.red-theme.fr-toolbar .fr-command.fr-btn span,
+.red-theme.fr-popup .fr-command.fr-btn span {
+  font-size: 14px;
+  line-height: 17px;
+  min-width: 34px;
+  height: 17px;
+  padding: 0 2px;
+}
+.red-theme.fr-toolbar .fr-command.fr-btn img,
+.red-theme.fr-popup .fr-command.fr-btn img {
+  margin: 12px 12px;
+  width: 14px;
+}
+.red-theme.fr-toolbar .fr-command.fr-btn.fr-active,
+.red-theme.fr-popup .fr-command.fr-btn.fr-active {
+  color: #ffca28;
+  background: transparent;
+}
+.red-theme.fr-toolbar .fr-command.fr-btn.fr-dropdown.fr-selection,
+.red-theme.fr-popup .fr-command.fr-btn.fr-dropdown.fr-selection {
+  width: auto;
+}
+.red-theme.fr-toolbar .fr-command.fr-btn.fr-dropdown i,
+.red-theme.fr-popup .fr-command.fr-btn.fr-dropdown i,
+.red-theme.fr-toolbar .fr-command.fr-btn.fr-dropdown span,
+.red-theme.fr-popup .fr-command.fr-btn.fr-dropdown span,
+.red-theme.fr-toolbar .fr-command.fr-btn.fr-dropdown img,
+.red-theme.fr-popup .fr-command.fr-btn.fr-dropdown img,
+.red-theme.fr-toolbar .fr-command.fr-btn.fr-dropdown svg,
+.red-theme.fr-popup .fr-command.fr-btn.fr-dropdown svg {
+  margin-left: 8px;
+  margin-right: 16px;
+}
+.red-theme.fr-toolbar .fr-command.fr-btn.fr-dropdown.fr-active,
+.red-theme.fr-popup .fr-command.fr-btn.fr-dropdown.fr-active {
+  color: #ffffff;
+  background: #d48382;
+}
+.red-theme.fr-toolbar .fr-command.fr-btn.fr-dropdown.fr-active:hover,
+.red-theme.fr-popup .fr-command.fr-btn.fr-dropdown.fr-active:hover,
+.red-theme.fr-toolbar .fr-command.fr-btn.fr-dropdown.fr-active:focus,
+.red-theme.fr-popup .fr-command.fr-btn.fr-dropdown.fr-active:focus {
+  background: #d48382 !important;
+  color: #ffffff !important;
+}
+.red-theme.fr-toolbar .fr-command.fr-btn.fr-dropdown.fr-active:hover::after,
+.red-theme.fr-popup .fr-command.fr-btn.fr-dropdown.fr-active:hover::after,
+.red-theme.fr-toolbar .fr-command.fr-btn.fr-dropdown.fr-active:focus::after,
+.red-theme.fr-popup .fr-command.fr-btn.fr-dropdown.fr-active:focus::after {
+  border-top-color: #ffffff !important;
+}
+.red-theme.fr-toolbar .fr-command.fr-btn.fr-dropdown::after,
+.red-theme.fr-popup .fr-command.fr-btn.fr-dropdown::after {
+  width: 0;
+  height: 0;
+  border-left: 4px solid transparent;
+  border-right: 4px solid transparent;
+  border-top: 4px solid #ffffff;
+  right: 4px;
+  top: 17px;
+}
+.red-theme.fr-toolbar .fr-command.fr-btn.fr-disabled,
+.red-theme.fr-popup .fr-command.fr-btn.fr-disabled {
+  color: #edc9c9;
+}
+.red-theme.fr-toolbar .fr-command.fr-btn.fr-disabled::after,
+.red-theme.fr-popup .fr-command.fr-btn.fr-disabled::after {
+  border-top-color: #edc9c9 !important;
+}
+.red-theme.fr-toolbar.fr-disabled .fr-btn,
+.red-theme.fr-popup.fr-disabled .fr-btn,
+.red-theme.fr-toolbar.fr-disabled .fr-btn.fr-active,
+.red-theme.fr-popup.fr-disabled .fr-btn.fr-active {
+  color: #edc9c9;
+}
+.red-theme.fr-toolbar.fr-disabled .fr-btn.fr-dropdown::after,
+.red-theme.fr-popup.fr-disabled .fr-btn.fr-dropdown::after,
+.red-theme.fr-toolbar.fr-disabled .fr-btn.fr-active.fr-dropdown::after,
+.red-theme.fr-popup.fr-disabled .fr-btn.fr-active.fr-dropdown::after {
+  border-top-color: #edc9c9;
+}
+.red-theme.fr-desktop .fr-command:hover,
+.red-theme.fr-desktop .fr-command:focus {
+  outline: 0;
+  color: #ffffff;
+  background: #c65a59;
+}
+.red-theme.fr-desktop .fr-command:hover::after,
+.red-theme.fr-desktop .fr-command:focus::after {
+  border-top-color: #ffffff !important;
+}
+.red-theme.fr-desktop .fr-command.fr-selected {
+  color: #ffffff;
+  background: #d48382;
+}
+.red-theme.fr-desktop .fr-command.fr-active:hover,
+.red-theme.fr-desktop .fr-command.fr-active:focus {
+  color: #ffca28;
+  background: #c65a59;
+}
+.red-theme.fr-desktop .fr-command.fr-active.fr-selected {
+  color: #ffca28;
+  background: #d48382;
+}
+.red-theme.fr-toolbar.fr-mobile .fr-command.fr-blink,
+.red-theme.fr-popup.fr-mobile .fr-command.fr-blink {
+  background: transparent;
+}
+.red-theme .fr-command.fr-btn + .fr-dropdown-menu {
+  right: auto;
+  bottom: auto;
+  height: auto;
+  border-radius: 0 0 2px 2px;
+  -moz-border-radius: 0 0 2px 2px;
+  -webkit-border-radius: 0 0 2px 2px;
+  -moz-background-clip: padding;
+  -webkit-background-clip: padding-box;
+  background-clip: padding-box;
+}
+.red-theme .fr-command.fr-btn + .fr-dropdown-menu.test-height .fr-dropdown-wrapper {
+  height: auto;
+  max-height: 275px;
+}
+.red-theme .fr-command.fr-btn + .fr-dropdown-menu .fr-dropdown-wrapper {
+  background: #b8312f;
+  padding: 0;
+  margin: auto;
+  -webkit-transition: max-height 0.2s ease 0s;
+  -moz-transition: max-height 0.2s ease 0s;
+  -ms-transition: max-height 0.2s ease 0s;
+  -o-transition: max-height 0.2s ease 0s;
+  margin-top: 0;
+  max-height: 0;
+  height: 0;
+}
+.red-theme .fr-command.fr-btn + .fr-dropdown-menu .fr-dropdown-wrapper .fr-dropdown-content {
+  overflow: auto;
+  max-height: 275px;
+}
+.red-theme .fr-command.fr-btn + .fr-dropdown-menu .fr-dropdown-wrapper .fr-dropdown-content ul.fr-dropdown-list {
+  margin: 0;
+  padding: 0;
+}
+.red-theme .fr-command.fr-btn + .fr-dropdown-menu .fr-dropdown-wrapper .fr-dropdown-content ul.fr-dropdown-list li {
+  padding: 0;
+  margin: 0;
+}
+.red-theme .fr-command.fr-btn + .fr-dropdown-menu .fr-dropdown-wrapper .fr-dropdown-content ul.fr-dropdown-list li a {
+  color: inherit;
+}
+.red-theme .fr-command.fr-btn + .fr-dropdown-menu .fr-dropdown-wrapper .fr-dropdown-content ul.fr-dropdown-list li a.fr-active {
+  background: #d48382;
+}
+.red-theme .fr-command.fr-btn + .fr-dropdown-menu .fr-dropdown-wrapper .fr-dropdown-content ul.fr-dropdown-list li a.fr-disabled {
+  color: #edc9c9;
+}
+.red-theme .fr-command.fr-btn.fr-active + .fr-dropdown-menu {
+  -webkit-box-shadow: none;
+  -moz-box-shadow: none;
+  box-shadow: none;
+}
+.red-theme .fr-command.fr-btn.fr-active + .fr-dropdown-menu .fr-dropdown-wrapper {
+  height: auto;
+  max-height: 275px;
+}
+.red-theme .fr-bottom > .fr-command.fr-btn + .fr-dropdown-menu {
+  border-radius: 2px 2px 0 0;
+  -moz-border-radius: 2px 2px 0 0;
+  -webkit-border-radius: 2px 2px 0 0;
+  -moz-background-clip: padding;
+  -webkit-background-clip: padding-box;
+  background-clip: padding-box;
+}
+.red-theme.fr-modal {
+  color: #ffffff;
+  font-family: Arial, Helvetica, sans-serif;
+  overflow-x: auto;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: 0;
+  z-index: 2147483640;
+}
+.red-theme.fr-modal.fr-middle .fr-modal-wrapper {
+  margin-top: 0;
+  margin-bottom: 0;
+  margin-left: auto;
+  margin-right: auto;
+}
+.red-theme.fr-modal .fr-modal-wrapper {
+  border-radius: 2px;
+  -moz-border-radius: 2px;
+  -webkit-border-radius: 2px;
+  -moz-background-clip: padding;
+  -webkit-background-clip: padding-box;
+  background-clip: padding-box;
+  margin: 20px auto;
+  background: #ffffff;
+  -webkit-box-shadow: none;
+  -moz-box-shadow: none;
+  box-shadow: none;
+  border: solid 1px #671b1a;
+  border-top: 5px solid #671b1a;
+}
+@media (min-width: 768px) and (max-width: 991px) {
+  .red-theme.fr-modal .fr-modal-wrapper {
+    margin: 30px auto;
+  }
+}
+@media (min-width: 992px) {
+  .red-theme.fr-modal .fr-modal-wrapper {
+    margin: 50px auto;
+  }
+}
+.red-theme.fr-modal .fr-modal-wrapper .fr-modal-head {
+  background: #b8312f;
+  -webkit-box-shadow: none;
+  -moz-box-shadow: none;
+  box-shadow: none;
+  border-bottom: solid 1px #671b1a;
+  -webkit-transition: height 0.2s ease 0s;
+  -moz-transition: height 0.2s ease 0s;
+  -ms-transition: height 0.2s ease 0s;
+  -o-transition: height 0.2s ease 0s;
+}
+.red-theme.fr-modal .fr-modal-wrapper .fr-modal-head .fr-modal-close {
+  color: #ffffff;
+  top: 0;
+  right: 0;
+  -webkit-transition: color 0.2s ease 0s;
+  -moz-transition: color 0.2s ease 0s;
+  -ms-transition: color 0.2s ease 0s;
+  -o-transition: color 0.2s ease 0s;
+}
+.red-theme.fr-modal .fr-modal-wrapper .fr-modal-head h4 {
+  margin: 0;
+  font-weight: 400;
+}
+.red-theme.fr-modal .fr-modal-wrapper div.fr-modal-body:focus {
+  outline: 0;
+}
+.red-theme.fr-modal .fr-modal-wrapper div.fr-modal-body button.fr-command {
+  color: #ffca28;
+  -webkit-transition: background 0.2s ease 0s;
+  -moz-transition: background 0.2s ease 0s;
+  -ms-transition: background 0.2s ease 0s;
+  -o-transition: background 0.2s ease 0s;
+  border-radius: 2px;
+  -moz-border-radius: 2px;
+  -webkit-border-radius: 2px;
+  -moz-background-clip: padding;
+  -webkit-background-clip: padding-box;
+  background-clip: padding-box;
+}
+.red-theme.fr-modal .fr-modal-wrapper div.fr-modal-body button.fr-command:hover,
+.red-theme.fr-modal .fr-modal-wrapper div.fr-modal-body button.fr-command:focus {
+  background: #c65a59;
+  color: #ffca28;
+}
+.red-theme.fr-modal .fr-modal-wrapper div.fr-modal-body button.fr-command:active {
+  background: #d48382;
+  color: #ffca28;
+}
+.red-theme.fr-modal .fr-modal-wrapper div.fr-modal-body button::-moz-focus-inner {
+  border: 0;
+}
+.red-theme.red-theme.fr-desktop .fr-modal-wrapper .fr-modal-head i:hover {
+  background: #c65a59;
+}
+.red-theme.fr-overlay {
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  background: #000000;
+}
+.red-theme.fr-popup {
+  color: #ffffff;
+  background: #b8312f;
+  -webkit-box-shadow: none;
+  -moz-box-shadow: none;
+  box-shadow: none;
+  border-radius: 2px;
+  -moz-border-radius: 2px;
+  -webkit-border-radius: 2px;
+  -moz-background-clip: padding;
+  -webkit-background-clip: padding-box;
+  background-clip: padding-box;
+  font-family: Arial, Helvetica, sans-serif;
+  border: solid 1px #671b1a;
+  border-top: 5px solid #671b1a;
+}
+.red-theme.fr-popup .fr-input-focus {
+  background: #bf4644;
+}
+.red-theme.fr-popup.fr-above {
+  border-top: 0;
+  border-bottom: 5px solid #671b1a;
+  -webkit-box-shadow: none;
+  -moz-box-shadow: none;
+  box-shadow: none;
+}
+.red-theme.fr-popup .fr-input-line {
+  padding: 8px 0;
+}
+.red-theme.fr-popup .fr-input-line input[type="text"],
+.red-theme.fr-popup .fr-input-line textarea {
+  margin: 0px 0 1px 0;
+  border-bottom: solid 1px #bdbdbd;
+  color: #ffffff;
+}
+.red-theme.fr-popup .fr-input-line input[type="text"]:focus,
+.red-theme.fr-popup .fr-input-line textarea:focus {
+  border-bottom: solid 2px #ffca28;
+}
+.red-theme.fr-popup .fr-input-line input + label,
+.red-theme.fr-popup .fr-input-line textarea + label {
+  top: 0;
+  left: 0;
+  -webkit-transition: color 0.2s ease 0s;
+  -moz-transition: color 0.2s ease 0s;
+  -ms-transition: color 0.2s ease 0s;
+  -o-transition: color 0.2s ease 0s;
+  background: #b8312f;
+}
+.red-theme.fr-popup .fr-input-line input.fr-not-empty:focus + label,
+.red-theme.fr-popup .fr-input-line textarea.fr-not-empty:focus + label {
+  color: #ffca28;
+}
+.red-theme.fr-popup .fr-input-line input.fr-not-empty + label,
+.red-theme.fr-popup .fr-input-line textarea.fr-not-empty + label {
+  color: #808080;
+}
+.red-theme.fr-popup .fr-buttons {
+  -webkit-box-shadow: none;
+  -moz-box-shadow: none;
+  box-shadow: none;
+  padding: 0 2px;
+  line-height: 0;
+  border-bottom: solid 1px #671b1a;
+}
+.red-theme.fr-popup .fr-layer {
+  width: 225px;
+}
+@media (min-width: 768px) {
+  .red-theme.fr-popup .fr-layer {
+    width: 300px;
+  }
+}
+.red-theme.fr-popup .fr-action-buttons button.fr-command {
+  color: #ffca28;
+  -webkit-transition: background 0.2s ease 0s;
+  -moz-transition: background 0.2s ease 0s;
+  -ms-transition: background 0.2s ease 0s;
+  -o-transition: background 0.2s ease 0s;
+  border-radius: 2px;
+  -moz-border-radius: 2px;
+  -webkit-border-radius: 2px;
+  -moz-background-clip: padding;
+  -webkit-background-clip: padding-box;
+  background-clip: padding-box;
+}
+.red-theme.fr-popup .fr-action-buttons button.fr-command:hover,
+.red-theme.fr-popup .fr-action-buttons button.fr-command:focus {
+  background: #c65a59;
+  color: #ffca28;
+}
+.red-theme.fr-popup .fr-action-buttons button.fr-command:active {
+  background: #d48382;
+  color: #ffca28;
+}
+.red-theme.fr-popup .fr-action-buttons button::-moz-focus-inner {
+  border: 0;
+}
+.red-theme.fr-popup .fr-checkbox span {
+  border: solid 1px #ffffff;
+  border-radius: 2px;
+  -moz-border-radius: 2px;
+  -webkit-border-radius: 2px;
+  -moz-background-clip: padding;
+  -webkit-background-clip: padding-box;
+  background-clip: padding-box;
+  -webkit-transition: background 0.2s ease 0s, border-color 0.2s ease 0s;
+  -moz-transition: background 0.2s ease 0s, border-color 0.2s ease 0s;
+  -ms-transition: background 0.2s ease 0s, border-color 0.2s ease 0s;
+  -o-transition: background 0.2s ease 0s, border-color 0.2s ease 0s;
+}
+.red-theme.fr-popup .fr-checkbox input {
+  margin: 0;
+  padding: 0;
+}
+.red-theme.fr-popup .fr-checkbox input:checked + span {
+  background: #ffca28;
+  border-color: #ffca28;
+}
+.red-theme.fr-popup .fr-checkbox input:focus + span {
+  border-color: #ffca28;
+}
+.red-theme.fr-popup.fr-rtl .fr-input-line input + label,
+.red-theme.fr-popup.fr-rtl .fr-input-line textarea + label {
+  left: auto;
+  right: 0;
+}
+.red-theme.fr-popup .fr-arrow {
+  width: 0;
+  height: 0;
+  border-left: 5px solid transparent;
+  border-right: 5px solid transparent;
+  border-bottom: 5px solid #671b1a;
+  top: -9px;
+  margin-left: -5px;
+}
+.red-theme.fr-popup.fr-above .fr-arrow {
+  top: auto;
+  bottom: -9px;
+  border-bottom: 0;
+  border-top: 5px solid #671b1a;
+}
+.red-theme.fr-toolbar {
+  color: #ffffff;
+  background: #b8312f;
+  font-family: Arial, Helvetica, sans-serif;
+  padding: 0 2px;
+  border-radius: 2px;
+  -moz-border-radius: 2px;
+  -webkit-border-radius: 2px;
+  -moz-background-clip: padding;
+  -webkit-background-clip: padding-box;
+  background-clip: padding-box;
+  -webkit-box-shadow: none;
+  -moz-box-shadow: none;
+  box-shadow: none;
+  border: solid 1px #671b1a;
+  border-top: 5px solid #671b1a;
+}
+.red-theme.fr-toolbar.fr-inline .fr-arrow {
+  width: 0;
+  height: 0;
+  border-left: 5px solid transparent;
+  border-right: 5px solid transparent;
+  border-bottom: 5px solid #671b1a;
+  top: -9px;
+  margin-left: -5px;
+}
+.red-theme.fr-toolbar.fr-inline.fr-above {
+  -webkit-box-shadow: none;
+  -moz-box-shadow: none;
+  box-shadow: none;
+  border-bottom: 5px solid #671b1a;
+  border-top: 0;
+}
+.red-theme.fr-toolbar.fr-inline.fr-above .fr-arrow {
+  top: auto;
+  bottom: -9px;
+  border-bottom: 0;
+  border-top-color: inherit;
+  border-top-width: 5px;
+}
+.red-theme.fr-toolbar.fr-top {
+  top: 0;
+  border-radius: 2px 2px 0 0;
+  -moz-border-radius: 2px 2px 0 0;
+  -webkit-border-radius: 2px 2px 0 0;
+  -moz-background-clip: padding;
+  -webkit-background-clip: padding-box;
+  background-clip: padding-box;
+  -webkit-box-shadow: none;
+  -moz-box-shadow: none;
+  box-shadow: none;
+}
+.red-theme.fr-toolbar.fr-bottom {
+  bottom: 0;
+  border-radius: 0 0 2px 2px;
+  -moz-border-radius: 0 0 2px 2px;
+  -webkit-border-radius: 0 0 2px 2px;
+  -moz-background-clip: padding;
+  -webkit-background-clip: padding-box;
+  background-clip: padding-box;
+  -webkit-box-shadow: none;
+  -moz-box-shadow: none;
+  box-shadow: none;
+}
+.red-theme .fr-separator {
+  background: rgba(255, 255, 255, 0.3);
+}
+.red-theme .fr-separator.fr-vs {
+  height: 34px;
+  width: 1px;
+  margin: 2px;
+}
+.red-theme .fr-separator.fr-hs {
+  height: 1px;
+  width: calc(100% - (2 * 2px));
+  margin: 0 2px;
+}

Разница между файлами не показана из-за своего большого размера
+ 6 - 0
modules/boonex/froala/plugins/froala/css/themes/red.min.css


+ 1281 - 0
modules/boonex/froala/plugins/froala/css/themes/royal.css

@@ -0,0 +1,1281 @@
+/*!
+ * froala_editor v2.7.5 (https://www.froala.com/wysiwyg-editor)
+ * License https://froala.com/wysiwyg-editor/terms/
+ * Copyright 2014-2018 Froala Labs
+ */
+
+.clearfix::after {
+  clear: both;
+  display: block;
+  content: "";
+  height: 0;
+}
+.hide-by-clipping {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  border: 0;
+}
+.royal-theme.fr-box.fr-basic .fr-element {
+  color: #000000;
+  padding: 16px;
+  overflow-x: auto;
+  min-height: 52px;
+}
+.royal-theme .fr-element {
+  -webkit-user-select: auto;
+}
+.royal-theme.fr-box a.fr-floating-btn {
+  -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 1px 1px rgba(0, 0, 0, 0.16);
+  -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 1px 1px rgba(0, 0, 0, 0.16);
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 1px 1px rgba(0, 0, 0, 0.16);
+  height: 32px;
+  width: 32px;
+  background: #ffffff;
+  color: #553982;
+  -webkit-transition: background 0.2s ease 0s, color 0.2s ease 0s, transform 0.2s ease 0s;
+  -moz-transition: background 0.2s ease 0s, color 0.2s ease 0s, transform 0.2s ease 0s;
+  -ms-transition: background 0.2s ease 0s, color 0.2s ease 0s, transform 0.2s ease 0s;
+  -o-transition: background 0.2s ease 0s, color 0.2s ease 0s, transform 0.2s ease 0s;
+  left: 0;
+  top: 0;
+  line-height: 32px;
+  border: none;
+}
+.royal-theme.fr-box a.fr-floating-btn svg {
+  -webkit-transition: transform 0.2s ease 0s;
+  -moz-transition: transform 0.2s ease 0s;
+  -ms-transition: transform 0.2s ease 0s;
+  -o-transition: transform 0.2s ease 0s;
+  fill: #553982;
+}
+.royal-theme.fr-box a.fr-floating-btn i,
+.royal-theme.fr-box a.fr-floating-btn svg {
+  font-size: 14px;
+  line-height: 32px;
+}
+.royal-theme.fr-box a.fr-floating-btn:hover {
+  background: #9365b8;
+}
+.royal-theme.fr-box a.fr-floating-btn:hover svg {
+  fill: #ffffff;
+}
+.royal-theme .fr-wrapper .fr-placeholder {
+  font-size: 12px;
+  color: #aaaaaa;
+  top: 0;
+  left: 0;
+  right: 0;
+}
+.royal-theme .fr-wrapper ::-moz-selection {
+  background: #b5d6fd;
+  color: #000000;
+}
+.royal-theme .fr-wrapper ::selection {
+  background: #b5d6fd;
+  color: #000000;
+}
+.royal-theme.fr-box.fr-basic .fr-wrapper {
+  background: #ffffff;
+  border: 0px;
+  border-top: 0;
+  top: 0;
+  left: 0;
+}
+.royal-theme.fr-box.fr-basic.fr-top .fr-wrapper {
+  border-top: 0;
+  border-radius: 0 0 2px 2px;
+  -moz-border-radius: 0 0 2px 2px;
+  -webkit-border-radius: 0 0 2px 2px;
+  -moz-background-clip: padding;
+  -webkit-background-clip: padding-box;
+  background-clip: padding-box;
+  -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 1px 1px rgba(0, 0, 0, 0.16);
+  -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 1px 1px rgba(0, 0, 0, 0.16);
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 1px 1px rgba(0, 0, 0, 0.16);
+}
+.royal-theme.fr-box.fr-basic.fr-bottom .fr-wrapper {
+  border-bottom: 0;
+  border-radius: 2px 2px 0 0;
+  -moz-border-radius: 2px 2px 0 0;
+  -webkit-border-radius: 2px 2px 0 0;
+  -moz-background-clip: padding;
+  -webkit-background-clip: padding-box;
+  background-clip: padding-box;
+  -webkit-box-shadow: 0 -1px 3px rgba(0, 0, 0, 0.12), 0 -1px 1px 1px rgba(0, 0, 0, 0.16);
+  -moz-box-shadow: 0 -1px 3px rgba(0, 0, 0, 0.12), 0 -1px 1px 1px rgba(0, 0, 0, 0.16);
+  box-shadow: 0 -1px 3px rgba(0, 0, 0, 0.12), 0 -1px 1px 1px rgba(0, 0, 0, 0.16);
+}
+.royal-theme .fr-sticky-on.fr-sticky-ios {
+  left: 0;
+  right: 0;
+}
+.royal-theme.fr-box .fr-counter {
+  color: #cccccc;
+  background: #ffffff;
+  border-top: solid 1px #ebebeb;
+  border-left: solid 1px #ebebeb;
+  border-radius: 2px 0 0 0;
+  -moz-border-radius: 2px 0 0 0;
+  -webkit-border-radius: 2px 0 0 0;
+  -moz-background-clip: padding;
+  -webkit-background-clip: padding-box;
+  background-clip: padding-box;
+}
+.royal-theme.fr-box.fr-rtl .fr-counter {
+  right: auto;
+  border-right: solid 1px #ebebeb;
+  border-radius: 0 2px 0 0;
+  -moz-border-radius: 0 2px 0 0;
+  -webkit-border-radius: 0 2px 0 0;
+  -moz-background-clip: padding;
+  -webkit-background-clip: padding-box;
+  background-clip: padding-box;
+}
+.royal-theme textarea.fr-code {
+  background: #ffffff;
+  color: #000000;
+}
+.royal-theme.fr-box.fr-code-view.fr-inline {
+  -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 1px 1px rgba(0, 0, 0, 0.16);
+  -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 1px 1px rgba(0, 0, 0, 0.16);
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 1px 1px rgba(0, 0, 0, 0.16);
+}
+.royal-theme.fr-box.fr-inline .fr-command.fr-btn.html-switch {
+  top: 0;
+  right: 0;
+  -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 1px 1px rgba(0, 0, 0, 0.16);
+  -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 1px 1px rgba(0, 0, 0, 0.16);
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 1px 1px rgba(0, 0, 0, 0.16);
+  background: #ffffff;
+  color: #553982;
+  -moz-outline: 0;
+  outline: 0;
+  border: 0;
+  padding: 12px 12px;
+  -webkit-transition: background 0.2s ease 0s;
+  -moz-transition: background 0.2s ease 0s;
+  -ms-transition: background 0.2s ease 0s;
+  -o-transition: background 0.2s ease 0s;
+}
+.royal-theme.fr-box.fr-inline .fr-command.fr-btn.html-switch i {
+  font-size: 14px;
+  width: 14px;
+}
+.royal-theme.fr-box.fr-inline .fr-command.fr-btn.html-switch.fr-desktop:hover {
+  background: #ebebeb;
+}
+.royal-theme.fr-popup .fr-colors-tabs {
+  -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 1px 1px rgba(0, 0, 0, 0.16);
+  -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 1px 1px rgba(0, 0, 0, 0.16);
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 1px 1px rgba(0, 0, 0, 0.16);
+}
+.royal-theme.fr-popup .fr-colors-tabs .fr-colors-tab {
+  color: #553982;
+  padding: 8px 0;
+}
+.royal-theme.fr-popup .fr-colors-tabs .fr-colors-tab:hover,
+.royal-theme.fr-popup .fr-colors-tabs .fr-colors-tab:focus {
+  color: #553982;
+}
+.royal-theme.fr-popup .fr-colors-tabs .fr-colors-tab[data-param1="background"]::after {
+  bottom: 0;
+  left: 0;
+  background: #553982;
+  -webkit-transition: transform 0.2s ease 0s;
+  -moz-transition: transform 0.2s ease 0s;
+  -ms-transition: transform 0.2s ease 0s;
+  -o-transition: transform 0.2s ease 0s;
+}
+.royal-theme.fr-popup .fr-colors-tabs .fr-colors-tab.fr-selected-tab {
+  color: #553982;
+}
+.royal-theme.fr-popup .fr-color-hex-layer .fr-input-line {
+  padding: 8px 0 0;
+}
+.royal-theme.fr-popup .fr-color-hex-layer .fr-action-buttons button {
+  background-color: #553982;
+  border-radius: 2px;
+  -moz-border-radius: 2px;
+  -webkit-border-radius: 2px;
+  -moz-background-clip: padding;
+  -webkit-background-clip: padding-box;
+  background-clip: padding-box;
+}
+.royal-theme.fr-popup .fr-color-hex-layer .fr-action-buttons button:hover {
+  background-color: #3e295f;
+}
+.royal-theme.fr-popup .fr-color-set {
+  line-height: 0;
+}
+.royal-theme.fr-popup .fr-color-set > span > i,
+.royal-theme.fr-popup .fr-color-set > span > svg {
+  bottom: 0;
+  left: 0;
+}
+.royal-theme.fr-popup .fr-color-set > span .fr-selected-color {
+  color: #ffffff;
+  font-weight: 400;
+  top: 0;
+  bottom: 0;
+  right: 0;
+  left: 0;
+}
+.royal-theme.fr-popup .fr-color-set > span:hover,
+.royal-theme.fr-popup .fr-color-set > span:focus {
+  outline: 1px solid #553982;
+}
+.royal-theme .fr-drag-helper {
+  background: #553982;
+  z-index: 2147483640;
+}
+.royal-theme.fr-popup .fr-link:focus {
+  outline: 0;
+  background: #ebebeb;
+}
+.royal-theme.fr-popup .fr-file-upload-layer {
+  border: dashed 2px #b7bdc0;
+  padding: 25px 0;
+}
+.royal-theme.fr-popup .fr-file-upload-layer:hover {
+  background: #ebebeb;
+}
+.royal-theme.fr-popup .fr-file-upload-layer.fr-drop {
+  background: #ebebeb;
+  border-color: #553982;
+}
+.royal-theme.fr-popup .fr-file-upload-layer .fr-form {
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  z-index: 2147483640;
+}
+.royal-theme.fr-popup .fr-file-progress-bar-layer > h3 {
+  margin: 10px 0;
+}
+.royal-theme.fr-popup .fr-file-progress-bar-layer > div.fr-loader {
+  background: #ccc4da;
+}
+.royal-theme.fr-popup .fr-file-progress-bar-layer > div.fr-loader span {
+  background: #553982;
+  -webkit-transition: width 0.2s ease 0s;
+  -moz-transition: width 0.2s ease 0s;
+  -ms-transition: width 0.2s ease 0s;
+  -o-transition: width 0.2s ease 0s;
+}
+.royal-theme.fr-popup .fr-file-progress-bar-layer > div.fr-loader.fr-indeterminate span {
+  top: 0;
+}
+.royal-theme.fr-box.fr-fullscreen {
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: 0;
+}
+.royal-theme.fr-modal .fr-modal-wrapper .fr-modal-body .fr-help-modal table tr {
+  border: 0;
+}
+.royal-theme.fr-modal .fr-modal-wrapper .fr-modal-body .fr-help-modal table tbody tr {
+  border-bottom: solid 1px #ebebeb;
+}
+.royal-theme.fr-modal .fr-modal-wrapper .fr-modal-body .fr-help-modal table tbody td:first-child {
+  color: #8874a8;
+}
+.royal-theme .fr-image-resizer {
+  border: solid 1px #553982;
+}
+.royal-theme .fr-image-resizer .fr-handler {
+  background: #553982;
+  border: solid 1px #ffffff;
+}
+.royal-theme .fr-image-resizer .fr-handler {
+  width: 12px;
+  height: 12px;
+}
+.royal-theme .fr-image-resizer .fr-handler.fr-hnw {
+  left: -6px;
+  top: -6px;
+}
+.royal-theme .fr-image-resizer .fr-handler.fr-hne {
+  right: -6px;
+  top: -6px;
+}
+.royal-theme .fr-image-resizer .fr-handler.fr-hsw {
+  left: -6px;
+  bottom: -6px;
+}
+.royal-theme .fr-image-resizer .fr-handler.fr-hse {
+  right: -6px;
+  bottom: -6px;
+}
+@media (min-width: 1200px) {
+  .royal-theme .fr-image-resizer .fr-handler {
+    width: 10px;
+    height: 10px;
+  }
+  .royal-theme .fr-image-resizer .fr-handler.fr-hnw {
+    left: -5px;
+    top: -5px;
+  }
+  .royal-theme .fr-image-resizer .fr-handler.fr-hne {
+    right: -5px;
+    top: -5px;
+  }
+  .royal-theme .fr-image-resizer .fr-handler.fr-hsw {
+    left: -5px;
+    bottom: -5px;
+  }
+  .royal-theme .fr-image-resizer .fr-handler.fr-hse {
+    right: -5px;
+    bottom: -5px;
+  }
+}
+.royal-theme.fr-image-overlay {
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: 0;
+  z-index: 2147483640;
+}
+.royal-theme.fr-popup .fr-image-upload-layer {
+  border: dashed 2px #b7bdc0;
+  padding: 25px 0;
+}
+.royal-theme.fr-popup .fr-image-upload-layer:hover {
+  background: #ebebeb;
+}
+.royal-theme.fr-popup .fr-image-upload-layer.fr-drop {
+  background: #ebebeb;
+  border-color: #553982;
+}
+.royal-theme.fr-popup .fr-image-upload-layer .fr-form {
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  z-index: 2147483640;
+}
+.royal-theme.fr-popup .fr-image-progress-bar-layer > h3 {
+  margin: 10px 0;
+}
+.royal-theme.fr-popup .fr-image-progress-bar-layer > div.fr-loader {
+  background: #ccc4da;
+}
+.royal-theme.fr-popup .fr-image-progress-bar-layer > div.fr-loader span {
+  background: #553982;
+  -webkit-transition: width 0.2s ease 0s;
+  -moz-transition: width 0.2s ease 0s;
+  -ms-transition: width 0.2s ease 0s;
+  -o-transition: width 0.2s ease 0s;
+}
+.royal-theme.fr-popup .fr-image-progress-bar-layer > div.fr-loader.fr-indeterminate span {
+  top: 0;
+}
+.royal-theme.fr-modal-head .fr-modal-head-line i.fr-modal-more {
+  -webkit-transition: padding 0.2s ease 0s, width 0.2s ease 0s, opacity 0.2s ease 0s;
+  -moz-transition: padding 0.2s ease 0s, width 0.2s ease 0s, opacity 0.2s ease 0s;
+  -ms-transition: padding 0.2s ease 0s, width 0.2s ease 0s, opacity 0.2s ease 0s;
+  -o-transition: padding 0.2s ease 0s, width 0.2s ease 0s, opacity 0.2s ease 0s;
+}
+.royal-theme.fr-modal-head .fr-modal-head-line i.fr-modal-more.fr-not-available {
+  opacity: 0;
+  width: 0;
+  padding: 12px 0;
+}
+.royal-theme.fr-modal-head .fr-modal-tags a {
+  opacity: 0;
+  border-radius: 2px;
+  -moz-border-radius: 2px;
+  -webkit-border-radius: 2px;
+  -moz-background-clip: padding;
+  -webkit-background-clip: padding-box;
+  background-clip: padding-box;
+  color: #553982;
+  -webkit-transition: opacity 0.2s ease 0s, background 0.2s ease 0s;
+  -moz-transition: opacity 0.2s ease 0s, background 0.2s ease 0s;
+  -ms-transition: opacity 0.2s ease 0s, background 0.2s ease 0s;
+  -o-transition: opacity 0.2s ease 0s, background 0.2s ease 0s;
+}
+.royal-theme.fr-modal-head .fr-modal-tags a.fr-selected-tag {
+  background: #d6d6d6;
+}
+.royal-themediv.fr-modal-body .fr-preloader {
+  margin: 50px auto;
+}
+.royal-themediv.fr-modal-body div.fr-image-list {
+  padding: 0;
+}
+.royal-themediv.fr-modal-body div.fr-image-list div.fr-image-container {
+  -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 1px 1px rgba(0, 0, 0, 0.16);
+  -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 1px 1px rgba(0, 0, 0, 0.16);
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 1px 1px rgba(0, 0, 0, 0.16);
+  border-radius: 2px;
+  -moz-border-radius: 2px;
+  -webkit-border-radius: 2px;
+  -moz-background-clip: padding;
+  -webkit-background-clip: padding-box;
+  background-clip: padding-box;
+}
+.royal-themediv.fr-modal-body div.fr-image-list div.fr-image-container.fr-image-deleting::after {
+  -webkit-transition: opacity 0.2s ease 0s;
+  -moz-transition: opacity 0.2s ease 0s;
+  -ms-transition: opacity 0.2s ease 0s;
+  -o-transition: opacity 0.2s ease 0s;
+  background: #000000;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: 0;
+}
+.royal-themediv.fr-modal-body div.fr-image-list div.fr-image-container.fr-image-deleting::before {
+  color: #ffffff;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: 0;
+  margin: auto;
+}
+.royal-themediv.fr-modal-body div.fr-image-list div.fr-image-container.fr-empty {
+  background: #cccccc;
+}
+.royal-themediv.fr-modal-body div.fr-image-list div.fr-image-container.fr-empty::after {
+  margin: auto;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+}
+.royal-themediv.fr-modal-body div.fr-image-list div.fr-image-container img {
+  -webkit-transition: opacity 0.2s ease 0s, filter 0.2s ease 0s;
+  -moz-transition: opacity 0.2s ease 0s, filter 0.2s ease 0s;
+  -ms-transition: opacity 0.2s ease 0s, filter 0.2s ease 0s;
+  -o-transition: opacity 0.2s ease 0s, filter 0.2s ease 0s;
+}
+.royal-themediv.fr-modal-body div.fr-image-list div.fr-image-container .fr-delete-img,
+.royal-themediv.fr-modal-body div.fr-image-list div.fr-image-container .fr-insert-img {
+  -webkit-transition: background 0.2s ease 0s, color 0.2s ease 0s;
+  -moz-transition: background 0.2s ease 0s, color 0.2s ease 0s;
+  -ms-transition: background 0.2s ease 0s, color 0.2s ease 0s;
+  -o-transition: background 0.2s ease 0s, color 0.2s ease 0s;
+  -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 1px 1px rgba(0, 0, 0, 0.16);
+  -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 1px 1px rgba(0, 0, 0, 0.16);
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 1px 1px rgba(0, 0, 0, 0.16);
+  margin: 0;
+}
+.royal-themediv.fr-modal-body div.fr-image-list div.fr-image-container .fr-delete-img {
+  background: #b8312f;
+  color: #ffffff;
+}
+.royal-themediv.fr-modal-body div.fr-image-list div.fr-image-container .fr-insert-img {
+  background: #ffffff;
+  color: #553982;
+}
+.royal-theme.royal-theme.fr-desktop .fr-modal-wrapper .fr-modal-head .fr-modal-tags a:hover {
+  background: #ebebeb;
+}
+.royal-theme.royal-theme.fr-desktop .fr-modal-wrapper .fr-modal-head .fr-modal-tags a.fr-selected-tag {
+  background: #d6d6d6;
+}
+.royal-theme.royal-theme.fr-desktop .fr-modal-wrapper div.fr-modal-body div.fr-image-list div.fr-image-container .fr-delete-img:hover {
+  background: #bf4644;
+  color: #ffffff;
+}
+.royal-theme.royal-theme.fr-desktop .fr-modal-wrapper div.fr-modal-body div.fr-image-list div.fr-image-container .fr-insert-img:hover {
+  background: #ebebeb;
+}
+.royal-theme .fr-line-breaker {
+  border-top: 1px solid #553982;
+}
+.royal-theme .fr-line-breaker a.fr-floating-btn {
+  left: calc(50% - (32px / 2));
+  top: -16px;
+}
+.royal-theme .fr-qi-helper {
+  padding-left: 16px;
+}
+.royal-theme .fr-qi-helper a.fr-btn.fr-floating-btn {
+  color: #553982;
+}
+.royal-theme.fr-modal .fr-modal-wrapper .fr-modal-body .fr-special-characters-modal .fr-special-character {
+  border: 1px solid #cccccc;
+}
+.royal-theme .fr-element table td.fr-selected-cell,
+.royal-theme .fr-element table th.fr-selected-cell {
+  border: 1px double #553982;
+}
+.royal-theme .fr-table-resizer div {
+  border-right: 1px solid #553982;
+}
+.royal-theme.fr-popup .fr-table-colors-hex-layer .fr-input-line {
+  padding: 8px 0 0;
+}
+.royal-theme.fr-popup .fr-table-colors-hex-layer .fr-action-buttons button {
+  background-color: #553982;
+  border-radius: 2px;
+  -moz-border-radius: 2px;
+  -webkit-border-radius: 2px;
+  -moz-background-clip: padding;
+  -webkit-background-clip: padding-box;
+  background-clip: padding-box;
+}
+.royal-theme.fr-popup .fr-table-colors-hex-layer .fr-action-buttons button:hover {
+  background-color: #3e295f;
+}
+.royal-theme.fr-popup .fr-table-size .fr-select-table-size {
+  line-height: 0;
+}
+.royal-theme.fr-popup .fr-table-size .fr-select-table-size > span {
+  padding: 0px 4px 4px 0;
+}
+.royal-theme.fr-popup .fr-table-size .fr-select-table-size > span > span {
+  border: 1px solid #dddddd;
+}
+.royal-theme.fr-popup .fr-table-size .fr-select-table-size > span.hover > span {
+  background: rgba(85, 57, 130, 0.3);
+  border: solid 1px #553982;
+}
+.royal-theme.fr-popup .fr-table-colors {
+  line-height: 0;
+}
+.royal-theme.fr-popup .fr-table-colors > span > i {
+  bottom: 0;
+  left: 0;
+}
+.royal-theme.fr-popup .fr-table-colors > span:focus {
+  outline: 1px solid #553982;
+}
+.royal-theme .fr-element .fr-video::after {
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+}
+.royal-theme.fr-box .fr-video-resizer {
+  border: solid 1px #553982;
+}
+.royal-theme.fr-box .fr-video-resizer .fr-handler {
+  background: #553982;
+  border: solid 1px #ffffff;
+}
+.royal-theme.fr-box .fr-video-resizer .fr-handler {
+  width: 12px;
+  height: 12px;
+}
+.royal-theme.fr-box .fr-video-resizer .fr-handler.fr-hnw {
+  left: -6px;
+  top: -6px;
+}
+.royal-theme.fr-box .fr-video-resizer .fr-handler.fr-hne {
+  right: -6px;
+  top: -6px;
+}
+.royal-theme.fr-box .fr-video-resizer .fr-handler.fr-hsw {
+  left: -6px;
+  bottom: -6px;
+}
+.royal-theme.fr-box .fr-video-resizer .fr-handler.fr-hse {
+  right: -6px;
+  bottom: -6px;
+}
+@media (min-width: 1200px) {
+  .royal-theme.fr-box .fr-video-resizer .fr-handler {
+    width: 10px;
+    height: 10px;
+  }
+  .royal-theme.fr-box .fr-video-resizer .fr-handler.fr-hnw {
+    left: -5px;
+    top: -5px;
+  }
+  .royal-theme.fr-box .fr-video-resizer .fr-handler.fr-hne {
+    right: -5px;
+    top: -5px;
+  }
+  .royal-theme.fr-box .fr-video-resizer .fr-handler.fr-hsw {
+    left: -5px;
+    bottom: -5px;
+  }
+  .royal-theme.fr-box .fr-video-resizer .fr-handler.fr-hse {
+    right: -5px;
+    bottom: -5px;
+  }
+}
+.royal-theme.fr-popup .fr-video-upload-layer {
+  border: dashed 2px #b7bdc0;
+  padding: 25px 0;
+}
+.royal-theme.fr-popup .fr-video-upload-layer:hover {
+  background: #ebebeb;
+}
+.royal-theme.fr-popup .fr-video-upload-layer.fr-drop {
+  background: #ebebeb;
+  border-color: #553982;
+}
+.royal-theme.fr-popup .fr-video-upload-layer .fr-form {
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  z-index: 2147483640;
+}
+.royal-theme.fr-popup .fr-video-progress-bar-layer > h3 {
+  margin: 10px 0;
+}
+.royal-theme.fr-popup .fr-video-progress-bar-layer > div.fr-loader {
+  background: #ccc4da;
+}
+.royal-theme.fr-popup .fr-video-progress-bar-layer > div.fr-loader span {
+  background: #553982;
+  -webkit-transition: width 0.2s ease 0s;
+  -moz-transition: width 0.2s ease 0s;
+  -ms-transition: width 0.2s ease 0s;
+  -o-transition: width 0.2s ease 0s;
+}
+.royal-theme.fr-popup .fr-video-progress-bar-layer > div.fr-loader.fr-indeterminate span {
+  top: 0;
+}
+.royal-theme.fr-video-overlay {
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: 0;
+  z-index: 2147483640;
+}
+.royal-theme .fr-view span[style~="color:"] a {
+  color: inherit;
+}
+.royal-theme .fr-view strong {
+  font-weight: 700;
+}
+.royal-theme .fr-view table.fr-alternate-rows tbody tr:nth-child(2n) {
+  background: #f5f5f5;
+}
+.royal-theme .fr-view table td,
+.royal-theme .fr-view table th {
+  border: 1px solid #dddddd;
+}
+.royal-theme .fr-view table th {
+  background: #e6e6e6;
+}
+.royal-theme .fr-view[dir="rtl"] blockquote {
+  border-right: solid 2px #5e35b1;
+  margin-right: 0;
+}
+.royal-theme .fr-view[dir="rtl"] blockquote blockquote {
+  border-color: #00bcd4;
+}
+.royal-theme .fr-view[dir="rtl"] blockquote blockquote blockquote {
+  border-color: #43a047;
+}
+.royal-theme .fr-view blockquote {
+  border-left: solid 2px #5e35b1;
+  margin-left: 0;
+  color: #5e35b1;
+}
+.royal-theme .fr-view blockquote blockquote {
+  border-color: #00bcd4;
+  color: #00bcd4;
+}
+.royal-theme .fr-view blockquote blockquote blockquote {
+  border-color: #43a047;
+  color: #43a047;
+}
+.royal-theme .fr-view span.fr-emoticon {
+  line-height: 0;
+}
+.royal-theme .fr-view span.fr-emoticon.fr-emoticon-img {
+  font-size: inherit;
+}
+.royal-theme .fr-view .fr-text-bordered {
+  padding: 10px 0;
+}
+.royal-theme .fr-view .fr-img-caption .fr-img-wrap {
+  margin: auto;
+}
+.royal-theme .fr-view .fr-img-caption .fr-img-wrap img {
+  margin: auto;
+}
+.royal-theme .fr-view .fr-img-caption .fr-img-wrap > span {
+  margin: auto;
+}
+.royal-theme .fr-element .fr-embedly::after {
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+}
+.royal-theme.fr-box .fr-embedly-resizer {
+  border: solid 1px #553982;
+}
+.royal-theme .examples-variante > a {
+  font-size: 14px;
+  font-family: Arial, Helvetica, sans-serif;
+}
+.royal-theme .sc-cm-holder > .sc-cm {
+  border-top: 5px solid #553982 !important;
+}
+.royal-theme .sc-cm__item_dropdown:hover > a,
+.royal-theme .sc-cm a:hover {
+  background-color: #ebebeb !important;
+}
+.royal-theme .sc-cm__item_active > a,
+.royal-theme .sc-cm__item_active > a:hover,
+.royal-theme .sc-cm a:active,
+.royal-theme .sc-cm a:focus {
+  background-color: #d6d6d6 !important;
+}
+.royal-theme .sc-cm-holder > .sc-cm:before {
+  background-color: #ebebeb !important;
+}
+.royal-theme .fr-tooltip {
+  top: 0;
+  left: 0;
+  border-radius: 2px;
+  -moz-border-radius: 2px;
+  -webkit-border-radius: 2px;
+  -moz-background-clip: padding;
+  -webkit-background-clip: padding-box;
+  background-clip: padding-box;
+  -webkit-box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 2px 2px 1px rgba(0, 0, 0, 0.14);
+  -moz-box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 2px 2px 1px rgba(0, 0, 0, 0.14);
+  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 2px 2px 1px rgba(0, 0, 0, 0.14);
+  background: #222222;
+  color: #ffffff;
+  font-size: 11px;
+  line-height: 22px;
+  font-family: Arial, Helvetica, sans-serif;
+  -webkit-transition: opacity 0.2s ease 0s;
+  -moz-transition: opacity 0.2s ease 0s;
+  -ms-transition: opacity 0.2s ease 0s;
+  -o-transition: opacity 0.2s ease 0s;
+}
+.royal-theme.fr-toolbar .fr-command.fr-btn,
+.royal-theme.fr-popup .fr-command.fr-btn {
+  color: #553982;
+  -moz-outline: 0;
+  outline: 0;
+  border: 0;
+  margin: 0px 2px;
+  -webkit-transition: background 0.2s ease 0s;
+  -moz-transition: background 0.2s ease 0s;
+  -ms-transition: background 0.2s ease 0s;
+  -o-transition: background 0.2s ease 0s;
+  padding: 0;
+  width: 38px;
+  height: 38px;
+}
+.royal-theme.fr-toolbar .fr-command.fr-btn::-moz-focus-inner,
+.royal-theme.fr-popup .fr-command.fr-btn::-moz-focus-inner {
+  border: 0;
+}
+.royal-theme.fr-toolbar .fr-command.fr-btn.fr-btn-text,
+.royal-theme.fr-popup .fr-command.fr-btn.fr-btn-text {
+  width: auto;
+}
+.royal-theme.fr-toolbar .fr-command.fr-btn i,
+.royal-theme.fr-popup .fr-command.fr-btn i,
+.royal-theme.fr-toolbar .fr-command.fr-btn svg,
+.royal-theme.fr-popup .fr-command.fr-btn svg {
+  font-size: 14px;
+  width: 14px;
+  margin: 12px 12px;
+}
+.royal-theme.fr-toolbar .fr-command.fr-btn span,
+.royal-theme.fr-popup .fr-command.fr-btn span {
+  font-size: 14px;
+  line-height: 17px;
+  min-width: 34px;
+  height: 17px;
+  padding: 0 2px;
+}
+.royal-theme.fr-toolbar .fr-command.fr-btn img,
+.royal-theme.fr-popup .fr-command.fr-btn img {
+  margin: 12px 12px;
+  width: 14px;
+}
+.royal-theme.fr-toolbar .fr-command.fr-btn.fr-active,
+.royal-theme.fr-popup .fr-command.fr-btn.fr-active {
+  color: #ffffff;
+  background: #9365b8;
+}
+.royal-theme.fr-toolbar .fr-command.fr-btn.fr-dropdown.fr-selection,
+.royal-theme.fr-popup .fr-command.fr-btn.fr-dropdown.fr-selection {
+  width: auto;
+}
+.royal-theme.fr-toolbar .fr-command.fr-btn.fr-dropdown i,
+.royal-theme.fr-popup .fr-command.fr-btn.fr-dropdown i,
+.royal-theme.fr-toolbar .fr-command.fr-btn.fr-dropdown span,
+.royal-theme.fr-popup .fr-command.fr-btn.fr-dropdown span,
+.royal-theme.fr-toolbar .fr-command.fr-btn.fr-dropdown img,
+.royal-theme.fr-popup .fr-command.fr-btn.fr-dropdown img,
+.royal-theme.fr-toolbar .fr-command.fr-btn.fr-dropdown svg,
+.royal-theme.fr-popup .fr-command.fr-btn.fr-dropdown svg {
+  margin-left: 8px;
+  margin-right: 16px;
+}
+.royal-theme.fr-toolbar .fr-command.fr-btn.fr-dropdown.fr-active,
+.royal-theme.fr-popup .fr-command.fr-btn.fr-dropdown.fr-active {
+  color: #553982;
+  background: #d6d6d6;
+}
+.royal-theme.fr-toolbar .fr-command.fr-btn.fr-dropdown.fr-active:hover,
+.royal-theme.fr-popup .fr-command.fr-btn.fr-dropdown.fr-active:hover,
+.royal-theme.fr-toolbar .fr-command.fr-btn.fr-dropdown.fr-active:focus,
+.royal-theme.fr-popup .fr-command.fr-btn.fr-dropdown.fr-active:focus {
+  background: #d6d6d6 !important;
+  color: #553982 !important;
+}
+.royal-theme.fr-toolbar .fr-command.fr-btn.fr-dropdown.fr-active:hover::after,
+.royal-theme.fr-popup .fr-command.fr-btn.fr-dropdown.fr-active:hover::after,
+.royal-theme.fr-toolbar .fr-command.fr-btn.fr-dropdown.fr-active:focus::after,
+.royal-theme.fr-popup .fr-command.fr-btn.fr-dropdown.fr-active:focus::after {
+  border-top-color: #553982 !important;
+}
+.royal-theme.fr-toolbar .fr-command.fr-btn.fr-dropdown::after,
+.royal-theme.fr-popup .fr-command.fr-btn.fr-dropdown::after {
+  width: 0;
+  height: 0;
+  border-left: 4px solid transparent;
+  border-right: 4px solid transparent;
+  border-top: 4px solid #553982;
+  right: 4px;
+  top: 17px;
+}
+.royal-theme.fr-toolbar .fr-command.fr-btn.fr-disabled,
+.royal-theme.fr-popup .fr-command.fr-btn.fr-disabled {
+  color: #b7bdc0;
+}
+.royal-theme.fr-toolbar .fr-command.fr-btn.fr-disabled::after,
+.royal-theme.fr-popup .fr-command.fr-btn.fr-disabled::after {
+  border-top-color: #b7bdc0 !important;
+}
+.royal-theme.fr-toolbar.fr-disabled .fr-btn,
+.royal-theme.fr-popup.fr-disabled .fr-btn,
+.royal-theme.fr-toolbar.fr-disabled .fr-btn.fr-active,
+.royal-theme.fr-popup.fr-disabled .fr-btn.fr-active {
+  color: #b7bdc0;
+}
+.royal-theme.fr-toolbar.fr-disabled .fr-btn.fr-dropdown::after,
+.royal-theme.fr-popup.fr-disabled .fr-btn.fr-dropdown::after,
+.royal-theme.fr-toolbar.fr-disabled .fr-btn.fr-active.fr-dropdown::after,
+.royal-theme.fr-popup.fr-disabled .fr-btn.fr-active.fr-dropdown::after {
+  border-top-color: #b7bdc0;
+}
+.royal-theme.fr-desktop .fr-command:hover,
+.royal-theme.fr-desktop .fr-command:focus {
+  outline: 0;
+  color: #553982;
+  background: #ebebeb;
+}
+.royal-theme.fr-desktop .fr-command:hover::after,
+.royal-theme.fr-desktop .fr-command:focus::after {
+  border-top-color: #553982 !important;
+}
+.royal-theme.fr-desktop .fr-command.fr-selected {
+  color: #553982;
+  background: #d6d6d6;
+}
+.royal-theme.fr-desktop .fr-command.fr-active:hover,
+.royal-theme.fr-desktop .fr-command.fr-active:focus {
+  color: #553982;
+  background: #ebebeb;
+}
+.royal-theme.fr-desktop .fr-command.fr-active.fr-selected {
+  color: #553982;
+  background: #d6d6d6;
+}
+.royal-theme.fr-toolbar.fr-mobile .fr-command.fr-blink,
+.royal-theme.fr-popup.fr-mobile .fr-command.fr-blink {
+  background: #9365b8;
+}
+.royal-theme .fr-command.fr-btn + .fr-dropdown-menu {
+  right: auto;
+  bottom: auto;
+  height: auto;
+  border-radius: 0 0 2px 2px;
+  -moz-border-radius: 0 0 2px 2px;
+  -webkit-border-radius: 0 0 2px 2px;
+  -moz-background-clip: padding;
+  -webkit-background-clip: padding-box;
+  background-clip: padding-box;
+}
+.royal-theme .fr-command.fr-btn + .fr-dropdown-menu.test-height .fr-dropdown-wrapper {
+  height: auto;
+  max-height: 275px;
+}
+.royal-theme .fr-command.fr-btn + .fr-dropdown-menu .fr-dropdown-wrapper {
+  background: #ffffff;
+  padding: 0;
+  margin: auto;
+  -webkit-transition: max-height 0.2s ease 0s;
+  -moz-transition: max-height 0.2s ease 0s;
+  -ms-transition: max-height 0.2s ease 0s;
+  -o-transition: max-height 0.2s ease 0s;
+  margin-top: 0;
+  max-height: 0;
+  height: 0;
+}
+.royal-theme .fr-command.fr-btn + .fr-dropdown-menu .fr-dropdown-wrapper .fr-dropdown-content {
+  overflow: auto;
+  max-height: 275px;
+}
+.royal-theme .fr-command.fr-btn + .fr-dropdown-menu .fr-dropdown-wrapper .fr-dropdown-content ul.fr-dropdown-list {
+  margin: 0;
+  padding: 0;
+}
+.royal-theme .fr-command.fr-btn + .fr-dropdown-menu .fr-dropdown-wrapper .fr-dropdown-content ul.fr-dropdown-list li {
+  padding: 0;
+  margin: 0;
+}
+.royal-theme .fr-command.fr-btn + .fr-dropdown-menu .fr-dropdown-wrapper .fr-dropdown-content ul.fr-dropdown-list li a {
+  color: inherit;
+}
+.royal-theme .fr-command.fr-btn + .fr-dropdown-menu .fr-dropdown-wrapper .fr-dropdown-content ul.fr-dropdown-list li a.fr-active {
+  background: #d6d6d6;
+}
+.royal-theme .fr-command.fr-btn + .fr-dropdown-menu .fr-dropdown-wrapper .fr-dropdown-content ul.fr-dropdown-list li a.fr-disabled {
+  color: #b7bdc0;
+}
+.royal-theme .fr-command.fr-btn.fr-active + .fr-dropdown-menu {
+  -webkit-box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 2px 2px 1px rgba(0, 0, 0, 0.14);
+  -moz-box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 2px 2px 1px rgba(0, 0, 0, 0.14);
+  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 2px 2px 1px rgba(0, 0, 0, 0.14);
+}
+.royal-theme .fr-command.fr-btn.fr-active + .fr-dropdown-menu .fr-dropdown-wrapper {
+  height: auto;
+  max-height: 275px;
+}
+.royal-theme .fr-bottom > .fr-command.fr-btn + .fr-dropdown-menu {
+  border-radius: 2px 2px 0 0;
+  -moz-border-radius: 2px 2px 0 0;
+  -webkit-border-radius: 2px 2px 0 0;
+  -moz-background-clip: padding;
+  -webkit-background-clip: padding-box;
+  background-clip: padding-box;
+}
+.royal-theme.fr-modal {
+  color: #553982;
+  font-family: Arial, Helvetica, sans-serif;
+  overflow-x: auto;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: 0;
+  z-index: 2147483640;
+}
+.royal-theme.fr-modal.fr-middle .fr-modal-wrapper {
+  margin-top: 0;
+  margin-bottom: 0;
+  margin-left: auto;
+  margin-right: auto;
+}
+.royal-theme.fr-modal .fr-modal-wrapper {
+  border-radius: 2px;
+  -moz-border-radius: 2px;
+  -webkit-border-radius: 2px;
+  -moz-background-clip: padding;
+  -webkit-background-clip: padding-box;
+  background-clip: padding-box;
+  margin: 20px auto;
+  background: #ffffff;
+  -webkit-box-shadow: 0 5px 8px rgba(0, 0, 0, 0.19), 0 4px 3px 1px rgba(0, 0, 0, 0.14);
+  -moz-box-shadow: 0 5px 8px rgba(0, 0, 0, 0.19), 0 4px 3px 1px rgba(0, 0, 0, 0.14);
+  box-shadow: 0 5px 8px rgba(0, 0, 0, 0.19), 0 4px 3px 1px rgba(0, 0, 0, 0.14);
+  border: 0px;
+  border-top: 5px solid #553982;
+}
+@media (min-width: 768px) and (max-width: 991px) {
+  .royal-theme.fr-modal .fr-modal-wrapper {
+    margin: 30px auto;
+  }
+}
+@media (min-width: 992px) {
+  .royal-theme.fr-modal .fr-modal-wrapper {
+    margin: 50px auto;
+  }
+}
+.royal-theme.fr-modal .fr-modal-wrapper .fr-modal-head {
+  background: #ffffff;
+  -webkit-box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 2px 2px 1px rgba(0, 0, 0, 0.14);
+  -moz-box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 2px 2px 1px rgba(0, 0, 0, 0.14);
+  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 2px 2px 1px rgba(0, 0, 0, 0.14);
+  border-bottom: 0px;
+  -webkit-transition: height 0.2s ease 0s;
+  -moz-transition: height 0.2s ease 0s;
+  -ms-transition: height 0.2s ease 0s;
+  -o-transition: height 0.2s ease 0s;
+}
+.royal-theme.fr-modal .fr-modal-wrapper .fr-modal-head .fr-modal-close {
+  color: #553982;
+  top: 0;
+  right: 0;
+  -webkit-transition: color 0.2s ease 0s;
+  -moz-transition: color 0.2s ease 0s;
+  -ms-transition: color 0.2s ease 0s;
+  -o-transition: color 0.2s ease 0s;
+}
+.royal-theme.fr-modal .fr-modal-wrapper .fr-modal-head h4 {
+  margin: 0;
+  font-weight: 400;
+}
+.royal-theme.fr-modal .fr-modal-wrapper div.fr-modal-body:focus {
+  outline: 0;
+}
+.royal-theme.fr-modal .fr-modal-wrapper div.fr-modal-body button.fr-command {
+  color: #553982;
+  -webkit-transition: background 0.2s ease 0s;
+  -moz-transition: background 0.2s ease 0s;
+  -ms-transition: background 0.2s ease 0s;
+  -o-transition: background 0.2s ease 0s;
+  border-radius: 2px;
+  -moz-border-radius: 2px;
+  -webkit-border-radius: 2px;
+  -moz-background-clip: padding;
+  -webkit-background-clip: padding-box;
+  background-clip: padding-box;
+}
+.royal-theme.fr-modal .fr-modal-wrapper div.fr-modal-body button.fr-command:hover,
+.royal-theme.fr-modal .fr-modal-wrapper div.fr-modal-body button.fr-command:focus {
+  background: #ebebeb;
+  color: #553982;
+}
+.royal-theme.fr-modal .fr-modal-wrapper div.fr-modal-body button.fr-command:active {
+  background: #d6d6d6;
+  color: #553982;
+}
+.royal-theme.fr-modal .fr-modal-wrapper div.fr-modal-body button::-moz-focus-inner {
+  border: 0;
+}
+.royal-theme.royal-theme.fr-desktop .fr-modal-wrapper .fr-modal-head i:hover {
+  background: #ebebeb;
+}
+.royal-theme.fr-overlay {
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  background: #000000;
+}
+.royal-theme.fr-popup {
+  color: #553982;
+  background: #ffffff;
+  -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 1px 1px rgba(0, 0, 0, 0.16);
+  -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 1px 1px rgba(0, 0, 0, 0.16);
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 1px 1px rgba(0, 0, 0, 0.16);
+  border-radius: 2px;
+  -moz-border-radius: 2px;
+  -webkit-border-radius: 2px;
+  -moz-background-clip: padding;
+  -webkit-background-clip: padding-box;
+  background-clip: padding-box;
+  font-family: Arial, Helvetica, sans-serif;
+  border: 0px;
+  border-top: 5px solid #553982;
+}
+.royal-theme.fr-popup .fr-input-focus {
+  background: #f5f5f5;
+}
+.royal-theme.fr-popup.fr-above {
+  border-top: 0;
+  border-bottom: 5px solid #553982;
+  -webkit-box-shadow: 0 -1px 3px rgba(0, 0, 0, 0.12), 0 -1px 1px 1px rgba(0, 0, 0, 0.16);
+  -moz-box-shadow: 0 -1px 3px rgba(0, 0, 0, 0.12), 0 -1px 1px 1px rgba(0, 0, 0, 0.16);
+  box-shadow: 0 -1px 3px rgba(0, 0, 0, 0.12), 0 -1px 1px 1px rgba(0, 0, 0, 0.16);
+}
+.royal-theme.fr-popup .fr-input-line {
+  padding: 8px 0;
+}
+.royal-theme.fr-popup .fr-input-line input[type="text"],
+.royal-theme.fr-popup .fr-input-line textarea {
+  margin: 0px 0 1px 0;
+  border-bottom: solid 1px #bdbdbd;
+  color: #553982;
+}
+.royal-theme.fr-popup .fr-input-line input[type="text"]:focus,
+.royal-theme.fr-popup .fr-input-line textarea:focus {
+  border-bottom: solid 2px #553982;
+}
+.royal-theme.fr-popup .fr-input-line input + label,
+.royal-theme.fr-popup .fr-input-line textarea + label {
+  top: 0;
+  left: 0;
+  -webkit-transition: color 0.2s ease 0s;
+  -moz-transition: color 0.2s ease 0s;
+  -ms-transition: color 0.2s ease 0s;
+  -o-transition: color 0.2s ease 0s;
+  background: #ffffff;
+}
+.royal-theme.fr-popup .fr-input-line input.fr-not-empty:focus + label,
+.royal-theme.fr-popup .fr-input-line textarea.fr-not-empty:focus + label {
+  color: #553982;
+}
+.royal-theme.fr-popup .fr-input-line input.fr-not-empty + label,
+.royal-theme.fr-popup .fr-input-line textarea.fr-not-empty + label {
+  color: #808080;
+}
+.royal-theme.fr-popup .fr-buttons {
+  -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 1px 1px rgba(0, 0, 0, 0.16);
+  -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 1px 1px rgba(0, 0, 0, 0.16);
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 1px 1px rgba(0, 0, 0, 0.16);
+  padding: 0 2px;
+  line-height: 0;
+  border-bottom: 0px;
+}
+.royal-theme.fr-popup .fr-layer {
+  width: 225px;
+}
+@media (min-width: 768px) {
+  .royal-theme.fr-popup .fr-layer {
+    width: 300px;
+  }
+}
+.royal-theme.fr-popup .fr-action-buttons button.fr-command {
+  color: #553982;
+  -webkit-transition: background 0.2s ease 0s;
+  -moz-transition: background 0.2s ease 0s;
+  -ms-transition: background 0.2s ease 0s;
+  -o-transition: background 0.2s ease 0s;
+  border-radius: 2px;
+  -moz-border-radius: 2px;
+  -webkit-border-radius: 2px;
+  -moz-background-clip: padding;
+  -webkit-background-clip: padding-box;
+  background-clip: padding-box;
+}
+.royal-theme.fr-popup .fr-action-buttons button.fr-command:hover,
+.royal-theme.fr-popup .fr-action-buttons button.fr-command:focus {
+  background: #ebebeb;
+  color: #553982;
+}
+.royal-theme.fr-popup .fr-action-buttons button.fr-command:active {
+  background: #d6d6d6;
+  color: #553982;
+}
+.royal-theme.fr-popup .fr-action-buttons button::-moz-focus-inner {
+  border: 0;
+}
+.royal-theme.fr-popup .fr-checkbox span {
+  border: solid 1px #553982;
+  border-radius: 2px;
+  -moz-border-radius: 2px;
+  -webkit-border-radius: 2px;
+  -moz-background-clip: padding;
+  -webkit-background-clip: padding-box;
+  background-clip: padding-box;
+  -webkit-transition: background 0.2s ease 0s, border-color 0.2s ease 0s;
+  -moz-transition: background 0.2s ease 0s, border-color 0.2s ease 0s;
+  -ms-transition: background 0.2s ease 0s, border-color 0.2s ease 0s;
+  -o-transition: background 0.2s ease 0s, border-color 0.2s ease 0s;
+}
+.royal-theme.fr-popup .fr-checkbox input {
+  margin: 0;
+  padding: 0;
+}
+.royal-theme.fr-popup .fr-checkbox input:checked + span {
+  background: #553982;
+  border-color: #553982;
+}
+.royal-theme.fr-popup .fr-checkbox input:focus + span {
+  border-color: #553982;
+}
+.royal-theme.fr-popup.fr-rtl .fr-input-line input + label,
+.royal-theme.fr-popup.fr-rtl .fr-input-line textarea + label {
+  left: auto;
+  right: 0;
+}
+.royal-theme.fr-popup .fr-arrow {
+  width: 0;
+  height: 0;
+  border-left: 5px solid transparent;
+  border-right: 5px solid transparent;
+  border-bottom: 5px solid #553982;
+  top: -9px;
+  margin-left: -5px;
+}
+.royal-theme.fr-popup.fr-above .fr-arrow {
+  top: auto;
+  bottom: -9px;
+  border-bottom: 0;
+  border-top: 5px solid #553982;
+}
+.royal-theme.fr-toolbar {
+  color: #553982;
+  background: #ffffff;
+  font-family: Arial, Helvetica, sans-serif;
+  padding: 0 2px;
+  border-radius: 2px;
+  -moz-border-radius: 2px;
+  -webkit-border-radius: 2px;
+  -moz-background-clip: padding;
+  -webkit-background-clip: padding-box;
+  background-clip: padding-box;
+  -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 1px 1px rgba(0, 0, 0, 0.16);
+  -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 1px 1px rgba(0, 0, 0, 0.16);
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 1px 1px rgba(0, 0, 0, 0.16);
+  border: 0px;
+  border-top: 5px solid #553982;
+}
+.royal-theme.fr-toolbar.fr-inline .fr-arrow {
+  width: 0;
+  height: 0;
+  border-left: 5px solid transparent;
+  border-right: 5px solid transparent;
+  border-bottom: 5px solid #553982;
+  top: -9px;
+  margin-left: -5px;
+}
+.royal-theme.fr-toolbar.fr-inline.fr-above {
+  -webkit-box-shadow: 0 -1px 3px rgba(0, 0, 0, 0.12), 0 -1px 1px 1px rgba(0, 0, 0, 0.16);
+  -moz-box-shadow: 0 -1px 3px rgba(0, 0, 0, 0.12), 0 -1px 1px 1px rgba(0, 0, 0, 0.16);
+  box-shadow: 0 -1px 3px rgba(0, 0, 0, 0.12), 0 -1px 1px 1px rgba(0, 0, 0, 0.16);
+  border-bottom: 5px solid #553982;
+  border-top: 0;
+}
+.royal-theme.fr-toolbar.fr-inline.fr-above .fr-arrow {
+  top: auto;
+  bottom: -9px;
+  border-bottom: 0;
+  border-top-color: inherit;
+  border-top-width: 5px;
+}
+.royal-theme.fr-toolbar.fr-top {
+  top: 0;
+  border-radius: 2px 2px 0 0;
+  -moz-border-radius: 2px 2px 0 0;
+  -webkit-border-radius: 2px 2px 0 0;
+  -moz-background-clip: padding;
+  -webkit-background-clip: padding-box;
+  background-clip: padding-box;
+  -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 1px 1px rgba(0, 0, 0, 0.16);
+  -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 1px 1px rgba(0, 0, 0, 0.16);
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 1px 1px rgba(0, 0, 0, 0.16);
+}
+.royal-theme.fr-toolbar.fr-bottom {
+  bottom: 0;
+  border-radius: 0 0 2px 2px;
+  -moz-border-radius: 0 0 2px 2px;
+  -webkit-border-radius: 0 0 2px 2px;
+  -moz-background-clip: padding;
+  -webkit-background-clip: padding-box;
+  background-clip: padding-box;
+  -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 1px 1px rgba(0, 0, 0, 0.16);
+  -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 1px 1px rgba(0, 0, 0, 0.16);
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 1px 1px rgba(0, 0, 0, 0.16);
+}
+.royal-theme .fr-separator {
+  background: #ebebeb;
+}
+.royal-theme .fr-separator.fr-vs {
+  height: 34px;
+  width: 1px;
+  margin: 2px;
+}
+.royal-theme .fr-separator.fr-hs {
+  height: 1px;
+  width: calc(100% - (2 * 2px));
+  margin: 0 2px;
+}

Разница между файлами не показана из-за своего большого размера
+ 6 - 0
modules/boonex/froala/plugins/froala/css/themes/royal.min.css


+ 64 - 0
modules/boonex/froala/plugins/froala/css/third_party/embedly.css

@@ -0,0 +1,64 @@
+/*!
+ * froala_editor v2.7.5 (https://www.froala.com/wysiwyg-editor)
+ * License https://froala.com/wysiwyg-editor/terms/
+ * Copyright 2014-2018 Froala Labs
+ */
+
+.clearfix::after {
+  clear: both;
+  display: block;
+  content: "";
+  height: 0;
+}
+.hide-by-clipping {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  border: 0;
+}
+.fr-element .fr-embedly {
+  user-select: none;
+  -o-user-select: none;
+  -moz-user-select: none;
+  -khtml-user-select: none;
+  -webkit-user-select: none;
+  -ms-user-select: none;
+  position: relative;
+}
+.fr-element .fr-embedly::after {
+  position: absolute;
+  content: '';
+  z-index: 1;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  cursor: pointer;
+  display: block;
+  background: rgba(0, 0, 0, 0);
+}
+.fr-element .fr-embedly > * {
+  -webkit-box-sizing: content-box;
+  -moz-box-sizing: content-box;
+  box-sizing: content-box;
+  max-width: 100%;
+  border: none;
+}
+.fr-box .fr-embedly-resizer {
+  position: absolute;
+  border: solid 1px #1e88e5;
+  display: none;
+  user-select: none;
+  -o-user-select: none;
+  -moz-user-select: none;
+  -khtml-user-select: none;
+  -webkit-user-select: none;
+  -ms-user-select: none;
+}
+.fr-box .fr-embedly-resizer.fr-active {
+  display: block;
+}

+ 7 - 0
modules/boonex/froala/plugins/froala/css/third_party/embedly.min.css

@@ -0,0 +1,7 @@
+/*!
+ * froala_editor v2.7.5 (https://www.froala.com/wysiwyg-editor)
+ * License https://froala.com/wysiwyg-editor/terms/
+ * Copyright 2014-2018 Froala Labs
+ */
+
+.clearfix::after{clear:both;display:block;content:"";height:0}.hide-by-clipping{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}.fr-element .fr-embedly{user-select:none;-o-user-select:none;-moz-user-select:none;-khtml-user-select:none;-webkit-user-select:none;-ms-user-select:none;position:relative}.fr-element .fr-embedly::after{position:absolute;content:'';z-index:1;top:0;left:0;right:0;bottom:0;cursor:pointer;display:block;background:rgba(0,0,0,0)}.fr-element .fr-embedly>*{-webkit-box-sizing:content-box;-moz-box-sizing:content-box;box-sizing:content-box;max-width:100%;border:0}.fr-box .fr-embedly-resizer{position:absolute;border:solid 1px #1e88e5;display:none;user-select:none;-o-user-select:none;-moz-user-select:none;-khtml-user-select:none;-webkit-user-select:none;-ms-user-select:none}.fr-box .fr-embedly-resizer.fr-active{display:block}

+ 72 - 0
modules/boonex/froala/plugins/froala/css/third_party/spell_checker.css

@@ -0,0 +1,72 @@
+/*!
+ * froala_editor v2.7.5 (https://www.froala.com/wysiwyg-editor)
+ * License https://froala.com/wysiwyg-editor/terms/
+ * Copyright 2014-2018 Froala Labs
+ */
+
+.clearfix::after {
+  clear: both;
+  display: block;
+  content: "";
+  height: 0;
+}
+.hide-by-clipping {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  border: 0;
+}
+.examples-variante > a {
+  font-size: 14px;
+  font-family: Arial, Helvetica, sans-serif;
+}
+.sc-cm-holder > .sc-cm {
+  border-top: 5px solid #222222 !important;
+  padding: 0px !important;
+  line-height: 200% !important;
+  -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 1px 1px rgba(0, 0, 0, 0.16);
+  -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 1px 1px rgba(0, 0, 0, 0.16);
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 1px 1px rgba(0, 0, 0, 0.16);
+}
+.sc-cm .sc-cm__item.examples-variante.sc-cm__item_active > a > i {
+  display: none !important;
+}
+.sc-cm .sc-cm__item.examples-variante > a > i {
+  display: none !important;
+}
+.sc-cm__item_dropdown .i-icon {
+  display: none !important;
+}
+.sc-cm__item_dropdown .i-icon::before {
+  display: none !important;
+}
+.sc-cm::before {
+  display: none !important;
+}
+div.sc-cm-holder.sc-cm_show > ul > li.sc-cm__item.sc-cm__item_dropdown.sc-cm__item_arrow > div > ul {
+  border-style: none !important;
+  padding: 0px !important;
+}
+.sc-cm__item_dropdown:hover > a,
+.sc-cm a:hover {
+  background-color: #ebebeb !important;
+}
+.sc-cm__item_active > a,
+.sc-cm__item_active > a:hover,
+.sc-cm a:active,
+.sc-cm a:focus {
+  background-color: #d6d6d6 !important;
+}
+.sc-cm__item > a {
+  line-height: 200% !important;
+}
+.sc-cm-holder > .sc-cm:before {
+  background-color: #ebebeb !important;
+}
+.sc-cm-holder {
+  display: none;
+}

+ 7 - 0
modules/boonex/froala/plugins/froala/css/third_party/spell_checker.min.css

@@ -0,0 +1,7 @@
+/*!
+ * froala_editor v2.7.5 (https://www.froala.com/wysiwyg-editor)
+ * License https://froala.com/wysiwyg-editor/terms/
+ * Copyright 2014-2018 Froala Labs
+ */
+
+.clearfix::after{clear:both;display:block;content:"";height:0}.hide-by-clipping{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}.examples-variante>a{font-size:14px;font-family:Arial,Helvetica,sans-serif}.sc-cm-holder>.sc-cm{border-top:5px solid #222!important;padding:0!important;line-height:200%!important;-webkit-box-shadow:0 1px 3px rgba(0,0,0,.12),0 1px 1px 1px rgba(0,0,0,.16);-moz-box-shadow:0 1px 3px rgba(0,0,0,.12),0 1px 1px 1px rgba(0,0,0,.16);box-shadow:0 1px 3px rgba(0,0,0,.12),0 1px 1px 1px rgba(0,0,0,.16)}.sc-cm .sc-cm__item.examples-variante.sc-cm__item_active>a>i{display:none!important}.sc-cm .sc-cm__item.examples-variante>a>i{display:none!important}.sc-cm__item_dropdown .i-icon{display:none!important}.sc-cm__item_dropdown .i-icon::before{display:none!important}.sc-cm::before{display:none!important}div.sc-cm-holder.sc-cm_show>ul>li.sc-cm__item.sc-cm__item_dropdown.sc-cm__item_arrow>div>ul{border-style:none!important;padding:0!important}.sc-cm__item_dropdown:hover>a,.sc-cm a:hover{background-color:#ebebeb!important}.sc-cm__item_active>a,.sc-cm__item_active>a:hover,.sc-cm a:active,.sc-cm a:focus{background-color:#d6d6d6!important}.sc-cm__item>a{line-height:200%!important}.sc-cm-holder>.sc-cm:before{background-color:#ebebeb!important}.sc-cm-holder{display:none}

BIN
modules/boonex/froala/plugins/froala/editor.jpg


+ 137 - 0
modules/boonex/froala/plugins/froala/html/3rd-party/at.js.html

@@ -0,0 +1,137 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0"/>
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css">
+  <link rel="stylesheet" href="../../css/froala_editor.css">
+  <link rel="stylesheet" href="../../css/froala_style.css">
+  <link rel="stylesheet" href="../../css/plugins/code_view.css">
+  <link rel="stylesheet" href="../../css/plugins/colors.css">
+  <link rel="stylesheet" href="../../css/plugins/emoticons.css">
+  <link rel="stylesheet" href="../../css/plugins/image_manager.css">
+  <link rel="stylesheet" href="../../css/plugins/image.css">
+  <link rel="stylesheet" href="../../css/plugins/line_breaker.css">
+  <link rel="stylesheet" href="../../css/plugins/table.css">
+  <link rel="stylesheet" href="../../css/plugins/char_counter.css">
+  <link rel="stylesheet" href="../../css/plugins/video.css">
+  <link rel="stylesheet" href="../../css/plugins/fullscreen.css">
+  <link rel="stylesheet" href="../../css/plugins/file.css">
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.3.0/codemirror.min.css">
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/at.js/1.4.0/css/jquery.atwho.min.css">
+
+  <style>
+      body {
+        text-align: center;
+      }
+
+      div#editor {
+        width: 81%;
+        margin: auto;
+        text-align: left;
+      }
+
+      .atwho-view-ul {
+        text-align: left;
+      }
+  </style>
+</head>
+
+<body>
+  <div id="editor">
+      <div id='edit' style="margin-top: 30px;">
+        <h1>At.js integration</h1>
+
+        <p>Froala WYSIWYG Editor can easily be integrated with the amazing <a href="http://ichord.github.io/At.js/" target="_blank" rel="nofollow">At.js library</a>. Type an @ to display the autocomplete list.</p>
+
+        <img class="fr-fir fr-dii" src="../../img/photo1.jpg" alt="Old Clock" width="300"/>Lorem  <strong>ipsum</strong> dolor sit amet, consectetur <strong>adipiscing <em>elit.</em> Donec</strong> facilisis diam in odio iaculis blandit. Nunc eu mauris sit amet purus <strong>viverra</strong><em> gravida</em> ut a dui.<br/>
+        <ul><li>Vivamus nec rutrum augue, pharetra faucibus purus. Maecenas non orci sagittis, vehicula lorem et, dignissim nunc.</li> <li>Suspendisse suscipit, diam non varius facilisis, enim libero tincidunt magna, sit amet iaculis eros libero sit amet eros. Vestibulum a rhoncus felis.<ol><li>Nam lacus nulla, consequat ac lacus sit amet, accumsan pellentesque risus. Aenean viverra mi at urna mattis fermentum.</li> <li>Curabitur porta metus in tortor elementum, in semper nulla ullamcorper. Vestibulum mattis tempor tortor quis gravida. In rhoncus risus nibh. Nullam condimentum dapibus massa vel fringilla. Sed hendrerit sed est quis facilisis. Ut sit amet nibh sem. Pellentesque imperdiet mollis libero.</li></ol></li></ul>
+
+        <table style="width: 100%;">
+          <tr>
+            <td style="width: 25%;"></td>
+            <td style="width: 25%;"></td>
+            <td style="width: 25%;"></td>
+            <td style="width: 25%;"></td>
+          </tr>
+          <tr>
+            <td style="width: 25%;"></td>
+            <td style="width: 25%;"></td>
+            <td style="width: 25%;"></td>
+            <td style="width: 25%;"></td>
+          </tr>
+        </table>
+
+        <a href="http://google.com" title="Aenean sed hendrerit">Aenean sed hendrerit</a> velit. Nullam eu mi dolor. Maecenas et erat risus. Nulla ac auctor diam, non aliquet ante. Fusce ullamcorper, ipsum id tempor lacinia, sem tellus malesuada libero, quis ornare sem massa in orci. Sed dictum dictum tristique. Proin eros turpis, ultricies eu sapien eget, ornare rutrum ipsum. Pellentesque eros nisl, ornare nec ipsum sed, aliquet sollicitudin erat. Nulla tincidunt porta <strong>vehicula.</strong><br/>
+      </div>
+  </div>
+
+  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
+  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.3.0/codemirror.min.js"></script>
+  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.3.0/mode/xml/xml.min.js"></script>
+  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/at.js/1.5.4/js/jquery.atwho.min.js"></script>
+
+  <script type="text/javascript" src="../../js/froala_editor.min.js" ></script>
+
+  <script type="text/javascript" src="../../js/plugins/align.min.js"></script>
+  <script type="text/javascript" src="../../js/plugins/code_beautifier.min.js"></script>
+  <script type="text/javascript" src="../../js/plugins/code_view.min.js"></script>
+  <script type="text/javascript" src="../../js/plugins/colors.min.js"></script>
+  <script type="text/javascript" src="../../js/plugins/draggable.min.js"></script>
+  <script type="text/javascript" src="../../js/plugins/emoticons.min.js"></script>
+  <script type="text/javascript" src="../../js/plugins/font_size.min.js"></script>
+  <script type="text/javascript" src="../../js/plugins/font_family.min.js"></script>
+  <script type="text/javascript" src="../../js/plugins/image.min.js"></script>
+  <script type="text/javascript" src="../../js/plugins/file.min.js"></script>
+  <script type="text/javascript" src="../../js/plugins/image_manager.min.js"></script>
+  <script type="text/javascript" src="../../js/plugins/line_breaker.min.js"></script>
+  <script type="text/javascript" src="../../js/plugins/link.min.js"></script>
+  <script type="text/javascript" src="../../js/plugins/lists.min.js"></script>
+  <script type="text/javascript" src="../../js/plugins/paragraph_format.min.js"></script>
+  <script type="text/javascript" src="../../js/plugins/paragraph_style.min.js"></script>
+  <script type="text/javascript" src="../../js/plugins/video.min.js"></script>
+  <script type="text/javascript" src="../../js/plugins/table.min.js"></script>
+  <script type="text/javascript" src="../../js/plugins/url.min.js"></script>
+  <script type="text/javascript" src="../../js/plugins/entities.min.js"></script>
+  <script type="text/javascript" src="../../js/plugins/char_counter.min.js"></script>
+  <script type="text/javascript" src="../../js/plugins/inline_style.min.js"></script>
+  <script type="text/javascript" src="../../js/plugins/save.min.js"></script>
+  <script type="text/javascript" src="../../js/plugins/fullscreen.min.js"></script>
+  <script type="text/javascript" src="../../js/plugins/quote.min.js"></script>
+
+  <script>
+    $(function(){
+      var datasource = ["Jacob", "Isabella", "Ethan", "Emma", "Michael", "Olivia" ];
+
+      var names = $.map(datasource, function (value, i) {
+        return {
+          'id': i, 'name': value, 'email': value + "@email.com"
+        };
+      });
+
+      var config = {
+        at: "@",
+        data: names,
+        displayTpl: '<li>${name} <small>${email}</small></li>',
+        limit: 200
+      }
+
+      $('#edit')
+        .on('froalaEditor.initialized', function (e, editor) {
+          editor.$el
+            .atwho(config)
+            .on('inserted.atwho', function () {
+              editor.$el.find('.atwho-inserted').removeAttr('contenteditable');
+            })
+
+        	editor.events.on('keydown', function (e) {
+            if (e.which == $.FroalaEditor.KEYCODE.ENTER && editor.$el.atwho('isSelecting')) {
+              return false;
+            }
+          }, true);
+        })
+        .froalaEditor()
+    });
+  </script>
+</body>
+</html>

+ 94 - 0
modules/boonex/froala/plugins/froala/html/3rd-party/aviary/index.html

@@ -0,0 +1,94 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0"/>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css">
+    <link rel="stylesheet" href="../../../css/froala_editor.css">
+    <link rel="stylesheet" href="../../../css/froala_style.css">
+    <link rel="stylesheet" href="../../../css/plugins/colors.css">
+    <link rel="stylesheet" href="../../../css/plugins/emoticons.css">
+    <link rel="stylesheet" href="../../../css/plugins/image_manager.css">
+    <link rel="stylesheet" href="../../../css/plugins/image.css">
+    <link rel="stylesheet" href="../../../css/plugins/line_breaker.css">
+    <link rel="stylesheet" href="../../../css/plugins/table.css">
+    <link rel="stylesheet" href="../../../css/plugins/char_counter.css">
+    <link rel="stylesheet" href="../../../css/plugins/video.css">
+    <link rel="stylesheet" href="../../../css/plugins/fullscreen.css">
+    <link rel="stylesheet" href="../../../css/plugins/file.css">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/at.js/1.4.0/css/jquery.atwho.min.css">
+
+    <!-- Code Mirror CSS file. -->
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.3.0/codemirror.min.css">
+
+    <!-- Include the plugin CSS file. -->
+    <link rel="stylesheet" href="../../../css/plugins/code_view.css">
+
+    <style>
+        body {
+            text-align: center;
+        }
+
+        div#editor {
+            width: 81%;
+            margin: auto;
+            text-align: left;
+        }
+        div#froala-details {
+            text-align: left;
+        }
+
+    </style>
+</head>
+
+<body>
+<div id="editor">
+    <div id="edit" style="margin-top: 30px;">
+        <h1>Aviary integration</h1>
+
+        <img class="fr-fir fr-dii" src="../../../img/photo1.jpg" alt="Old Clock" width="300"/>
+
+        <p>Click on the image then apply rich image editing using the advanced edit button. This will launch the aviary image editor plugin.</p>
+        <p>To integrate the plugin an api key it will be needed but it's easily obtained from</p>
+
+    </div>
+</div>
+<div id="froala-details">
+    <h3>Use Aviary plugin instructions.</h3>
+    <p>To integrate the Aviary plugin on your own domain/website there are 3 simple steps to follow.</p>
+    <p>1. Go to <a href="https://creativesdk.adobe.com/docs/web/#/index.html">Adobe Creative</a> and register for a new account or sign if you already have one.</p>
+    <p>2. Follow the steps to <a href="https://creativesdk.zendesk.com/hc/en-us/articles/216369343-Why-and-how-to-register-my-app-"> register your new app</a>, this will generate an api key that will be used later on.</p>
+    <p>3. You should have your api key by now, so what's left to do is to initialize the Froala Editor and use your own api key.
+        To do this you should pass <code> aviaryKey: 'your api key'</code> to the Froala Editor on init.</p>
+</div>
+
+<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
+<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.3.0/codemirror.min.js"></script>
+<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.3.0/mode/xml/xml.min.js"></script>
+<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/at.js/1.4.0/js/jquery.atwho.min.js"></script>
+
+<script type="text/javascript" src="../../../js/froala_editor.min.js" ></script>
+
+<script type="text/javascript" src="../../../js/plugins/align.min.js"></script>
+<script type="text/javascript" src="../../../js/plugins/code_beautifier.min.js"></script>
+<script type="text/javascript" src="../../../js/plugins/code_view.min.js"></script>
+<script type="text/javascript" src="../../../js/plugins/font_size.min.js"></script>
+<script type="text/javascript" src="../../../js/plugins/font_family.min.js"></script>
+<script type="text/javascript" src="../../../js/plugins/image.min.js"></script>
+<script type="text/javascript" src="../../../js/plugins/image_manager.min.js"></script>
+<script type="text/javascript" src="../../../js/plugins/link.min.js"></script>
+<script type="text/javascript" src="../../../js/plugins/lists.min.js"></script>
+<script type="text/javascript" src="../../../js/plugins/paragraph_format.min.js"></script>
+<script type="text/javascript" src="../../../js/plugins/url.min.js"></script>
+<script type="text/javascript" src="../../../js/plugins/entities.min.js"></script>
+<script type="text/javascript" src="../../../js/plugins/save.min.js"></script>
+<script type="text/javascript" src="../../../js/third_party/image_aviary.min.js"></script>
+
+<script>
+  $(function(){
+    $('#edit').froalaEditor({
+    })
+  });
+</script>
+</body>
+</html>

+ 106 - 0
modules/boonex/froala/plugins/froala/html/3rd-party/bootstrap/grid.html

@@ -0,0 +1,106 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0"/>
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css">
+  <link rel="stylesheet" href="../../../css/froala_editor.css">
+  <link rel="stylesheet" href="../../../css/froala_style.css">
+  <link rel="stylesheet" href="../../../css/plugins/code_view.css">
+  <link rel="stylesheet" href="../../../css/plugins/colors.css">
+  <link rel="stylesheet" href="../../../css/plugins/emoticons.css">
+  <link rel="stylesheet" href="../../../css/plugins/image_manager.css">
+  <link rel="stylesheet" href="../../../css/plugins/image.css">
+  <link rel="stylesheet" href="../../../css/plugins/line_breaker.css">
+  <link rel="stylesheet" href="../../../css/plugins/table.css">
+  <link rel="stylesheet" href="../../../css/plugins/char_counter.css">
+  <link rel="stylesheet" href="../../../css/plugins/video.css">
+  <link rel="stylesheet" href="../../../css/plugins/fullscreen.css">
+  <link rel="stylesheet" href="../../../css/plugins/file.css">
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.3.0/codemirror.min.css">
+
+  <!-- Latest compiled and minified CSS -->
+  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
+
+  <!-- Optional theme -->
+  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
+
+  <style>
+      body {
+          text-align: center;
+      }
+
+      div#editor {
+          width: 81%;
+          margin: auto;
+          text-align: left;
+      }
+
+      .fr-inner:not(.row) {
+        border: solid 1px #CCC;
+      }
+  </style>
+</head>
+
+<body>
+  <div id="editor">
+      <textarea id='edit'><div style="margin: 0 15px;">
+          <div class="row fr-inner">
+            <div class="col-xs-12 col-md-8 fr-inner">.col-xs-12 .col-md-8</div>
+            <div class="col-xs-6 col-md-4 fr-inner">.col-xs-6 .col-md-4</div>
+          </div>
+          <div class="row fr-inner">
+            <div class="col-xs-6 col-md-4 fr-inner">.col-xs-6 .col-md-4</div>
+            <div class="col-xs-6 col-md-4 fr-inner">.col-xs-6 .col-md-4</div>
+            <div class="col-xs-6 col-md-4 fr-inner">.col-xs-6 .col-md-4</div>
+          </div>
+          <div class="row fr-inner">
+            <div class="col-xs-6 fr-inner">.col-xs-6</div>
+            <div class="col-xs-6 fr-inner">.col-xs-6</div>
+          </div>
+        </div></textarea>
+  </div>
+
+  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
+  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.3.0/codemirror.min.js"></script>
+  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.3.0/mode/xml/xml.min.js"></script>
+  <script type="text/javascript" src="../../../js/froala_editor.min.js" ></script>
+  <script type="text/javascript" src="../../../js/plugins/align.min.js"></script>
+  <script type="text/javascript" src="../../../js/plugins/code_beautifier.min.js"></script>
+  <script type="text/javascript" src="../../../js/plugins/code_view.min.js"></script>
+  <script type="text/javascript" src="../../../js/plugins/colors.min.js"></script>
+  <script type="text/javascript" src="../../../js/plugins/draggable.min.js"></script>
+  <script type="text/javascript" src="../../../js/plugins/emoticons.min.js"></script>
+  <script type="text/javascript" src="../../../js/plugins/font_size.min.js"></script>
+  <script type="text/javascript" src="../../../js/plugins/font_family.min.js"></script>
+  <script type="text/javascript" src="../../../js/plugins/image.min.js"></script>
+  <script type="text/javascript" src="../../../js/plugins/file.min.js"></script>
+  <script type="text/javascript" src="../../../js/plugins/image_manager.min.js"></script>
+  <script type="text/javascript" src="../../../js/plugins/line_breaker.min.js"></script>
+  <script type="text/javascript" src="../../../js/plugins/link.min.js"></script>
+  <script type="text/javascript" src="../../../js/plugins/lists.min.js"></script>
+  <script type="text/javascript" src="../../../js/plugins/paragraph_format.min.js"></script>
+  <script type="text/javascript" src="../../../js/plugins/paragraph_style.min.js"></script>
+  <script type="text/javascript" src="../../../js/plugins/video.min.js"></script>
+  <script type="text/javascript" src="../../../js/plugins/table.min.js"></script>
+  <script type="text/javascript" src="../../../js/plugins/url.min.js"></script>
+  <script type="text/javascript" src="../../../js/plugins/entities.min.js"></script>
+  <script type="text/javascript" src="../../../js/plugins/char_counter.min.js"></script>
+  <script type="text/javascript" src="../../../js/plugins/inline_style.min.js"></script>
+  <script type="text/javascript" src="../../../js/plugins/save.min.js"></script>
+  <script type="text/javascript" src="../../../js/plugins/fullscreen.min.js"></script>
+  <script type="text/javascript" src="../../../js/plugins/quote.min.js"></script>
+  <script type="text/javascript" src="../../../js/languages/ro.js"></script>
+
+  <!-- Latest compiled and minified JavaScript -->
+  <script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
+
+  <script>
+    $(function(){
+      $('#edit').froalaEditor({
+        enter: $.FroalaEditor.ENTER_BR
+      })
+    });
+  </script>
+</body>
+</html>

+ 100 - 0
modules/boonex/froala/plugins/froala/html/3rd-party/bootstrap/lists.html

@@ -0,0 +1,100 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0"/>
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css">
+  <link rel="stylesheet" href="../../../css/froala_editor.css">
+  <link rel="stylesheet" href="../../../css/froala_style.css">
+  <link rel="stylesheet" href="../../../css/plugins/code_view.css">
+  <link rel="stylesheet" href="../../../css/plugins/colors.css">
+  <link rel="stylesheet" href="../../../css/plugins/emoticons.css">
+  <link rel="stylesheet" href="../../../css/plugins/image_manager.css">
+  <link rel="stylesheet" href="../../../css/plugins/image.css">
+  <link rel="stylesheet" href="../../../css/plugins/line_breaker.css">
+  <link rel="stylesheet" href="../../../css/plugins/table.css">
+  <link rel="stylesheet" href="../../../css/plugins/char_counter.css">
+  <link rel="stylesheet" href="../../../css/plugins/video.css">
+  <link rel="stylesheet" href="../../../css/plugins/fullscreen.css">
+  <link rel="stylesheet" href="../../../css/plugins/file.css">
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.3.0/codemirror.min.css">
+
+  <!-- Latest compiled and minified CSS -->
+  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
+
+  <!-- Optional theme -->
+  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
+
+  <style>
+      body {
+          text-align: center;
+      }
+
+      div#editor {
+          width: 81%;
+          margin: auto;
+          text-align: left;
+      }
+
+      .fr-inner:not(.row) {
+        border: solid 1px #CCC;
+      }
+  </style>
+</head>
+
+<body>
+  <div id="editor">
+      <textarea id='edit'>
+          <ul class="list-group">
+            <li class="list-group-item">Cras justo odio</li>
+            <li class="list-group-item">Dapibus ac facilisis in</li>
+            <li class="list-group-item">Morbi leo risus</li>
+            <li class="list-group-item">Porta ac consectetur ac</li>
+            <li class="list-group-item">Vestibulum at eros</li>
+          </ul>
+      </textarea>
+  </div>
+
+  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
+  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.3.0/codemirror.min.js"></script>
+  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.3.0/mode/xml/xml.min.js"></script>
+  <script type="text/javascript" src="../../../js/froala_editor.min.js" ></script>
+  <script type="text/javascript" src="../../../js/plugins/align.min.js"></script>
+  <script type="text/javascript" src="../../../js/plugins/code_beautifier.min.js"></script>
+  <script type="text/javascript" src="../../../js/plugins/code_view.min.js"></script>
+  <script type="text/javascript" src="../../../js/plugins/colors.min.js"></script>
+  <script type="text/javascript" src="../../../js/plugins/draggable.min.js"></script>
+  <script type="text/javascript" src="../../../js/plugins/emoticons.min.js"></script>
+  <script type="text/javascript" src="../../../js/plugins/font_size.min.js"></script>
+  <script type="text/javascript" src="../../../js/plugins/font_family.min.js"></script>
+  <script type="text/javascript" src="../../../js/plugins/image.min.js"></script>
+  <script type="text/javascript" src="../../../js/plugins/file.min.js"></script>
+  <script type="text/javascript" src="../../../js/plugins/image_manager.min.js"></script>
+  <script type="text/javascript" src="../../../js/plugins/line_breaker.min.js"></script>
+  <script type="text/javascript" src="../../../js/plugins/link.min.js"></script>
+  <script type="text/javascript" src="../../../js/plugins/lists.min.js"></script>
+  <script type="text/javascript" src="../../../js/plugins/paragraph_format.min.js"></script>
+  <script type="text/javascript" src="../../../js/plugins/paragraph_style.min.js"></script>
+  <script type="text/javascript" src="../../../js/plugins/video.min.js"></script>
+  <script type="text/javascript" src="../../../js/plugins/table.min.js"></script>
+  <script type="text/javascript" src="../../../js/plugins/url.min.js"></script>
+  <script type="text/javascript" src="../../../js/plugins/entities.min.js"></script>
+  <script type="text/javascript" src="../../../js/plugins/char_counter.min.js"></script>
+  <script type="text/javascript" src="../../../js/plugins/inline_style.min.js"></script>
+  <script type="text/javascript" src="../../../js/plugins/save.min.js"></script>
+  <script type="text/javascript" src="../../../js/plugins/fullscreen.min.js"></script>
+  <script type="text/javascript" src="../../../js/plugins/quote.min.js"></script>
+  <script type="text/javascript" src="../../../js/languages/ro.js"></script>
+
+  <!-- Latest compiled and minified JavaScript -->
+  <script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
+
+  <script>
+    $(function(){
+      $('#edit').froalaEditor({
+        enter: $.FroalaEditor.ENTER_BR
+      })
+    });
+  </script>
+</body>
+</html>

+ 153 - 0
modules/boonex/froala/plugins/froala/html/3rd-party/bootstrap/modal.html

@@ -0,0 +1,153 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0" />
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css">
+  <link rel="stylesheet" href="../../../css/froala_editor.css">
+  <link rel="stylesheet" href="../../../css/froala_style.css">
+  <link rel="stylesheet" href="../../../css/plugins/code_view.css">
+  <link rel="stylesheet" href="../../../css/plugins/colors.css">
+  <link rel="stylesheet" href="../../../css/plugins/emoticons.css">
+  <link rel="stylesheet" href="../../../css/plugins/image_manager.css">
+  <link rel="stylesheet" href="../../../css/plugins/image.css">
+  <link rel="stylesheet" href="../../../css/plugins/line_breaker.css">
+  <link rel="stylesheet" href="../../../css/plugins/table.css">
+  <link rel="stylesheet" href="../../../css/plugins/char_counter.css">
+  <link rel="stylesheet" href="../../../css/plugins/video.css">
+  <link rel="stylesheet" href="../../../css/plugins/fullscreen.css">
+  <link rel="stylesheet" href="../../../css/plugins/file.css">
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.3.0/codemirror.min.css">
+
+  <!-- Latest compiled and minified CSS -->
+  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
+
+  <!-- Optional theme -->
+  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
+
+  <style>
+    html,
+    body {
+      text-align: center;
+      height: 100%;
+    }
+
+    div#editor {
+      width: 81%;
+      margin: auto;
+      text-align: left;
+    }
+
+    .modal-body {
+      height: 500px;
+    }
+
+  </style>
+</head>
+
+<body>
+  <div id="editor">
+    <!-- Button trigger modal -->
+    <button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
+        Launch demo modal
+      </button>
+
+    <!-- Modal -->
+    <div class="modal fade" id="myModal" tabindex="-1" aria-labelledby="myModalLabel">
+      <div class="modal-dialog" role="document">
+        <div class="modal-content">
+          <div class="modal-header">
+            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
+            <h4 class="modal-title" id="myModalLabel">Froala WYSIWYG HTML Editor</h4>
+          </div>
+          <div class="modal-body">
+            <div id='edit'>
+              <h1>Click and edit</h1>
+
+              <img class="fr-fir fr-dii" src="../../../img/photo1.jpg" alt="Old Clock" width="300" />Lorem <strong>ipsum</strong> dolor sit amet, consectetur <strong>adipiscing <em>elit.</em> Donec</strong> facilisis diam in odio iaculis blandit. Nunc
+              eu mauris sit amet purus <strong>viverra</strong><em> gravida</em> ut a dui.<br/>
+              <ul>
+                <li>Vivamus nec rutrum augue, pharetra faucibus purus. Maecenas non orci sagittis, vehicula lorem et, dignissim nunc.</li>
+                <li>Suspendisse suscipit, diam non varius facilisis, enim libero tincidunt magna, sit amet iaculis eros libero sit amet eros. Vestibulum a rhoncus felis.
+                  <ol>
+                    <li>Nam lacus nulla, consequat ac lacus sit amet, accumsan pellentesque risus. Aenean viverra mi at urna mattis fermentum.</li>
+                    <li>Curabitur porta metus in tortor elementum, in semper nulla ullamcorper. Vestibulum mattis tempor tortor quis gravida. In rhoncus risus nibh. Nullam condimentum dapibus massa vel fringilla. Sed hendrerit sed est quis facilisis. Ut sit
+                      amet nibh sem. Pellentesque imperdiet mollis libero.</li>
+                  </ol>
+                </li>
+              </ul>
+
+              <table style="width: 100%;">
+                <tr>
+                  <td>asdasd</td>
+                  <td>asdasdasd</td>
+                </tr>
+              </table>
+
+              Sed dictum dictum tristique. Proin eros turpis, ultricies eu sapien eget, ornare rutrum ipsum. Pellentesque eros nisl, ornare nec ipsum sed, aliquet sollicitudin erat. Nulla tincidunt porta <strong>vehicula.</strong><br/>
+
+              <a href="http://google.com" title="Aenean sed hendrerit">Aenean sed hendrerit</a> velit. Nullam eu mi dolor. Maecenas et erat risus. Nulla ac auctor diam, non aliquet ante. Fusce ullamcorper, ipsum id tempor lacinia, sem tellus malesuada
+              libero, quis ornare sem massa in orci. Sed dictum dictum tristique. Proin eros turpis, ultricies eu sapien eget, ornare rutrum ipsum. Pellentesque eros nisl, ornare nec ipsum sed, aliquet sollicitudin erat. Nulla tincidunt porta <strong>vehicula.</strong><br/>
+
+              <i>Nullam laoreet</i> imperdiet orci ac euismod. Curabitur vel lectus nisi. Phasellus accumsan aliquet augue, eu rutrum tellus iaculis in. Nunc viverra ultrices mollis. Curabitur malesuada nunc massa, ut imperdiet arcu lobortis sed. Cras
+              ac arcu mauris. Maecenas id lectus nisl. Donec consectetur scelerisque quam at ultricies. Nam quis magna iaculis, condimentum metus ut, elementum metus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis
+              egestas. Vivamus id tempus nisi.<br/>
+            </div>
+          </div>
+          <div class="modal-footer">
+            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
+            <button type="button" class="btn btn-primary">Save changes</button>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
+  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.3.0/codemirror.min.js"></script>
+  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.3.0/mode/xml/xml.min.js"></script>
+  <script type="text/javascript" src="../../../js/froala_editor.min.js"></script>
+  <script type="text/javascript" src="../../../js/plugins/align.min.js"></script>
+  <script type="text/javascript" src="../../../js/plugins/code_beautifier.min.js"></script>
+  <script type="text/javascript" src="../../../js/plugins/code_view.min.js"></script>
+  <script type="text/javascript" src="../../../js/plugins/colors.min.js"></script>
+  <script type="text/javascript" src="../../../js/plugins/draggable.min.js"></script>
+  <script type="text/javascript" src="../../../js/plugins/emoticons.min.js"></script>
+  <script type="text/javascript" src="../../../js/plugins/font_size.min.js"></script>
+  <script type="text/javascript" src="../../../js/plugins/font_family.min.js"></script>
+  <script type="text/javascript" src="../../../js/plugins/image.min.js"></script>
+  <script type="text/javascript" src="../../../js/plugins/file.min.js"></script>
+  <script type="text/javascript" src="../../../js/plugins/image_manager.min.js"></script>
+  <script type="text/javascript" src="../../../js/plugins/line_breaker.min.js"></script>
+  <script type="text/javascript" src="../../../js/plugins/link.min.js"></script>
+  <script type="text/javascript" src="../../../js/plugins/lists.min.js"></script>
+  <script type="text/javascript" src="../../../js/plugins/paragraph_format.min.js"></script>
+  <script type="text/javascript" src="../../../js/plugins/paragraph_style.min.js"></script>
+  <script type="text/javascript" src="../../../js/plugins/video.min.js"></script>
+  <script type="text/javascript" src="../../../js/plugins/table.min.js"></script>
+  <script type="text/javascript" src="../../../js/plugins/url.min.js"></script>
+  <script type="text/javascript" src="../../../js/plugins/entities.min.js"></script>
+  <script type="text/javascript" src="../../../js/plugins/char_counter.min.js"></script>
+  <script type="text/javascript" src="../../../js/plugins/inline_style.min.js"></script>
+  <script type="text/javascript" src="../../../js/plugins/save.min.js"></script>
+  <script type="text/javascript" src="../../../js/plugins/fullscreen.min.js"></script>
+  <script type="text/javascript" src="../../../js/plugins/quote.min.js"></script>
+  <script type="text/javascript" src="../../../js/languages/ro.js"></script>
+
+  <!-- Latest compiled and minified JavaScript -->
+  <script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
+
+  <script>
+    $(function() {
+      $('#edit').froalaEditor({
+        enter: $.FroalaEditor.ENTER_P,
+        height: 350,
+        zIndex: 8000
+      })
+    });
+
+  </script>
+</body>
+
+</html>

+ 85 - 0
modules/boonex/froala/plugins/froala/html/3rd-party/code-mirror.html

@@ -0,0 +1,85 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0"/>
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css">
+  <link rel="stylesheet" href="../../css/froala_editor.css">
+  <link rel="stylesheet" href="../../css/froala_style.css">
+  <link rel="stylesheet" href="../../css/plugins/colors.css">
+  <link rel="stylesheet" href="../../css/plugins/emoticons.css">
+  <link rel="stylesheet" href="../../css/plugins/image_manager.css">
+  <link rel="stylesheet" href="../../css/plugins/image.css">
+  <link rel="stylesheet" href="../../css/plugins/line_breaker.css">
+  <link rel="stylesheet" href="../../css/plugins/table.css">
+  <link rel="stylesheet" href="../../css/plugins/char_counter.css">
+  <link rel="stylesheet" href="../../css/plugins/video.css">
+  <link rel="stylesheet" href="../../css/plugins/fullscreen.css">
+  <link rel="stylesheet" href="../../css/plugins/file.css">
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/at.js/1.4.0/css/jquery.atwho.min.css">
+
+  <!-- Code Mirror CSS file. -->
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.3.0/codemirror.min.css">
+
+  <!-- Include the plugin CSS file. -->
+  <link rel="stylesheet" href="../../css/plugins/code_view.css">
+
+  <style>
+      body {
+        text-align: center;
+      }
+
+      div#editor {
+        width: 81%;
+        margin: auto;
+        text-align: left;
+      }
+
+      .atwho-view-ul {
+        text-align: left;
+      }
+  </style>
+</head>
+
+<body>
+  <div id="editor">
+
+    <div id="edit" style="margin-top: 30px;">
+      <h1>Code Mirror</h1>
+
+      <img class="fr-fir fr-dii" src="../../img/photo1.jpg" alt="Old Clock" width="300"/>Click the Code View button to see the editor content's HTML.
+
+      <p>The code_view.min.js plugin can be used as is or you can use also use it together with Code Mirror. All there is to be done is to include the corresponding Code Mirror CSS and JS files.</p>
+    </div>
+  </div>
+
+  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
+  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.3.0/codemirror.min.js"></script>
+  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.3.0/mode/xml/xml.min.js"></script>
+  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/at.js/1.4.0/js/jquery.atwho.min.js"></script>
+
+  <script type="text/javascript" src="../../js/froala_editor.min.js" ></script>
+
+  <script type="text/javascript" src="../../js/plugins/align.min.js"></script>
+  <script type="text/javascript" src="../../js/plugins/code_beautifier.min.js"></script>
+  <script type="text/javascript" src="../../js/plugins/code_view.min.js"></script>
+  <script type="text/javascript" src="../../js/plugins/font_size.min.js"></script>
+  <script type="text/javascript" src="../../js/plugins/font_family.min.js"></script>
+  <script type="text/javascript" src="../../js/plugins/image.min.js"></script>
+  <script type="text/javascript" src="../../js/plugins/image_manager.min.js"></script>
+  <script type="text/javascript" src="../../js/plugins/link.min.js"></script>
+  <script type="text/javascript" src="../../js/plugins/lists.min.js"></script>
+  <script type="text/javascript" src="../../js/plugins/paragraph_format.min.js"></script>
+  <script type="text/javascript" src="../../js/plugins/url.min.js"></script>
+  <script type="text/javascript" src="../../js/plugins/entities.min.js"></script>
+  <script type="text/javascript" src="../../js/plugins/save.min.js"></script>
+
+  <script>
+    $(function(){
+      $('#edit').froalaEditor({
+        toolbarButtons: ['bold', 'italic', 'underline', 'fontSize', 'fontFamily', '|', 'paragraphFormat', 'align', 'formatOL', 'formatUL', 'indent', 'outdent', '|', 'insertLink', 'insertImage', 'undo', 'redo', 'html']
+      })
+    });
+  </script>
+</body>
+</html>

+ 97 - 0
modules/boonex/froala/plugins/froala/html/3rd-party/jquery/mobile.html

@@ -0,0 +1,97 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0"/>
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css">
+  <link rel="stylesheet" href="../../../css/froala_editor.css">
+  <link rel="stylesheet" href="../../../css/froala_style.css">
+  <link rel="stylesheet" href="../../../css/plugins/code_view.css">
+  <link rel="stylesheet" href="../../../css/plugins/colors.css">
+  <link rel="stylesheet" href="../../../css/plugins/emoticons.css">
+  <link rel="stylesheet" href="../../../css/plugins/image_manager.css">
+  <link rel="stylesheet" href="../../../css/plugins/image.css">
+  <link rel="stylesheet" href="../../../css/plugins/line_breaker.css">
+  <link rel="stylesheet" href="../../../css/plugins/table.css">
+  <link rel="stylesheet" href="../../../css/plugins/char_counter.css">
+  <link rel="stylesheet" href="../../../css/plugins/video.css">
+  <link rel="stylesheet" href="../../../css/plugins/fullscreen.css">
+  <link rel="stylesheet" href="../../../css/plugins/file.css">
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.3.0/codemirror.min.css">
+  <link rel="stylesheet" href="http://code.jquery.com/mobile/git/jquery.mobile-git.css">
+
+  <style>
+      body {
+          text-align: center;
+      }
+
+      div#editor {
+          width: 81%;
+          margin: auto;
+          text-align: left;
+      }
+  </style>
+</head>
+
+<body>
+  <div data-role="page">
+
+  	<div data-role="header">
+  		<h1>Page Title</h1>
+  	</div><!-- /header -->
+
+  	<div role="main" class="ui-content">
+          <textarea name="edit" id="edit">Click here to edit</textarea>
+  	</div><!-- /content -->
+
+  	<div data-role="footer">
+  		<h4>Page Footer</h4>
+  	</div><!-- /footer -->
+  </div><!-- /page -->
+
+  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
+  <script type="text/javascript" src="http://demos.jquerymobile.com/1.4.5/js/jquery.mobile-1.4.5.min.js"></script>
+  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.3.0/codemirror.min.js"></script>
+  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.3.0/mode/xml/xml.min.js"></script>
+
+  <script type="text/javascript" src="../../../js/froala_editor.min.js" ></script>
+
+  <script type="text/javascript" src="../../../js/plugins/align.min.js"></script>
+  <script type="text/javascript" src="../../../js/plugins/code_beautifier.min.js"></script>
+  <script type="text/javascript" src="../../../js/plugins/code_view.min.js"></script>
+  <script type="text/javascript" src="../../../js/plugins/colors.min.js"></script>
+  <script type="text/javascript" src="../../../js/plugins/draggable.min.js"></script>
+  <script type="text/javascript" src="../../../js/plugins/emoticons.min.js"></script>
+  <script type="text/javascript" src="../../../js/plugins/font_size.min.js"></script>
+  <script type="text/javascript" src="../../../js/plugins/font_family.min.js"></script>
+  <script type="text/javascript" src="../../../js/plugins/image.min.js"></script>
+  <script type="text/javascript" src="../../../js/plugins/file.min.js"></script>
+  <script type="text/javascript" src="../../../js/plugins/image_manager.min.js"></script>
+  <script type="text/javascript" src="../../../js/plugins/line_breaker.min.js"></script>
+  <script type="text/javascript" src="../../../js/plugins/link.min.js"></script>
+  <script type="text/javascript" src="../../../js/plugins/lists.min.js"></script>
+  <script type="text/javascript" src="../../../js/plugins/paragraph_format.min.js"></script>
+  <script type="text/javascript" src="../../../js/plugins/paragraph_style.min.js"></script>
+  <script type="text/javascript" src="../../../js/plugins/video.min.js"></script>
+  <script type="text/javascript" src="../../../js/plugins/table.min.js"></script>
+  <script type="text/javascript" src="../../../js/plugins/url.min.js"></script>
+  <script type="text/javascript" src="../../../js/plugins/entities.min.js"></script>
+  <script type="text/javascript" src="../../../js/plugins/char_counter.min.js"></script>
+  <script type="text/javascript" src="../../../js/plugins/inline_style.min.js"></script>
+  <script type="text/javascript" src="../../../js/plugins/save.min.js"></script>
+  <script type="text/javascript" src="../../../js/plugins/fullscreen.min.js"></script>
+  <script type="text/javascript" src="../../../js/plugins/quote.min.js"></script>
+
+  <script type="text/javascript" src="../../../js/languages/ro.js"></script>
+
+  <script>
+     $(document).on('pageinit', function () {
+      $('#edit').froalaEditor({
+        enter: $.FroalaEditor.ENTER_P,
+        toolbarInline: true,
+        toolbarButtons: ['bold', 'italic', 'underline']
+      })
+    });
+  </script>
+</body>
+</html>

+ 156 - 0
modules/boonex/froala/plugins/froala/html/3rd-party/jquery/ui_modal.html

@@ -0,0 +1,156 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0"/>
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css">
+  <link rel="stylesheet" href="../../../css/froala_editor.css">
+  <link rel="stylesheet" href="../../../css/froala_style.css">
+  <link rel="stylesheet" href="../../../css/plugins/code_view.css">
+  <link rel="stylesheet" href="../../../css/plugins/colors.css">
+  <link rel="stylesheet" href="../../../css/plugins/emoticons.css">
+  <link rel="stylesheet" href="../../../css/plugins/image_manager.css">
+  <link rel="stylesheet" href="../../../css/plugins/image.css">
+  <link rel="stylesheet" href="../../../css/plugins/line_breaker.css">
+  <link rel="stylesheet" href="../../../css/plugins/table.css">
+  <link rel="stylesheet" href="../../../css/plugins/char_counter.css">
+  <link rel="stylesheet" href="../../../css/plugins/video.css">
+  <link rel="stylesheet" href="../../../css/plugins/fullscreen.css">
+  <link rel="stylesheet" href="../../../css/plugins/file.css">
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.3.0/codemirror.min.css">
+  <link rel="stylesheet" href="https://code.jquery.com/ui/1.11.0/themes/smoothness/jquery-ui.css">
+
+  <style>
+      body {
+          text-align: center;
+      }
+
+      div#editor {
+          width: 81%;
+          margin: auto;
+          text-align: left;
+      }
+
+      .ui-dialog, .ui-dialog-content {
+        overflow: visible !important;
+      }
+  </style>
+</head>
+
+<body>
+  <div id="editor">
+    <div id="dialog" title="Basic dialog">
+      <div id='edit'>
+        <h1>Click and edit</h1>
+
+        <img class="fr-fir fr-dii" src="../../../img/photo1.jpg" alt="Old Clock" width="300"/>Lorem  <strong>ipsum</strong> dolor sit amet, consectetur <strong>adipiscing <em>elit.</em> Donec</strong> facilisis diam in odio iaculis blandit. Nunc eu mauris sit amet purus <strong>viverra</strong><em> gravida</em> ut a dui.<br/>
+        <ul><li>Vivamus nec rutrum augue, pharetra faucibus purus. Maecenas non orci sagittis, vehicula lorem et, dignissim nunc.</li> <li>Suspendisse suscipit, diam non varius facilisis, enim libero tincidunt magna, sit amet iaculis eros libero sit amet eros. Vestibulum a rhoncus felis.<ol><li>Nam lacus nulla, consequat ac lacus sit amet, accumsan pellentesque risus. Aenean viverra mi at urna mattis fermentum.</li> <li>Curabitur porta metus in tortor elementum, in semper nulla ullamcorper. Vestibulum mattis tempor tortor quis gravida. In rhoncus risus nibh. Nullam condimentum dapibus massa vel fringilla. Sed hendrerit sed est quis facilisis. Ut sit amet nibh sem. Pellentesque imperdiet mollis libero.</li></ol></li></ul>
+
+        <table style="width: 100%;">
+          <tr><td style="width: 40%;">asdasd</td><td style="width: 60%;">asdasdasd</td></tr>
+        </table>
+
+        Sed dictum dictum tristique. Proin eros turpis, ultricies eu sapien eget, ornare rutrum ipsum. Pellentesque eros nisl, ornare nec ipsum sed, aliquet sollicitudin erat. Nulla tincidunt porta <strong>vehicula.</strong><br/>
+
+        <a href="http://google.com" title="Aenean sed hendrerit">Aenean sed hendrerit</a> velit. Nullam eu mi dolor. Maecenas et erat risus. Nulla ac auctor diam, non aliquet ante. Fusce ullamcorper, ipsum id tempor lacinia, sem tellus malesuada libero, quis ornare sem massa in orci. Sed dictum dictum tristique. Proin eros turpis, ultricies eu sapien eget, ornare rutrum ipsum. Pellentesque eros nisl, ornare nec ipsum sed, aliquet sollicitudin erat. Nulla tincidunt porta <strong>vehicula.</strong><br/>
+
+        <i>Nullam laoreet</i> imperdiet orci ac euismod. Curabitur vel lectus nisi. Phasellus accumsan aliquet augue, eu rutrum tellus iaculis in. Nunc viverra ultrices mollis. Curabitur malesuada nunc massa, ut imperdiet arcu lobortis sed. Cras ac arcu mauris. Maecenas id lectus nisl. Donec consectetur scelerisque quam at ultricies. Nam quis magna iaculis, condimentum metus ut, elementum metus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vivamus id tempus nisi.<br/>
+      </div>
+    </div>
+
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam pretium efficitur lectus, porttitor ornare dolor luctus eu. Vivamus auctor nunc non vestibulum tempor. Integer tristique massa sit amet mi auctor euismod. In finibus nec purus et volutpat. Nullam consectetur est id lorem posuere, quis blandit eros dignissim. Curabitur fringilla iaculis est sed porttitor. Duis in nisi felis.
+
+      Suspendisse ex sem, eleifend vitae felis eu, finibus malesuada odio. Duis eget risus in sem facilisis venenatis eget nec turpis. Aliquam ac sapien dictum, tempor libero sed, feugiat odio. Mauris bibendum nisi justo, eu pulvinar neque tempor ac. Vivamus suscipit in elit interdum euismod. Etiam porta molestie lobortis. Nam consectetur malesuada ante non sagittis. Nunc nec odio ex. Duis non hendrerit diam. Integer vulputate, mi a gravida pretium, ligula libero laoreet libero, in vestibulum arcu velit at velit.
+
+      Suspendisse at neque commodo, sollicitudin lectus sed, blandit sem. Curabitur pharetra suscipit elit ac ultrices. Quisque ullamcorper quis massa et fringilla. Donec euismod, metus id porttitor semper, tortor velit accumsan metus, ut malesuada risus elit eu lorem. Mauris magna odio, efficitur et elit eu, suscipit fermentum sapien. Donec lacinia aliquet augue eu convallis. Suspendisse tincidunt lacus ac ipsum mattis malesuada. Curabitur pellentesque nec nulla ut commodo. Suspendisse pretium nunc in risus iaculis dignissim. Donec faucibus tempus lectus, vel ultrices lectus tincidunt et. Mauris pulvinar ut est in iaculis. Maecenas facilisis enim nec pharetra mattis. Aliquam laoreet egestas lacus, et porta nisl. Ut euismod laoreet purus sed eleifend. Vivamus ullamcorper sodales arcu, sit amet accumsan augue placerat semper. Duis condimentum mattis nulla sed consequat.
+
+      Donec non dui ligula. Aliquam id efficitur massa. Donec tristique aliquet dolor, quis rhoncus felis dignissim sit amet. Duis pellentesque orci eget rhoncus lacinia. Ut dapibus neque id ex fringilla, vitae lobortis turpis interdum. Donec mi lectus, finibus id placerat ut, molestie sit amet erat. Vivamus laoreet semper dui, id efficitur eros. Etiam mollis a nisi a ullamcorper. Vivamus ut porta odio. Maecenas dictum dignissim faucibus. Vestibulum lectus lacus, tempus pulvinar fermentum in, suscipit eget ex. Sed mollis non libero at dignissim. Curabitur non justo vel dui convallis feugiat. Suspendisse quis dictum augue, et pharetra arcu.
+
+      Curabitur sem purus, sagittis quis lorem ac, iaculis laoreet lacus. Fusce eleifend congue massa a ornare. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sodales, tortor ut hendrerit lacinia, velit metus commodo libero, eu consequat est metus sit amet odio. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Pellentesque eu sem vehicula, vulputate est sit amet, mattis nisi. Nullam consequat at turpis vitae pretium. Nulla risus velit, pharetra ac sollicitudin sed, volutpat nec felis.
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam pretium efficitur lectus, porttitor ornare dolor luctus eu. Vivamus auctor nunc non vestibulum tempor. Integer tristique massa sit amet mi auctor euismod. In finibus nec purus et volutpat. Nullam consectetur est id lorem posuere, quis blandit eros dignissim. Curabitur fringilla iaculis est sed porttitor. Duis in nisi felis.
+
+      Suspendisse ex sem, eleifend vitae felis eu, finibus malesuada odio. Duis eget risus in sem facilisis venenatis eget nec turpis. Aliquam ac sapien dictum, tempor libero sed, feugiat odio. Mauris bibendum nisi justo, eu pulvinar neque tempor ac. Vivamus suscipit in elit interdum euismod. Etiam porta molestie lobortis. Nam consectetur malesuada ante non sagittis. Nunc nec odio ex. Duis non hendrerit diam. Integer vulputate, mi a gravida pretium, ligula libero laoreet libero, in vestibulum arcu velit at velit.
+
+      Suspendisse at neque commodo, sollicitudin lectus sed, blandit sem. Curabitur pharetra suscipit elit ac ultrices. Quisque ullamcorper quis massa et fringilla. Donec euismod, metus id porttitor semper, tortor velit accumsan metus, ut malesuada risus elit eu lorem. Mauris magna odio, efficitur et elit eu, suscipit fermentum sapien. Donec lacinia aliquet augue eu convallis. Suspendisse tincidunt lacus ac ipsum mattis malesuada. Curabitur pellentesque nec nulla ut commodo. Suspendisse pretium nunc in risus iaculis dignissim. Donec faucibus tempus lectus, vel ultrices lectus tincidunt et. Mauris pulvinar ut est in iaculis. Maecenas facilisis enim nec pharetra mattis. Aliquam laoreet egestas lacus, et porta nisl. Ut euismod laoreet purus sed eleifend. Vivamus ullamcorper sodales arcu, sit amet accumsan augue placerat semper. Duis condimentum mattis nulla sed consequat.
+
+      Donec non dui ligula. Aliquam id efficitur massa. Donec tristique aliquet dolor, quis rhoncus felis dignissim sit amet. Duis pellentesque orci eget rhoncus lacinia. Ut dapibus neque id ex fringilla, vitae lobortis turpis interdum. Donec mi lectus, finibus id placerat ut, molestie sit amet erat. Vivamus laoreet semper dui, id efficitur eros. Etiam mollis a nisi a ullamcorper. Vivamus ut porta odio. Maecenas dictum dignissim faucibus. Vestibulum lectus lacus, tempus pulvinar fermentum in, suscipit eget ex. Sed mollis non libero at dignissim. Curabitur non justo vel dui convallis feugiat. Suspendisse quis dictum augue, et pharetra arcu.
+
+      Curabitur sem purus, sagittis quis lorem ac, iaculis laoreet lacus. Fusce eleifend congue massa a ornare. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sodales, tortor ut hendrerit lacinia, velit metus commodo libero, eu consequat est metus sit amet odio. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Pellentesque eu sem vehicula, vulputate est sit amet, mattis nisi. Nullam consequat at turpis vitae pretium. Nulla risus velit, pharetra ac sollicitudin sed, volutpat nec felis.
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam pretium efficitur lectus, porttitor ornare dolor luctus eu. Vivamus auctor nunc non vestibulum tempor. Integer tristique massa sit amet mi auctor euismod. In finibus nec purus et volutpat. Nullam consectetur est id lorem posuere, quis blandit eros dignissim. Curabitur fringilla iaculis est sed porttitor. Duis in nisi felis.
+
+      Suspendisse ex sem, eleifend vitae felis eu, finibus malesuada odio. Duis eget risus in sem facilisis venenatis eget nec turpis. Aliquam ac sapien dictum, tempor libero sed, feugiat odio. Mauris bibendum nisi justo, eu pulvinar neque tempor ac. Vivamus suscipit in elit interdum euismod. Etiam porta molestie lobortis. Nam consectetur malesuada ante non sagittis. Nunc nec odio ex. Duis non hendrerit diam. Integer vulputate, mi a gravida pretium, ligula libero laoreet libero, in vestibulum arcu velit at velit.
+
+      Suspendisse at neque commodo, sollicitudin lectus sed, blandit sem. Curabitur pharetra suscipit elit ac ultrices. Quisque ullamcorper quis massa et fringilla. Donec euismod, metus id porttitor semper, tortor velit accumsan metus, ut malesuada risus elit eu lorem. Mauris magna odio, efficitur et elit eu, suscipit fermentum sapien. Donec lacinia aliquet augue eu convallis. Suspendisse tincidunt lacus ac ipsum mattis malesuada. Curabitur pellentesque nec nulla ut commodo. Suspendisse pretium nunc in risus iaculis dignissim. Donec faucibus tempus lectus, vel ultrices lectus tincidunt et. Mauris pulvinar ut est in iaculis. Maecenas facilisis enim nec pharetra mattis. Aliquam laoreet egestas lacus, et porta nisl. Ut euismod laoreet purus sed eleifend. Vivamus ullamcorper sodales arcu, sit amet accumsan augue placerat semper. Duis condimentum mattis nulla sed consequat.
+
+      Donec non dui ligula. Aliquam id efficitur massa. Donec tristique aliquet dolor, quis rhoncus felis dignissim sit amet. Duis pellentesque orci eget rhoncus lacinia. Ut dapibus neque id ex fringilla, vitae lobortis turpis interdum. Donec mi lectus, finibus id placerat ut, molestie sit amet erat. Vivamus laoreet semper dui, id efficitur eros. Etiam mollis a nisi a ullamcorper. Vivamus ut porta odio. Maecenas dictum dignissim faucibus. Vestibulum lectus lacus, tempus pulvinar fermentum in, suscipit eget ex. Sed mollis non libero at dignissim. Curabitur non justo vel dui convallis feugiat. Suspendisse quis dictum augue, et pharetra arcu.
+
+      Curabitur sem purus, sagittis quis lorem ac, iaculis laoreet lacus. Fusce eleifend congue massa a ornare. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sodales, tortor ut hendrerit lacinia, velit metus commodo libero, eu consequat est metus sit amet odio. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Pellentesque eu sem vehicula, vulputate est sit amet, mattis nisi. Nullam consequat at turpis vitae pretium. Nulla risus velit, pharetra ac sollicitudin sed, volutpat nec felis.
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam pretium efficitur lectus, porttitor ornare dolor luctus eu. Vivamus auctor nunc non vestibulum tempor. Integer tristique massa sit amet mi auctor euismod. In finibus nec purus et volutpat. Nullam consectetur est id lorem posuere, quis blandit eros dignissim. Curabitur fringilla iaculis est sed porttitor. Duis in nisi felis.
+
+      Suspendisse ex sem, eleifend vitae felis eu, finibus malesuada odio. Duis eget risus in sem facilisis venenatis eget nec turpis. Aliquam ac sapien dictum, tempor libero sed, feugiat odio. Mauris bibendum nisi justo, eu pulvinar neque tempor ac. Vivamus suscipit in elit interdum euismod. Etiam porta molestie lobortis. Nam consectetur malesuada ante non sagittis. Nunc nec odio ex. Duis non hendrerit diam. Integer vulputate, mi a gravida pretium, ligula libero laoreet libero, in vestibulum arcu velit at velit.
+
+      Suspendisse at neque commodo, sollicitudin lectus sed, blandit sem. Curabitur pharetra suscipit elit ac ultrices. Quisque ullamcorper quis massa et fringilla. Donec euismod, metus id porttitor semper, tortor velit accumsan metus, ut malesuada risus elit eu lorem. Mauris magna odio, efficitur et elit eu, suscipit fermentum sapien. Donec lacinia aliquet augue eu convallis. Suspendisse tincidunt lacus ac ipsum mattis malesuada. Curabitur pellentesque nec nulla ut commodo. Suspendisse pretium nunc in risus iaculis dignissim. Donec faucibus tempus lectus, vel ultrices lectus tincidunt et. Mauris pulvinar ut est in iaculis. Maecenas facilisis enim nec pharetra mattis. Aliquam laoreet egestas lacus, et porta nisl. Ut euismod laoreet purus sed eleifend. Vivamus ullamcorper sodales arcu, sit amet accumsan augue placerat semper. Duis condimentum mattis nulla sed consequat.
+
+      Donec non dui ligula. Aliquam id efficitur massa. Donec tristique aliquet dolor, quis rhoncus felis dignissim sit amet. Duis pellentesque orci eget rhoncus lacinia. Ut dapibus neque id ex fringilla, vitae lobortis turpis interdum. Donec mi lectus, finibus id placerat ut, molestie sit amet erat. Vivamus laoreet semper dui, id efficitur eros. Etiam mollis a nisi a ullamcorper. Vivamus ut porta odio. Maecenas dictum dignissim faucibus. Vestibulum lectus lacus, tempus pulvinar fermentum in, suscipit eget ex. Sed mollis non libero at dignissim. Curabitur non justo vel dui convallis feugiat. Suspendisse quis dictum augue, et pharetra arcu.
+
+      Curabitur sem purus, sagittis quis lorem ac, iaculis laoreet lacus. Fusce eleifend congue massa a ornare. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sodales, tortor ut hendrerit lacinia, velit metus commodo libero, eu consequat est metus sit amet odio. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Pellentesque eu sem vehicula, vulputate est sit amet, mattis nisi. Nullam consequat at turpis vitae pretium. Nulla risus velit, pharetra ac sollicitudin sed, volutpat nec felis.
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam pretium efficitur lectus, porttitor ornare dolor luctus eu. Vivamus auctor nunc non vestibulum tempor. Integer tristique massa sit amet mi auctor euismod. In finibus nec purus et volutpat. Nullam consectetur est id lorem posuere, quis blandit eros dignissim. Curabitur fringilla iaculis est sed porttitor. Duis in nisi felis.
+
+      Suspendisse ex sem, eleifend vitae felis eu, finibus malesuada odio. Duis eget risus in sem facilisis venenatis eget nec turpis. Aliquam ac sapien dictum, tempor libero sed, feugiat odio. Mauris bibendum nisi justo, eu pulvinar neque tempor ac. Vivamus suscipit in elit interdum euismod. Etiam porta molestie lobortis. Nam consectetur malesuada ante non sagittis. Nunc nec odio ex. Duis non hendrerit diam. Integer vulputate, mi a gravida pretium, ligula libero laoreet libero, in vestibulum arcu velit at velit.
+
+      Suspendisse at neque commodo, sollicitudin lectus sed, blandit sem. Curabitur pharetra suscipit elit ac ultrices. Quisque ullamcorper quis massa et fringilla. Donec euismod, metus id porttitor semper, tortor velit accumsan metus, ut malesuada risus elit eu lorem. Mauris magna odio, efficitur et elit eu, suscipit fermentum sapien. Donec lacinia aliquet augue eu convallis. Suspendisse tincidunt lacus ac ipsum mattis malesuada. Curabitur pellentesque nec nulla ut commodo. Suspendisse pretium nunc in risus iaculis dignissim. Donec faucibus tempus lectus, vel ultrices lectus tincidunt et. Mauris pulvinar ut est in iaculis. Maecenas facilisis enim nec pharetra mattis. Aliquam laoreet egestas lacus, et porta nisl. Ut euismod laoreet purus sed eleifend. Vivamus ullamcorper sodales arcu, sit amet accumsan augue placerat semper. Duis condimentum mattis nulla sed consequat.
+
+      Donec non dui ligula. Aliquam id efficitur massa. Donec tristique aliquet dolor, quis rhoncus felis dignissim sit amet. Duis pellentesque orci eget rhoncus lacinia. Ut dapibus neque id ex fringilla, vitae lobortis turpis interdum. Donec mi lectus, finibus id placerat ut, molestie sit amet erat. Vivamus laoreet semper dui, id efficitur eros. Etiam mollis a nisi a ullamcorper. Vivamus ut porta odio. Maecenas dictum dignissim faucibus. Vestibulum lectus lacus, tempus pulvinar fermentum in, suscipit eget ex. Sed mollis non libero at dignissim. Curabitur non justo vel dui convallis feugiat. Suspendisse quis dictum augue, et pharetra arcu.
+
+      Curabitur sem purus, sagittis quis lorem ac, iaculis laoreet lacus. Fusce eleifend congue massa a ornare. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sodales, tortor ut hendrerit lacinia, velit metus commodo libero, eu consequat est metus sit amet odio. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Pellentesque eu sem vehicula, vulputate est sit amet, mattis nisi. Nullam consequat at turpis vitae pretium. Nulla risus velit, pharetra ac sollicitudin sed, volutpat nec felis.
+  </div>
+
+  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
+  <script type="text/javascript" src="https://code.jquery.com/ui/1.11.0/jquery-ui.min.js"></script>
+
+  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.3.0/codemirror.min.js"></script>
+  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.3.0/mode/xml/xml.min.js"></script>
+
+  <script type="text/javascript" src="../../../js/froala_editor.min.js" ></script>
+
+  <script type="text/javascript" src="../../../js/plugins/align.min.js"></script>
+  <script type="text/javascript" src="../../../js/plugins/code_beautifier.min.js"></script>
+  <script type="text/javascript" src="../../../js/plugins/code_view.min.js"></script>
+  <script type="text/javascript" src="../../../js/plugins/colors.min.js"></script>
+  <script type="text/javascript" src="../../../js/plugins/draggable.min.js"></script>
+  <script type="text/javascript" src="../../../js/plugins/emoticons.min.js"></script>
+  <script type="text/javascript" src="../../../js/plugins/font_size.min.js"></script>
+  <script type="text/javascript" src="../../../js/plugins/font_family.min.js"></script>
+  <script type="text/javascript" src="../../../js/plugins/image.min.js"></script>
+  <script type="text/javascript" src="../../../js/plugins/file.min.js"></script>
+  <script type="text/javascript" src="../../../js/plugins/image_manager.min.js"></script>
+  <script type="text/javascript" src="../../../js/plugins/line_breaker.min.js"></script>
+  <script type="text/javascript" src="../../../js/plugins/link.min.js"></script>
+  <script type="text/javascript" src="../../../js/plugins/lists.min.js"></script>
+  <script type="text/javascript" src="../../../js/plugins/paragraph_format.min.js"></script>
+  <script type="text/javascript" src="../../../js/plugins/paragraph_style.min.js"></script>
+  <script type="text/javascript" src="../../../js/plugins/video.min.js"></script>
+  <script type="text/javascript" src="../../../js/plugins/table.min.js"></script>
+  <script type="text/javascript" src="../../../js/plugins/url.min.js"></script>
+  <script type="text/javascript" src="../../../js/plugins/entities.min.js"></script>
+  <script type="text/javascript" src="../../../js/plugins/char_counter.min.js"></script>
+  <script type="text/javascript" src="../../../js/plugins/inline_style.min.js"></script>
+  <script type="text/javascript" src="../../../js/plugins/save.min.js"></script>
+  <script type="text/javascript" src="../../../js/plugins/fullscreen.min.js"></script>
+  <script type="text/javascript" src="../../../js/plugins/quote.min.js"></script>
+
+  <script type="text/javascript" src="../../../js/languages/ro.js"></script>
+
+  <script>
+    $(function(){
+      $( "#dialog" ).dialog({
+        minWidth: 1000
+      });
+
+      $('#edit').froalaEditor({
+        enter: $.FroalaEditor.ENTER_P
+      })
+    });
+  </script>
+</body>
+</html>

+ 90 - 0
modules/boonex/froala/plugins/froala/html/3rd-party/require_js/index.html

@@ -0,0 +1,90 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0"/>
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css">
+  <link rel="stylesheet" href="../../../css/froala_editor.css">
+  <link rel="stylesheet" href="../../../css/froala_style.css">
+  <link rel="stylesheet" href="../../../css/plugins/code_view.css">
+  <link rel="stylesheet" href="../../../css/plugins/colors.css">
+  <link rel="stylesheet" href="../../../css/plugins/emoticons.css">
+  <link rel="stylesheet" href="../../../css/plugins/image_manager.css">
+  <link rel="stylesheet" href="../../../css/plugins/image.css">
+  <link rel="stylesheet" href="../../../css/plugins/line_breaker.css">
+  <link rel="stylesheet" href="../../../css/plugins/table.css">
+  <link rel="stylesheet" href="../../../css/plugins/char_counter.css">
+  <link rel="stylesheet" href="../../../css/plugins/video.css">
+  <link rel="stylesheet" href="../../../css/plugins/fullscreen.css">
+  <link rel="stylesheet" href="../../../css/plugins/file.css">
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.3.0/codemirror.min.css">
+
+    <style>
+        body {
+            text-align: center;
+        }
+
+        section {
+            width: 80%;
+            margin: auto;
+            text-align: left;
+        }
+    </style>
+</head>
+
+<body>
+  <section id="editor">
+      <div id='edit' style="margin-top: 30px;">
+          <img src="../../../img/photo1.jpg" alt="Old Clock" width="300" style="float: left; margin-right: 10px; margin-bottom: 10px; margin-top: 10px;"/>
+
+          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec facilisis diam in odio iaculis blandit. Nunc eu mauris sit amet purus viverra gravida ut a dui. Vivamus nec rutrum augue, pharetra faucibus purus. Maecenas non orci sagittis, vehicula lorem et, dignissim nunc. Suspendisse suscipit, diam non varius facilisis, enim libero tincidunt magna, sit amet iaculis eros libero sit amet eros. Vestibulum a rhoncus felis. Nam lacus nulla, consequat ac lacus sit amet, accumsan pellentesque risus. Aenean viverra mi at urna mattis fermentum. Curabitur porta metus in tortor elementum, in semper nulla ullamcorper. Vestibulum mattis tempor tortor quis gravida. In rhoncus risus nibh. Nullam condimentum dapibus massa vel fringilla. Sed hendrerit sed est quis facilisis. Ut sit amet nibh sem. Pellentesque imperdiet mollis libero.</p>
+
+          <p><a href="http://google.com" title="Aenean sed hendrerit">Aenean sed hendrerit</a> velit. Nullam eu mi dolor. Maecenas et erat risus. Nulla ac auctor diam, non aliquet ante. Fusce ullamcorper, ipsum id tempor lacinia, sem tellus malesuada libero, quis ornare sem massa in orci. Sed dictum dictum tristique. Proin eros turpis, ultricies eu sapien eget, ornare rutrum ipsum. Pellentesque eros nisl, ornare nec ipsum sed, aliquet sollicitudin erat. Nulla tincidunt porta vehicula.</p>
+
+          <p>Nullam laoreet imperdiet orci ac euismod. Curabitur vel lectus nisi. Phasellus accumsan aliquet augue, eu rutrum tellus iaculis in. Nunc viverra ultrices mollis. Curabitur malesuada nunc massa, ut imperdiet arcu lobortis sed. Cras ac arcu mauris. Maecenas id lectus nisl. Donec consectetur scelerisque quam at ultricies. Nam quis magna iaculis, condimentum metus ut, elementum metus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vivamus id tempus nisi.</p>
+      </div>
+  </section>
+
+  <script data-main="js/app" src="js/lib/require.js"></script>
+  <script>
+    // Froala Editor plugins list.
+    var fe_plugins = ['align', 'char_counter', 'code_view', 'colors', 'draggable', 'emoticons',
+                      'entities', 'file', 'font_family', 'font_size', 'fullscreen',
+                      'image_manager', 'image', 'inline_style', 'line_breaker',
+                      'link', 'lists', 'paragraph_format', 'paragraph_style', 'quote',
+                      'save', 'table', 'url', 'video']
+
+    // Define paths.
+    var paths = {
+      'app': '../app',
+      'jquery': 'https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.0/jquery.min',
+      'froala_editor': '../../../../../js/froala_editor.min'
+    };
+
+    // Add Froala Editor plugins to path.
+    for (var i = 0; i < fe_plugins.length; i++) {
+      paths['fe_' + fe_plugins[i]] = '../../../../../js/plugins/' + fe_plugins[i] + '.min';
+    }
+
+    var shim = {
+      'froala_editor': {deps: ['jquery']}
+    };
+
+    for (var i = 0; i < fe_plugins.length; i++) {
+      shim['fe_' + fe_plugins[i]] = {
+        deps: ['froala_editor']
+      }
+    }
+
+    // Init RequireJS.
+    requirejs.config({
+      'baseUrl': 'js/lib',
+      'paths': paths,
+      shim: shim
+    });
+
+    // Load the main app module to start the app
+    requirejs(["app"]);
+  </script>
+</body>
+</html>

+ 6 - 0
modules/boonex/froala/plugins/froala/html/3rd-party/require_js/js/app.js

@@ -0,0 +1,6 @@
+// Load the editor and the plugins we need.
+define(["jquery", "froala_editor", "fe_image", "fe_link"], function($) {
+    $(function() {
+      $('#edit').froalaEditor()
+    });
+});

+ 36 - 0
modules/boonex/froala/plugins/froala/html/3rd-party/require_js/js/lib/require.js

@@ -0,0 +1,36 @@
+/*
+ RequireJS 2.1.14 Copyright (c) 2010-2014, The Dojo Foundation All Rights Reserved.
+ Available via the MIT or new BSD license.
+ see: http://github.com/jrburke/requirejs for details
+*/
+var requirejs,require,define;
+(function(ba){function G(b){return"[object Function]"===K.call(b)}function H(b){return"[object Array]"===K.call(b)}function v(b,c){if(b){var d;for(d=0;d<b.length&&(!b[d]||!c(b[d],d,b));d+=1);}}function T(b,c){if(b){var d;for(d=b.length-1;-1<d&&(!b[d]||!c(b[d],d,b));d-=1);}}function t(b,c){return fa.call(b,c)}function m(b,c){return t(b,c)&&b[c]}function B(b,c){for(var d in b)if(t(b,d)&&c(b[d],d))break}function U(b,c,d,e){c&&B(c,function(c,g){if(d||!t(b,g))e&&"object"===typeof c&&c&&!H(c)&&!G(c)&&!(c instanceof
+RegExp)?(b[g]||(b[g]={}),U(b[g],c,d,e)):b[g]=c});return b}function u(b,c){return function(){return c.apply(b,arguments)}}function ca(b){throw b;}function da(b){if(!b)return b;var c=ba;v(b.split("."),function(b){c=c[b]});return c}function C(b,c,d,e){c=Error(c+"\nhttp://requirejs.org/docs/errors.html#"+b);c.requireType=b;c.requireModules=e;d&&(c.originalError=d);return c}function ga(b){function c(a,k,b){var f,l,c,d,e,g,i,p,k=k&&k.split("/"),h=j.map,n=h&&h["*"];if(a){a=a.split("/");l=a.length-1;j.nodeIdCompat&&
+Q.test(a[l])&&(a[l]=a[l].replace(Q,""));"."===a[0].charAt(0)&&k&&(l=k.slice(0,k.length-1),a=l.concat(a));l=a;for(c=0;c<l.length;c++)if(d=l[c],"."===d)l.splice(c,1),c-=1;else if(".."===d&&!(0===c||1==c&&".."===l[2]||".."===l[c-1])&&0<c)l.splice(c-1,2),c-=2;a=a.join("/")}if(b&&h&&(k||n)){l=a.split("/");c=l.length;a:for(;0<c;c-=1){e=l.slice(0,c).join("/");if(k)for(d=k.length;0<d;d-=1)if(b=m(h,k.slice(0,d).join("/")))if(b=m(b,e)){f=b;g=c;break a}!i&&(n&&m(n,e))&&(i=m(n,e),p=c)}!f&&i&&(f=i,g=p);f&&(l.splice(0,
+g,f),a=l.join("/"))}return(f=m(j.pkgs,a))?f:a}function d(a){z&&v(document.getElementsByTagName("script"),function(k){if(k.getAttribute("data-requiremodule")===a&&k.getAttribute("data-requirecontext")===i.contextName)return k.parentNode.removeChild(k),!0})}function e(a){var k=m(j.paths,a);if(k&&H(k)&&1<k.length)return k.shift(),i.require.undef(a),i.makeRequire(null,{skipMap:!0})([a]),!0}function n(a){var k,c=a?a.indexOf("!"):-1;-1<c&&(k=a.substring(0,c),a=a.substring(c+1,a.length));return[k,a]}function p(a,
+k,b,f){var l,d,e=null,g=k?k.name:null,j=a,p=!0,h="";a||(p=!1,a="_@r"+(K+=1));a=n(a);e=a[0];a=a[1];e&&(e=c(e,g,f),d=m(r,e));a&&(e?h=d&&d.normalize?d.normalize(a,function(a){return c(a,g,f)}):-1===a.indexOf("!")?c(a,g,f):a:(h=c(a,g,f),a=n(h),e=a[0],h=a[1],b=!0,l=i.nameToUrl(h)));b=e&&!d&&!b?"_unnormalized"+(O+=1):"";return{prefix:e,name:h,parentMap:k,unnormalized:!!b,url:l,originalName:j,isDefine:p,id:(e?e+"!"+h:h)+b}}function s(a){var k=a.id,b=m(h,k);b||(b=h[k]=new i.Module(a));return b}function q(a,
+k,b){var f=a.id,c=m(h,f);if(t(r,f)&&(!c||c.defineEmitComplete))"defined"===k&&b(r[f]);else if(c=s(a),c.error&&"error"===k)b(c.error);else c.on(k,b)}function w(a,b){var c=a.requireModules,f=!1;if(b)b(a);else if(v(c,function(b){if(b=m(h,b))b.error=a,b.events.error&&(f=!0,b.emit("error",a))}),!f)g.onError(a)}function x(){R.length&&(ha.apply(A,[A.length,0].concat(R)),R=[])}function y(a){delete h[a];delete V[a]}function F(a,b,c){var f=a.map.id;a.error?a.emit("error",a.error):(b[f]=!0,v(a.depMaps,function(f,
+d){var e=f.id,g=m(h,e);g&&(!a.depMatched[d]&&!c[e])&&(m(b,e)?(a.defineDep(d,r[e]),a.check()):F(g,b,c))}),c[f]=!0)}function D(){var a,b,c=(a=1E3*j.waitSeconds)&&i.startTime+a<(new Date).getTime(),f=[],l=[],g=!1,h=!0;if(!W){W=!0;B(V,function(a){var i=a.map,j=i.id;if(a.enabled&&(i.isDefine||l.push(a),!a.error))if(!a.inited&&c)e(j)?g=b=!0:(f.push(j),d(j));else if(!a.inited&&(a.fetched&&i.isDefine)&&(g=!0,!i.prefix))return h=!1});if(c&&f.length)return a=C("timeout","Load timeout for modules: "+f,null,
+f),a.contextName=i.contextName,w(a);h&&v(l,function(a){F(a,{},{})});if((!c||b)&&g)if((z||ea)&&!X)X=setTimeout(function(){X=0;D()},50);W=!1}}function E(a){t(r,a[0])||s(p(a[0],null,!0)).init(a[1],a[2])}function I(a){var a=a.currentTarget||a.srcElement,b=i.onScriptLoad;a.detachEvent&&!Y?a.detachEvent("onreadystatechange",b):a.removeEventListener("load",b,!1);b=i.onScriptError;(!a.detachEvent||Y)&&a.removeEventListener("error",b,!1);return{node:a,id:a&&a.getAttribute("data-requiremodule")}}function J(){var a;
+for(x();A.length;){a=A.shift();if(null===a[0])return w(C("mismatch","Mismatched anonymous define() module: "+a[a.length-1]));E(a)}}var W,Z,i,L,X,j={waitSeconds:7,baseUrl:"./",paths:{},bundles:{},pkgs:{},shim:{},config:{}},h={},V={},$={},A=[],r={},S={},aa={},K=1,O=1;L={require:function(a){return a.require?a.require:a.require=i.makeRequire(a.map)},exports:function(a){a.usingExports=!0;if(a.map.isDefine)return a.exports?r[a.map.id]=a.exports:a.exports=r[a.map.id]={}},module:function(a){return a.module?
+a.module:a.module={id:a.map.id,uri:a.map.url,config:function(){return m(j.config,a.map.id)||{}},exports:a.exports||(a.exports={})}}};Z=function(a){this.events=m($,a.id)||{};this.map=a;this.shim=m(j.shim,a.id);this.depExports=[];this.depMaps=[];this.depMatched=[];this.pluginMaps={};this.depCount=0};Z.prototype={init:function(a,b,c,f){f=f||{};if(!this.inited){this.factory=b;if(c)this.on("error",c);else this.events.error&&(c=u(this,function(a){this.emit("error",a)}));this.depMaps=a&&a.slice(0);this.errback=
+c;this.inited=!0;this.ignore=f.ignore;f.enabled||this.enabled?this.enable():this.check()}},defineDep:function(a,b){this.depMatched[a]||(this.depMatched[a]=!0,this.depCount-=1,this.depExports[a]=b)},fetch:function(){if(!this.fetched){this.fetched=!0;i.startTime=(new Date).getTime();var a=this.map;if(this.shim)i.makeRequire(this.map,{enableBuildCallback:!0})(this.shim.deps||[],u(this,function(){return a.prefix?this.callPlugin():this.load()}));else return a.prefix?this.callPlugin():this.load()}},load:function(){var a=
+this.map.url;S[a]||(S[a]=!0,i.load(this.map.id,a))},check:function(){if(this.enabled&&!this.enabling){var a,b,c=this.map.id;b=this.depExports;var f=this.exports,l=this.factory;if(this.inited)if(this.error)this.emit("error",this.error);else{if(!this.defining){this.defining=!0;if(1>this.depCount&&!this.defined){if(G(l)){if(this.events.error&&this.map.isDefine||g.onError!==ca)try{f=i.execCb(c,l,b,f)}catch(d){a=d}else f=i.execCb(c,l,b,f);this.map.isDefine&&void 0===f&&((b=this.module)?f=b.exports:this.usingExports&&
+(f=this.exports));if(a)return a.requireMap=this.map,a.requireModules=this.map.isDefine?[this.map.id]:null,a.requireType=this.map.isDefine?"define":"require",w(this.error=a)}else f=l;this.exports=f;if(this.map.isDefine&&!this.ignore&&(r[c]=f,g.onResourceLoad))g.onResourceLoad(i,this.map,this.depMaps);y(c);this.defined=!0}this.defining=!1;this.defined&&!this.defineEmitted&&(this.defineEmitted=!0,this.emit("defined",this.exports),this.defineEmitComplete=!0)}}else this.fetch()}},callPlugin:function(){var a=
+this.map,b=a.id,d=p(a.prefix);this.depMaps.push(d);q(d,"defined",u(this,function(f){var l,d;d=m(aa,this.map.id);var e=this.map.name,P=this.map.parentMap?this.map.parentMap.name:null,n=i.makeRequire(a.parentMap,{enableBuildCallback:!0});if(this.map.unnormalized){if(f.normalize&&(e=f.normalize(e,function(a){return c(a,P,!0)})||""),f=p(a.prefix+"!"+e,this.map.parentMap),q(f,"defined",u(this,function(a){this.init([],function(){return a},null,{enabled:!0,ignore:!0})})),d=m(h,f.id)){this.depMaps.push(f);
+if(this.events.error)d.on("error",u(this,function(a){this.emit("error",a)}));d.enable()}}else d?(this.map.url=i.nameToUrl(d),this.load()):(l=u(this,function(a){this.init([],function(){return a},null,{enabled:!0})}),l.error=u(this,function(a){this.inited=!0;this.error=a;a.requireModules=[b];B(h,function(a){0===a.map.id.indexOf(b+"_unnormalized")&&y(a.map.id)});w(a)}),l.fromText=u(this,function(f,c){var d=a.name,e=p(d),P=M;c&&(f=c);P&&(M=!1);s(e);t(j.config,b)&&(j.config[d]=j.config[b]);try{g.exec(f)}catch(h){return w(C("fromtexteval",
+"fromText eval for "+b+" failed: "+h,h,[b]))}P&&(M=!0);this.depMaps.push(e);i.completeLoad(d);n([d],l)}),f.load(a.name,n,l,j))}));i.enable(d,this);this.pluginMaps[d.id]=d},enable:function(){V[this.map.id]=this;this.enabling=this.enabled=!0;v(this.depMaps,u(this,function(a,b){var c,f;if("string"===typeof a){a=p(a,this.map.isDefine?this.map:this.map.parentMap,!1,!this.skipMap);this.depMaps[b]=a;if(c=m(L,a.id)){this.depExports[b]=c(this);return}this.depCount+=1;q(a,"defined",u(this,function(a){this.defineDep(b,
+a);this.check()}));this.errback&&q(a,"error",u(this,this.errback))}c=a.id;f=h[c];!t(L,c)&&(f&&!f.enabled)&&i.enable(a,this)}));B(this.pluginMaps,u(this,function(a){var b=m(h,a.id);b&&!b.enabled&&i.enable(a,this)}));this.enabling=!1;this.check()},on:function(a,b){var c=this.events[a];c||(c=this.events[a]=[]);c.push(b)},emit:function(a,b){v(this.events[a],function(a){a(b)});"error"===a&&delete this.events[a]}};i={config:j,contextName:b,registry:h,defined:r,urlFetched:S,defQueue:A,Module:Z,makeModuleMap:p,
+nextTick:g.nextTick,onError:w,configure:function(a){a.baseUrl&&"/"!==a.baseUrl.charAt(a.baseUrl.length-1)&&(a.baseUrl+="/");var b=j.shim,c={paths:!0,bundles:!0,config:!0,map:!0};B(a,function(a,b){c[b]?(j[b]||(j[b]={}),U(j[b],a,!0,!0)):j[b]=a});a.bundles&&B(a.bundles,function(a,b){v(a,function(a){a!==b&&(aa[a]=b)})});a.shim&&(B(a.shim,function(a,c){H(a)&&(a={deps:a});if((a.exports||a.init)&&!a.exportsFn)a.exportsFn=i.makeShimExports(a);b[c]=a}),j.shim=b);a.packages&&v(a.packages,function(a){var b,
+a="string"===typeof a?{name:a}:a;b=a.name;a.location&&(j.paths[b]=a.location);j.pkgs[b]=a.name+"/"+(a.main||"main").replace(ia,"").replace(Q,"")});B(h,function(a,b){!a.inited&&!a.map.unnormalized&&(a.map=p(b))});if(a.deps||a.callback)i.require(a.deps||[],a.callback)},makeShimExports:function(a){return function(){var b;a.init&&(b=a.init.apply(ba,arguments));return b||a.exports&&da(a.exports)}},makeRequire:function(a,e){function j(c,d,m){var n,q;e.enableBuildCallback&&(d&&G(d))&&(d.__requireJsBuild=
+!0);if("string"===typeof c){if(G(d))return w(C("requireargs","Invalid require call"),m);if(a&&t(L,c))return L[c](h[a.id]);if(g.get)return g.get(i,c,a,j);n=p(c,a,!1,!0);n=n.id;return!t(r,n)?w(C("notloaded",'Module name "'+n+'" has not been loaded yet for context: '+b+(a?"":". Use require([])"))):r[n]}J();i.nextTick(function(){J();q=s(p(null,a));q.skipMap=e.skipMap;q.init(c,d,m,{enabled:!0});D()});return j}e=e||{};U(j,{isBrowser:z,toUrl:function(b){var d,e=b.lastIndexOf("."),k=b.split("/")[0];if(-1!==
+e&&(!("."===k||".."===k)||1<e))d=b.substring(e,b.length),b=b.substring(0,e);return i.nameToUrl(c(b,a&&a.id,!0),d,!0)},defined:function(b){return t(r,p(b,a,!1,!0).id)},specified:function(b){b=p(b,a,!1,!0).id;return t(r,b)||t(h,b)}});a||(j.undef=function(b){x();var c=p(b,a,!0),e=m(h,b);d(b);delete r[b];delete S[c.url];delete $[b];T(A,function(a,c){a[0]===b&&A.splice(c,1)});e&&(e.events.defined&&($[b]=e.events),y(b))});return j},enable:function(a){m(h,a.id)&&s(a).enable()},completeLoad:function(a){var b,
+c,d=m(j.shim,a)||{},g=d.exports;for(x();A.length;){c=A.shift();if(null===c[0]){c[0]=a;if(b)break;b=!0}else c[0]===a&&(b=!0);E(c)}c=m(h,a);if(!b&&!t(r,a)&&c&&!c.inited){if(j.enforceDefine&&(!g||!da(g)))return e(a)?void 0:w(C("nodefine","No define call for "+a,null,[a]));E([a,d.deps||[],d.exportsFn])}D()},nameToUrl:function(a,b,c){var d,e,h;(d=m(j.pkgs,a))&&(a=d);if(d=m(aa,a))return i.nameToUrl(d,b,c);if(g.jsExtRegExp.test(a))d=a+(b||"");else{d=j.paths;a=a.split("/");for(e=a.length;0<e;e-=1)if(h=a.slice(0,
+e).join("/"),h=m(d,h)){H(h)&&(h=h[0]);a.splice(0,e,h);break}d=a.join("/");d+=b||(/^data\:|\?/.test(d)||c?"":".js");d=("/"===d.charAt(0)||d.match(/^[\w\+\.\-]+:/)?"":j.baseUrl)+d}return j.urlArgs?d+((-1===d.indexOf("?")?"?":"&")+j.urlArgs):d},load:function(a,b){g.load(i,a,b)},execCb:function(a,b,c,d){return b.apply(d,c)},onScriptLoad:function(a){if("load"===a.type||ja.test((a.currentTarget||a.srcElement).readyState))N=null,a=I(a),i.completeLoad(a.id)},onScriptError:function(a){var b=I(a);if(!e(b.id))return w(C("scripterror",
+"Script error for: "+b.id,a,[b.id]))}};i.require=i.makeRequire();return i}var g,x,y,D,I,E,N,J,s,O,ka=/(\/\*([\s\S]*?)\*\/|([^:]|^)\/\/(.*)$)/mg,la=/[^.]\s*require\s*\(\s*["']([^'"\s]+)["']\s*\)/g,Q=/\.js$/,ia=/^\.\//;x=Object.prototype;var K=x.toString,fa=x.hasOwnProperty,ha=Array.prototype.splice,z=!!("undefined"!==typeof window&&"undefined"!==typeof navigator&&window.document),ea=!z&&"undefined"!==typeof importScripts,ja=z&&"PLAYSTATION 3"===navigator.platform?/^complete$/:/^(complete|loaded)$/,
+Y="undefined"!==typeof opera&&"[object Opera]"===opera.toString(),F={},q={},R=[],M=!1;if("undefined"===typeof define){if("undefined"!==typeof requirejs){if(G(requirejs))return;q=requirejs;requirejs=void 0}"undefined"!==typeof require&&!G(require)&&(q=require,require=void 0);g=requirejs=function(b,c,d,e){var n,p="_";!H(b)&&"string"!==typeof b&&(n=b,H(c)?(b=c,c=d,d=e):b=[]);n&&n.context&&(p=n.context);(e=m(F,p))||(e=F[p]=g.s.newContext(p));n&&e.configure(n);return e.require(b,c,d)};g.config=function(b){return g(b)};
+g.nextTick="undefined"!==typeof setTimeout?function(b){setTimeout(b,4)}:function(b){b()};require||(require=g);g.version="2.1.14";g.jsExtRegExp=/^\/|:|\?|\.js$/;g.isBrowser=z;x=g.s={contexts:F,newContext:ga};g({});v(["toUrl","undef","defined","specified"],function(b){g[b]=function(){var c=F._;return c.require[b].apply(c,arguments)}});if(z&&(y=x.head=document.getElementsByTagName("head")[0],D=document.getElementsByTagName("base")[0]))y=x.head=D.parentNode;g.onError=ca;g.createNode=function(b){var c=
+b.xhtml?document.createElementNS("http://www.w3.org/1999/xhtml","html:script"):document.createElement("script");c.type=b.scriptType||"text/javascript";c.charset="utf-8";c.async=!0;return c};g.load=function(b,c,d){var e=b&&b.config||{};if(z)return e=g.createNode(e,c,d),e.setAttribute("data-requirecontext",b.contextName),e.setAttribute("data-requiremodule",c),e.attachEvent&&!(e.attachEvent.toString&&0>e.attachEvent.toString().indexOf("[native code"))&&!Y?(M=!0,e.attachEvent("onreadystatechange",b.onScriptLoad)):
+(e.addEventListener("load",b.onScriptLoad,!1),e.addEventListener("error",b.onScriptError,!1)),e.src=d,J=e,D?y.insertBefore(e,D):y.appendChild(e),J=null,e;if(ea)try{importScripts(d),b.completeLoad(c)}catch(m){b.onError(C("importscripts","importScripts failed for "+c+" at "+d,m,[c]))}};z&&!q.skipDataMain&&T(document.getElementsByTagName("script"),function(b){y||(y=b.parentNode);if(I=b.getAttribute("data-main"))return s=I,q.baseUrl||(E=s.split("/"),s=E.pop(),O=E.length?E.join("/")+"/":"./",q.baseUrl=
+O),s=s.replace(Q,""),g.jsExtRegExp.test(s)&&(s=I),q.deps=q.deps?q.deps.concat(s):[s],!0});define=function(b,c,d){var e,g;"string"!==typeof b&&(d=c,c=b,b=null);H(c)||(d=c,c=null);!c&&G(d)&&(c=[],d.length&&(d.toString().replace(ka,"").replace(la,function(b,d){c.push(d)}),c=(1===d.length?["require"]:["require","exports","module"]).concat(c)));if(M){if(!(e=J))N&&"interactive"===N.readyState||T(document.getElementsByTagName("script"),function(b){if("interactive"===b.readyState)return N=b}),e=N;e&&(b||
+(b=e.getAttribute("data-requiremodule")),g=F[e.getAttribute("data-requirecontext")])}(g?g.defQueue:R).push([b,c,d])};define.amd={jQuery:!0};g.exec=function(b){return eval(b)};g(q)}})(this);

+ 105 - 0
modules/boonex/froala/plugins/froala/html/3rd-party/spell-checker/spell-checker.html

@@ -0,0 +1,105 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0"/>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css">
+    <link rel="stylesheet" href="../../../css/froala_editor.css">
+    <link rel="stylesheet" href="../../../css/froala_style.css">
+    <link rel="stylesheet" href="../../../css/plugins/colors.css">
+    <link rel="stylesheet" href="../../../css/plugins/emoticons.css">
+    <link rel="stylesheet" href="../../../css/plugins/image_manager.css">
+    <link rel="stylesheet" href="../../../css/plugins/image.css">
+    <link rel="stylesheet" href="../../../css/plugins/line_breaker.css">
+    <link rel="stylesheet" href="../../../css/plugins/table.css">
+    <link rel="stylesheet" href="../../../css/plugins/char_counter.css">
+    <link rel="stylesheet" href="../../../css/plugins/video.css">
+    <link rel="stylesheet" href="../../../css/plugins/fullscreen.css">
+    <link rel="stylesheet" href="../../../css/plugins/file.css">
+    <!--<link rel="stylesheet" href="../../../css/plugins/file.css">-->
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/at.js/1.4.0/css/jquery.atwho.min.css">
+
+    <!-- Code Mirror CSS file. -->
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.3.0/codemirror.min.css">
+
+    <!-- Include the plugin CSS file. -->
+    <link rel="stylesheet" href="../../../css/plugins/code_view.css">
+
+    <link rel="stylesheet" href="../../../css/third_party/spell_checker.min.css">
+
+    <style>
+        body {
+            text-align: center;
+        }
+
+        div#editor {
+            width: 81%;
+            margin: auto;
+            text-align: left;
+        }
+
+        .atwho-view-ul {
+            text-align: left;
+        }
+    </style>
+</head>
+
+<body>
+<div id="editor">
+
+    <div id="edit" style="margin-top: 30px;">
+        <h1>Spell Checker example</h1>
+
+        <img class="fr-fir fr-dii" src="../../../img/photo1.jpg" alt="Old Clock" width="300"/>
+
+        <p>Below is a text written in Spanish that has typos try the Spell Checker to see how it works. The spell checker it is initialized to use as a spell checking language Spanish.</p>
+
+        <p>El plugin spell checker.min.js se puede utilizaro como es o puedee utilizzar también utilizaarlo juntoo con Code Mirror.</p>
+    </div>
+</div>
+
+<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
+<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.3.0/codemirror.min.js"></script>
+<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.3.0/mode/xml/xml.min.js"></script>
+<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/at.js/1.4.0/js/jquery.atwho.min.js"></script>
+
+<script type="text/javascript" src="../../../js/froala_editor.min.js" ></script>
+
+<script type="text/javascript" src="../../../js/plugins/align.min.js"></script>
+<script type="text/javascript" src="../../../js/plugins/code_beautifier.min.js"></script>
+<script type="text/javascript" src="../../../js/plugins/code_view.min.js"></script>
+<script type="text/javascript" src="../../../js/plugins/font_size.min.js"></script>
+<script type="text/javascript" src="../../../js/plugins/font_family.min.js"></script>
+<script type="text/javascript" src="../../../js/plugins/image.min.js"></script>
+<script type="text/javascript" src="../../../js/plugins/image_manager.min.js"></script>
+<script type="text/javascript" src="../../../js/plugins/link.min.js"></script>
+<script type="text/javascript" src="../../../js/plugins/lists.min.js"></script>
+<script type="text/javascript" src="../../../js/plugins/paragraph_format.min.js"></script>
+<script type="text/javascript" src="../../../js/plugins/url.min.js"></script>
+<script type="text/javascript" src="../../../js/plugins/entities.min.js"></script>
+<script type="text/javascript" src="../../../js/plugins/save.min.js"></script>
+<script type="text/javascript" src="../../../js/third_party/spell_checker.min.js"></script>
+
+<script>
+  $(function(){
+    $('#edit').froalaEditor({
+      scaytAutoload: true,
+      scaytOptions: {
+        enableOnTouchDevices: false,
+        localization:'en',
+        extraModules: 'ui',
+        DefaultSelection: 'American English',
+        spellcheckLang: 'en_US',
+        contextMenuSections: 'suggest|moresuggest',
+        serviceProtocol: 'https',
+        servicePort:'80',
+        serviceHost:'svc.webspellchecker.net',
+        servicePath:'spellcheck/script/ssrv.cgi',
+        contextMenuForMisspelledOnly: true,
+        scriptPath: 'https://svc.webspellchecker.net/spellcheck31/lf/scayt3/customscayt/customscayt.js'
+      }
+    })
+  });
+</script>
+</body>
+</html>

+ 88 - 0
modules/boonex/froala/plugins/froala/html/api/get_html.html

@@ -0,0 +1,88 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0"/>
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css">
+  <link rel="stylesheet" href="../../css/froala_editor.css">
+  <link rel="stylesheet" href="../../css/froala_style.css">
+  <link rel="stylesheet" href="../../css/plugins/code_view.css">
+  <link rel="stylesheet" href="../../css/plugins/colors.css">
+  <link rel="stylesheet" href="../../css/plugins/emoticons.css">
+  <link rel="stylesheet" href="../../css/plugins/image_manager.css">
+  <link rel="stylesheet" href="../../css/plugins/image.css">
+  <link rel="stylesheet" href="../../css/plugins/line_breaker.css">
+  <link rel="stylesheet" href="../../css/plugins/table.css">
+  <link rel="stylesheet" href="../../css/plugins/char_counter.css">
+  <link rel="stylesheet" href="../../css/plugins/video.css">
+  <link rel="stylesheet" href="../../css/plugins/fullscreen.css">
+  <link rel="stylesheet" href="../../css/plugins/file.css">
+  <link rel="stylesheet" href="../../css/plugins/quick_insert.css">
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.3.0/codemirror.min.css">
+
+  <style>
+      body {
+          text-align: center;
+      }
+
+      div#editor {
+          width: 81%;
+          margin: auto;
+          text-align: left;
+      }
+
+      .ss {
+        background-color: red;
+      }
+  </style>
+</head>
+
+<body>
+  <div id="editor">
+    <div id='edit' style="margin-top: 30px;">
+      <h1>Get Edited HTML</h1>
+
+      <p>You can use at any time in your code the following snippet to get the content inside the Froala WYSIWYG HTML Editor</p>
+      <p><code>$('div#selector').froalaEditor('html.get');</code></p>
+    </div>
+  </div>
+
+  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
+  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.3.0/codemirror.min.js"></script>
+  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.3.0/mode/xml/xml.min.js"></script>
+
+  <script type="text/javascript" src="../../js/froala_editor.min.js" ></script>
+  <script type="text/javascript" src="../../js/plugins/align.min.js"></script>
+  <script type="text/javascript" src="../../js/plugins/char_counter.min.js"></script>
+  <script type="text/javascript" src="../../js/plugins/code_beautifier.min.js"></script>
+  <script type="text/javascript" src="../../js/plugins/code_view.min.js"></script>
+  <script type="text/javascript" src="../../js/plugins/colors.min.js"></script>
+  <script type="text/javascript" src="../../js/plugins/draggable.min.js"></script>
+  <script type="text/javascript" src="../../js/plugins/emoticons.min.js"></script>
+  <script type="text/javascript" src="../../js/plugins/entities.min.js"></script>
+  <script type="text/javascript" src="../../js/plugins/file.min.js"></script>
+  <script type="text/javascript" src="../../js/plugins/font_size.min.js"></script>
+  <script type="text/javascript" src="../../js/plugins/font_family.min.js"></script>
+  <script type="text/javascript" src="../../js/plugins/fullscreen.min.js"></script>
+  <script type="text/javascript" src="../../js/plugins/image.min.js"></script>
+  <script type="text/javascript" src="../../js/plugins/image_manager.min.js"></script>
+  <script type="text/javascript" src="../../js/plugins/line_breaker.min.js"></script>
+  <script type="text/javascript" src="../../js/plugins/inline_style.min.js"></script>
+  <script type="text/javascript" src="../../js/plugins/link.min.js"></script>
+  <script type="text/javascript" src="../../js/plugins/lists.min.js"></script>
+  <script type="text/javascript" src="../../js/plugins/paragraph_format.min.js"></script>
+  <script type="text/javascript" src="../../js/plugins/paragraph_style.min.js"></script>
+  <script type="text/javascript" src="../../js/plugins/quick_insert.min.js"></script>
+  <script type="text/javascript" src="../../js/plugins/quote.min.js"></script>
+  <script type="text/javascript" src="../../js/plugins/table.min.js"></script>
+  <script type="text/javascript" src="../../js/plugins/save.min.js"></script>
+  <script type="text/javascript" src="../../js/plugins/url.min.js"></script>
+  <script type="text/javascript" src="../../js/plugins/video.min.js"></script>
+
+  <script>
+    $(function(){
+      $('#edit').froalaEditor()
+    });
+  </script>
+</body>
+</html>

+ 101 - 0
modules/boonex/froala/plugins/froala/html/api/init_destroy.html

@@ -0,0 +1,101 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0"/>
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css">
+  <link rel="stylesheet" href="../../css/froala_editor.css">
+  <link rel="stylesheet" href="../../css/froala_style.css">
+  <link rel="stylesheet" href="../../css/plugins/code_view.css">
+  <link rel="stylesheet" href="../../css/plugins/image_manager.css">
+  <link rel="stylesheet" href="../../css/plugins/image.css">
+  <link rel="stylesheet" href="../../css/plugins/table.css">
+  <link rel="stylesheet" href="../../css/plugins/video.css">
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.3.0/codemirror.min.css">
+
+
+  <style>
+    body {
+      text-align: center;
+    }
+
+    div#editor {
+      width: 81%;
+      margin: auto;
+      text-align: left;
+    }
+
+    div#buttons {
+      margin-top: 30px;
+    }
+  </style>
+</head>
+
+<body>
+  <div id="buttons">
+    <button id="init">Init Editor</button>
+    <button id="destroy">Destroy Editor</button>
+  </div>
+
+  <div id="editor">
+    <div id='edit' class="fr-view" style="margin-top: 30px;">
+      <h1>Init / Destroy editor</h1>
+
+      <p>The buttons above will initialize and destroy the rich text editor again.</p>
+
+      <img class="fr-fir fr-dii" src="../../img/photo1.jpg" alt="Old Clock" width="300"/>Lorem <strong>ipsum</strong> dolor sit amet, consectetur <strong>adipiscing <em>elit.</em> Donec</strong> facilisis diam in odio iaculis blandit. Nunc eu mauris sit amet purus <strong>viverra</strong><em> gravida</em> ut a dui.<br/>
+      <ul><li>Vivamus nec rutrum augue, pharetra faucibus purus. Maecenas non orci sagittis, vehicula lorem et, dignissim nunc.</li> <li>Suspendisse suscipit, diam non varius facilisis, enim libero tincidunt magna, sit amet iaculis eros libero sit amet eros. Vestibulum a rhoncus felis.<ol><li>Nam lacus nulla, consequat ac lacus sit amet, accumsan pellentesque risus. Aenean viverra mi at urna mattis fermentum.</li> <li>Curabitur porta metus in tortor elementum, in semper nulla ullamcorper. Vestibulum mattis tempor tortor quis gravida. In rhoncus risus nibh. Nullam condimentum dapibus massa vel fringilla. Sed hendrerit sed est quis facilisis. Ut sit amet nibh sem. Pellentesque imperdiet mollis libero.</li></ol></li></ul>
+
+      <table style="width: 100%;">
+        <tr>
+          <td style="width: 25%;"></td>
+          <td style="width: 25%;"></td>
+          <td style="width: 25%;"></td>
+          <td style="width: 25%;"></td>
+        </tr>
+        <tr>
+          <td style="width: 25%;"></td>
+          <td style="width: 25%;"></td>
+          <td style="width: 25%;"></td>
+          <td style="width: 25%;"></td>
+        </tr>
+      </table>
+
+      <a href="http://google.com" title="Aenean sed hendrerit">Aenean sed hendrerit</a> velit. Nullam eu mi dolor. Maecenas et erat risus. Nulla ac auctor diam, non aliquet ante. Fusce ullamcorper, ipsum id tempor lacinia, sem tellus malesuada libero, quis ornare sem massa in orci. Sed dictum dictum tristique. Proin eros turpis, ultricies eu sapien eget, ornare rutrum ipsum. Pellentesque eros nisl, ornare nec ipsum sed, aliquet sollicitudin erat. Nulla tincidunt porta <strong>vehicula.</strong><br/>
+    </div>
+  </div>
+
+  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
+  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.3.0/codemirror.min.js"></script>
+  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.3.0/mode/xml/xml.min.js"></script>
+  <script type="text/javascript" src="../../js/froala_editor.min.js"></script>
+  <script type="text/javascript" src="../../js/plugins/align.min.js"></script>
+  <script type="text/javascript" src="../../js/plugins/code_beautifier.min.js"></script>
+  <script type="text/javascript" src="../../js/plugins/code_view.min.js"></script>
+  <script type="text/javascript" src="../../js/plugins/draggable.min.js"></script>
+  <script type="text/javascript" src="../../js/plugins/image.min.js"></script>
+  <script type="text/javascript" src="../../js/plugins/image_manager.min.js"></script>
+  <script type="text/javascript" src="../../js/plugins/link.min.js"></script>
+  <script type="text/javascript" src="../../js/plugins/lists.min.js"></script>
+  <script type="text/javascript" src="../../js/plugins/paragraph_format.min.js"></script>
+  <script type="text/javascript" src="../../js/plugins/paragraph_style.min.js"></script>
+  <script type="text/javascript" src="../../js/plugins/table.min.js"></script>
+  <script type="text/javascript" src="../../js/plugins/video.min.js"></script>
+  <script type="text/javascript" src="../../js/plugins/url.min.js"></script>
+  <script type="text/javascript" src="../../js/plugins/entities.min.js"></script>
+
+  <script>
+      $(function(){
+        $('#init').on('click', function(e) {
+          console.log("Initializing Froala Editor...");
+          $('#edit').removeClass('fr-view').froalaEditor();
+        })
+        $('#destroy').on('click', function (e) {
+          console.log("Destroying Froala Editor...");
+          $('#edit').froalaEditor('destroy');
+          $('#edit').addClass('fr-view');
+        });
+      });
+  </script>
+</body>
+</html>

+ 99 - 0
modules/boonex/froala/plugins/froala/html/api/insert_html.html

@@ -0,0 +1,99 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0"/>
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css">
+  <link rel="stylesheet" href="../../css/froala_editor.css">
+  <link rel="stylesheet" href="../../css/froala_style.css">
+  <link rel="stylesheet" href="../../css/plugins/code_view.css">
+  <link rel="stylesheet" href="../../css/plugins/colors.css">
+  <link rel="stylesheet" href="../../css/plugins/emoticons.css">
+  <link rel="stylesheet" href="../../css/plugins/image_manager.css">
+  <link rel="stylesheet" href="../../css/plugins/image.css">
+  <link rel="stylesheet" href="../../css/plugins/line_breaker.css">
+  <link rel="stylesheet" href="../../css/plugins/table.css">
+  <link rel="stylesheet" href="../../css/plugins/char_counter.css">
+  <link rel="stylesheet" href="../../css/plugins/video.css">
+  <link rel="stylesheet" href="../../css/plugins/fullscreen.css">
+  <link rel="stylesheet" href="../../css/plugins/file.css">
+  <link rel="stylesheet" href="../../css/plugins/quick_insert.css">
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.3.0/codemirror.min.css">
+
+  <style>
+      body {
+          text-align: center;
+      }
+
+      div#editor {
+          width: 81%;
+          margin: auto;
+          text-align: left;
+      }
+
+      .ss {
+        background-color: red;
+      }
+  </style>
+</head>
+
+<body>
+  <div id="editor">
+    <div id='edit' style="margin-top: 30px;">
+      <h1>Insert HTML</h1>
+      <p>Click the insert HTML button in the toolbar to insert some HTML.</p>
+    </div>
+  </div>
+
+  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
+  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.3.0/codemirror.min.js"></script>
+  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.3.0/mode/xml/xml.min.js"></script>
+
+  <script type="text/javascript" src="../../js/froala_editor.min.js" ></script>
+  <script type="text/javascript" src="../../js/plugins/align.min.js"></script>
+  <script type="text/javascript" src="../../js/plugins/char_counter.min.js"></script>
+  <script type="text/javascript" src="../../js/plugins/code_beautifier.min.js"></script>
+  <script type="text/javascript" src="../../js/plugins/code_view.min.js"></script>
+  <script type="text/javascript" src="../../js/plugins/colors.min.js"></script>
+  <script type="text/javascript" src="../../js/plugins/draggable.min.js"></script>
+  <script type="text/javascript" src="../../js/plugins/emoticons.min.js"></script>
+  <script type="text/javascript" src="../../js/plugins/entities.min.js"></script>
+  <script type="text/javascript" src="../../js/plugins/file.min.js"></script>
+  <script type="text/javascript" src="../../js/plugins/font_size.min.js"></script>
+  <script type="text/javascript" src="../../js/plugins/font_family.min.js"></script>
+  <script type="text/javascript" src="../../js/plugins/fullscreen.min.js"></script>
+  <script type="text/javascript" src="../../js/plugins/image.min.js"></script>
+  <script type="text/javascript" src="../../js/plugins/image_manager.min.js"></script>
+  <script type="text/javascript" src="../../js/plugins/line_breaker.min.js"></script>
+  <script type="text/javascript" src="../../js/plugins/inline_style.min.js"></script>
+  <script type="text/javascript" src="../../js/plugins/link.min.js"></script>
+  <script type="text/javascript" src="../../js/plugins/lists.min.js"></script>
+  <script type="text/javascript" src="../../js/plugins/paragraph_format.min.js"></script>
+  <script type="text/javascript" src="../../js/plugins/paragraph_style.min.js"></script>
+  <script type="text/javascript" src="../../js/plugins/quick_insert.min.js"></script>
+  <script type="text/javascript" src="../../js/plugins/quote.min.js"></script>
+  <script type="text/javascript" src="../../js/plugins/table.min.js"></script>
+  <script type="text/javascript" src="../../js/plugins/save.min.js"></script>
+  <script type="text/javascript" src="../../js/plugins/url.min.js"></script>
+  <script type="text/javascript" src="../../js/plugins/video.min.js"></script>
+
+  <script>
+    $(function(){
+      $.FroalaEditor.DefineIcon('insertHTML', {NAME: 'plus'});
+      $.FroalaEditor.RegisterCommand('insertHTML', {
+        title: 'Insert HTML',
+        focus: true,
+        undo: true,
+        refreshAfterCallback: true,
+        callback: function () {
+          this.html.insert('Some Custom HTML.');
+          this.undo.saveStep();
+        }
+      });
+      $('#edit').froalaEditor({
+      toolbarButtons: ['bold', 'italic', 'underline', 'paragraphFormat', 'formatOL', 'formatUL', 'insertHTML', 'undo', 'redo', 'html']
+      });
+    });
+  </script>
+</body>
+</html>

+ 79 - 0
modules/boonex/froala/plugins/froala/html/api/live_code_preview.html

@@ -0,0 +1,79 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0"/>
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css">
+  <link rel="stylesheet" href="../../css/froala_editor.css">
+  <link rel="stylesheet" href="../../css/froala_style.css">
+  <link rel="stylesheet" href="../../css/plugins/code_view.css">
+  <link rel="stylesheet" href="../../css/plugins/image_manager.css">
+  <link rel="stylesheet" href="../../css/plugins/image.css">
+  <link rel="stylesheet" href="../../css/plugins/table.css">
+  <link rel="stylesheet" href="../../css/plugins/video.css">
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.3.0/codemirror.min.css">
+
+
+  <style>
+    body {
+      text-align: center;
+    }
+
+    div#editor {
+      width: 81%;
+      margin: auto;
+      text-align: left;
+    }
+
+    pre#preview {
+      padding: 10px;
+      background: #efefef;
+      white-space: pre-line;
+      line-height: 1.5;
+    }
+  </style>
+</head>
+
+<body>
+  <div id="editor">
+    <div id='edit' style="margin-top: 30px;">
+      <img class="fr-fir fr-dii" src="../../img/photo1.jpg" alt="Old Clock" width="200"/>
+
+      <h1>Live Code Preview</h1>
+
+      <p>This example allows you to see when the <a href="https://www.froala.com/wysiwyg-editor/v2.0/docs/events#contentChanged" title="contentChanged event" target="_blank">contentChanged</a> event is triggered and how the rich text editor's content appears outside the editable area.</p>
+
+      <p>Start typing and you can preview the code of the WYSIWYG HTML editor as you type below the editing box.</p>
+    </div>
+
+    <pre id="preview"></pre>
+  </div>
+
+  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
+  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.3.0/codemirror.min.js"></script>
+  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.3.0/mode/xml/xml.min.js"></script>
+  <script type="text/javascript" src="../../js/froala_editor.min.js"></script>
+  <script type="text/javascript" src="../../js/plugins/align.min.js"></script>
+  <script type="text/javascript" src="../../js/plugins/code_beautifier.min.js"></script>
+  <script type="text/javascript" src="../../js/plugins/code_view.min.js"></script>
+  <script type="text/javascript" src="../../js/plugins/draggable.min.js"></script>
+  <script type="text/javascript" src="../../js/plugins/image.min.js"></script>
+  <script type="text/javascript" src="../../js/plugins/image_manager.min.js"></script>
+  <script type="text/javascript" src="../../js/plugins/link.min.js"></script>
+  <script type="text/javascript" src="../../js/plugins/lists.min.js"></script>
+  <script type="text/javascript" src="../../js/plugins/paragraph_format.min.js"></script>
+  <script type="text/javascript" src="../../js/plugins/paragraph_style.min.js"></script>
+  <script type="text/javascript" src="../../js/plugins/table.min.js"></script>
+  <script type="text/javascript" src="../../js/plugins/video.min.js"></script>
+  <script type="text/javascript" src="../../js/plugins/url.min.js"></script>
+  <script type="text/javascript" src="../../js/plugins/entities.min.js"></script>
+
+  <script>
+      $(function(){
+        $('#edit').on('froalaEditor.contentChanged froalaEditor.initialized', function (e, editor) {
+          $('#preview').text(editor.codeBeautifier.run(editor.html.get()))
+        }).froalaEditor();
+      });
+  </script>
+</body>
+</html>

+ 78 - 0
modules/boonex/froala/plugins/froala/html/api/live_content_preview.html

@@ -0,0 +1,78 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0"/>
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css">
+  <link rel="stylesheet" href="../../css/froala_editor.css">
+  <link rel="stylesheet" href="../../css/froala_style.css">
+  <link rel="stylesheet" href="../../css/plugins/code_view.css">
+  <link rel="stylesheet" href="../../css/plugins/image_manager.css">
+  <link rel="stylesheet" href="../../css/plugins/image.css">
+  <link rel="stylesheet" href="../../css/plugins/table.css">
+  <link rel="stylesheet" href="../../css/plugins/video.css">
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.3.0/codemirror.min.css">
+
+
+  <style>
+    body {
+      text-align: center;
+    }
+
+    div#editor {
+      width: 81%;
+      margin: auto;
+      text-align: left;
+    }
+
+    div#preview {
+      padding: 10px;
+      background: #efefef;
+      margin-top: 20px;
+    }
+  </style>
+</head>
+
+<body>
+  <div id="editor">
+    <div id='edit' style="margin-top: 30px;">
+      <img class="fr-fir fr-dii" src="../../img/photo1.jpg" alt="Old Clock" width="200"/>
+
+      <h1>Live Content Preview</h1>
+
+      <p>This example allows you to see when the <a href="https://www.froala.com/wysiwyg-editor/v2.0/docs/events#contentChanged" title="contentChanged event" target="_blank">contentChanged</a> event is triggered and how the rich text editor's content appears outside the editable area.</p>
+
+      <p>Start typing and you can preview the content of the WYSIWYG HTML editor as you type below the editing box.</p>
+    </div>
+
+    <div id="preview" class="fr-view"></div>
+  </div>
+
+  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
+  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.3.0/codemirror.min.js"></script>
+  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.3.0/mode/xml/xml.min.js"></script>
+  <script type="text/javascript" src="../../js/froala_editor.min.js"></script>
+  <script type="text/javascript" src="../../js/plugins/align.min.js"></script>
+  <script type="text/javascript" src="../../js/plugins/code_beautifier.min.js"></script>
+  <script type="text/javascript" src="../../js/plugins/code_view.min.js"></script>
+  <script type="text/javascript" src="../../js/plugins/draggable.min.js"></script>
+  <script type="text/javascript" src="../../js/plugins/image.min.js"></script>
+  <script type="text/javascript" src="../../js/plugins/image_manager.min.js"></script>
+  <script type="text/javascript" src="../../js/plugins/link.min.js"></script>
+  <script type="text/javascript" src="../../js/plugins/lists.min.js"></script>
+  <script type="text/javascript" src="../../js/plugins/paragraph_format.min.js"></script>
+  <script type="text/javascript" src="../../js/plugins/paragraph_style.min.js"></script>
+  <script type="text/javascript" src="../../js/plugins/table.min.js"></script>
+  <script type="text/javascript" src="../../js/plugins/video.min.js"></script>
+  <script type="text/javascript" src="../../js/plugins/url.min.js"></script>
+  <script type="text/javascript" src="../../js/plugins/entities.min.js"></script>
+
+  <script>
+      $(function(){
+        $('#edit').on('froalaEditor.contentChanged froalaEditor.initialized', function (e, editor) {
+          $('#preview').html(editor.html.get());
+        }).froalaEditor();
+      });
+  </script>
+</body>
+</html>

+ 130 - 0
modules/boonex/froala/plugins/froala/html/api/selection.html

@@ -0,0 +1,130 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0"/>
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css">
+  <link rel="stylesheet" href="../../css/froala_editor.css">
+  <link rel="stylesheet" href="../../css/froala_style.css">
+  <link rel="stylesheet" href="../../css/plugins/code_view.css">
+  <link rel="stylesheet" href="../../css/plugins/colors.css">
+  <link rel="stylesheet" href="../../css/plugins/emoticons.css">
+  <link rel="stylesheet" href="../../css/plugins/image_manager.css">
+  <link rel="stylesheet" href="../../css/plugins/image.css">
+  <link rel="stylesheet" href="../../css/plugins/line_breaker.css">
+  <link rel="stylesheet" href="../../css/plugins/table.css">
+  <link rel="stylesheet" href="../../css/plugins/char_counter.css">
+  <link rel="stylesheet" href="../../css/plugins/video.css">
+  <link rel="stylesheet" href="../../css/plugins/fullscreen.css">
+  <link rel="stylesheet" href="../../css/plugins/file.css">
+  <link rel="stylesheet" href="../../css/plugins/quick_insert.css">
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.3.0/codemirror.min.css">
+
+  <style>
+      body {
+          text-align: center;
+      }
+
+      div#editor {
+          width: 81%;
+          margin: auto;
+          text-align: left;
+      }
+
+      .ss {
+        background-color: red;
+      }
+  </style>
+</head>
+
+<body>
+  <div id="editor">
+    <div id='edit' style="margin-top: 30px;">
+      <h1>Save / Restore Selection</h1>
+      <ol>
+        <li>You can use the buttons to play around with the selection:
+          <ul>
+            <li>The first button saves the selection.</li>
+            <li>The second button restores the selection.</li>
+            <li>The last button clears the selection.</li>
+          </ul>
+        </li>
+        <li>The selection will be restored correctly only if you don't make any changes by typing into the WYSIWYG HTML editor after you save it.</li>
+      </ol>
+    </div>
+  </div>
+
+  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
+  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.3.0/codemirror.min.js"></script>
+  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.3.0/mode/xml/xml.min.js"></script>
+
+  <script type="text/javascript" src="../../js/froala_editor.min.js" ></script>
+  <script type="text/javascript" src="../../js/plugins/align.min.js"></script>
+  <script type="text/javascript" src="../../js/plugins/char_counter.min.js"></script>
+  <script type="text/javascript" src="../../js/plugins/code_beautifier.min.js"></script>
+  <script type="text/javascript" src="../../js/plugins/code_view.min.js"></script>
+  <script type="text/javascript" src="../../js/plugins/colors.min.js"></script>
+  <script type="text/javascript" src="../../js/plugins/draggable.min.js"></script>
+  <script type="text/javascript" src="../../js/plugins/emoticons.min.js"></script>
+  <script type="text/javascript" src="../../js/plugins/entities.min.js"></script>
+  <script type="text/javascript" src="../../js/plugins/file.min.js"></script>
+  <script type="text/javascript" src="../../js/plugins/font_size.min.js"></script>
+  <script type="text/javascript" src="../../js/plugins/font_family.min.js"></script>
+  <script type="text/javascript" src="../../js/plugins/fullscreen.min.js"></script>
+  <script type="text/javascript" src="../../js/plugins/image.min.js"></script>
+  <script type="text/javascript" src="../../js/plugins/image_manager.min.js"></script>
+  <script type="text/javascript" src="../../js/plugins/line_breaker.min.js"></script>
+  <script type="text/javascript" src="../../js/plugins/inline_style.min.js"></script>
+  <script type="text/javascript" src="../../js/plugins/link.min.js"></script>
+  <script type="text/javascript" src="../../js/plugins/lists.min.js"></script>
+  <script type="text/javascript" src="../../js/plugins/paragraph_format.min.js"></script>
+  <script type="text/javascript" src="../../js/plugins/paragraph_style.min.js"></script>
+  <script type="text/javascript" src="../../js/plugins/quick_insert.min.js"></script>
+  <script type="text/javascript" src="../../js/plugins/quote.min.js"></script>
+  <script type="text/javascript" src="../../js/plugins/table.min.js"></script>
+  <script type="text/javascript" src="../../js/plugins/save.min.js"></script>
+  <script type="text/javascript" src="../../js/plugins/url.min.js"></script>
+  <script type="text/javascript" src="../../js/plugins/video.min.js"></script>
+
+  <script>
+    $(function(){
+      $.FroalaEditor.DefineIcon('saveSelection', {NAME: 'download'});
+      $.FroalaEditor.RegisterCommand('saveSelection', {
+        title: 'Save',
+        focus: true,
+        undo: false,
+        refreshAfterCallback: false,
+        callback: function () {
+          this.selection.save();
+          alert('selection saved');
+        }
+      });
+
+      $.FroalaEditor.DefineIcon('restoreSelection', {NAME: 'upload'});
+      $.FroalaEditor.RegisterCommand('restoreSelection', {
+        title: 'Restore',
+        focus: true,
+        undo: false,
+        refreshAfterCallback: false,
+        callback: function () {
+          this.selection.restore();
+        }
+      });
+
+      $.FroalaEditor.DefineIcon('clearSelection', {NAME: 'trash'});
+      $.FroalaEditor.RegisterCommand('clearSelection', {
+        title: 'Clear',
+        focus: true,
+        undo: false,
+        refreshAfterCallback: false,
+        callback: function () {
+          this.selection.clear();
+        }
+      });
+      $('#edit').froalaEditor({
+        toolbarButtons: ['saveSelection', 'restoreSelection', 'clearSelection']
+      })
+    });
+  </script>
+</body>
+</html>

+ 123 - 0
modules/boonex/froala/plugins/froala/html/buttons/custom_buttons.html

@@ -0,0 +1,123 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0"/>
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css">
+  <link rel="stylesheet" href="../../css/froala_editor.css">
+  <link rel="stylesheet" href="../../css/froala_style.css">
+  <link rel="stylesheet" href="../../css/plugins/code_view.css">
+  <link rel="stylesheet" href="../../css/plugins/colors.css">
+  <link rel="stylesheet" href="../../css/plugins/emoticons.css">
+  <link rel="stylesheet" href="../../css/plugins/image_manager.css">
+  <link rel="stylesheet" href="../../css/plugins/image.css">
+  <link rel="stylesheet" href="../../css/plugins/line_breaker.css">
+  <link rel="stylesheet" href="../../css/plugins/table.css">
+  <link rel="stylesheet" href="../../css/plugins/char_counter.css">
+  <link rel="stylesheet" href="../../css/plugins/video.css">
+  <link rel="stylesheet" href="../../css/plugins/fullscreen.css">
+  <link rel="stylesheet" href="../../css/plugins/file.css">
+  <link rel="stylesheet" href="../../css/plugins/quick_insert.css">
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.3.0/codemirror.min.css">
+
+  <style>
+      body {
+          text-align: center;
+      }
+
+      div#editor {
+          width: 81%;
+          margin: auto;
+          text-align: left;
+      }
+  </style>
+</head>
+
+<body>
+  <div id="editor">
+    <div id='edit' style="margin-top: 30px;">
+      <h1>Custom Buttons</h1>
+
+      <p>You can see the new buttons added after the separator in the toolbar.</p>
+
+      <p>Froala WYSIWYG HTML Editor covers a lot of functionalities through the default buttons. However, you might need buttons with another behavior to be integrated in the toolbar. This can be done by defining a custom command and then passing the command in the buttons list. More details about defining a custom command can be found in the <a href="https://www.froala.com/wysiwyg-editor/docs/concepts/custom/button" title="Custom Button Concept" target="_blank">Custom Button</a> concept.</p>
+
+      <p>After defining custom buttons you need to add them to the toolbar buttons list, using the following options: <a href="https://www.froala.com/wysiwyg-editor/docs/options#toolbarButtons" title="toolbarButtons" target="_blank">toolbarButtons</a>, <a href="https://www.froala.com/wysiwyg-editor/docs/options#toolbarButtonsMD" title="toolbarButtonsMD" target="_blank">toolbarButtonsMD</a>, <a href="https://www.froala.com/wysiwyg-editor/docs/options#toolbarButtonsSM" title="toolbarButtonsSM" target="_blank">toolbarButtonsSM</a> and <a href="https://www.froala.com/wysiwyg-editor/docs/options#toolbarButtonsXS" title="toolbarButtonsXS" target="_blank">toolbarButtonsXS</a> as explained in the <a href="https://froala.com/wysiwyg-editor/examples/custom-toolbar" title="Custom Toolbar Example" target="_blank">Custom Toolbar</a> example.</p>
+    </div>
+  </div>
+
+  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
+  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.3.0/codemirror.min.js"></script>
+  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.3.0/mode/xml/xml.min.js"></script>
+
+  <script type="text/javascript" src="../../js/froala_editor.min.js" ></script>
+  <script type="text/javascript" src="../../js/plugins/align.min.js"></script>
+  <script type="text/javascript" src="../../js/plugins/char_counter.min.js"></script>
+  <script type="text/javascript" src="../../js/plugins/code_beautifier.min.js"></script>
+  <script type="text/javascript" src="../../js/plugins/code_view.min.js"></script>
+  <script type="text/javascript" src="../../js/plugins/colors.min.js"></script>
+  <script type="text/javascript" src="../../js/plugins/draggable.min.js"></script>
+  <script type="text/javascript" src="../../js/plugins/emoticons.min.js"></script>
+  <script type="text/javascript" src="../../js/plugins/entities.min.js"></script>
+  <script type="text/javascript" src="../../js/plugins/file.min.js"></script>
+  <script type="text/javascript" src="../../js/plugins/font_size.min.js"></script>
+  <script type="text/javascript" src="../../js/plugins/font_family.min.js"></script>
+  <script type="text/javascript" src="../../js/plugins/fullscreen.min.js"></script>
+  <script type="text/javascript" src="../../js/plugins/image.min.js"></script>
+  <script type="text/javascript" src="../../js/plugins/image_manager.min.js"></script>
+  <script type="text/javascript" src="../../js/plugins/line_breaker.min.js"></script>
+  <script type="text/javascript" src="../../js/plugins/inline_style.min.js"></script>
+  <script type="text/javascript" src="../../js/plugins/link.min.js"></script>
+  <script type="text/javascript" src="../../js/plugins/lists.min.js"></script>
+  <script type="text/javascript" src="../../js/plugins/paragraph_format.min.js"></script>
+  <script type="text/javascript" src="../../js/plugins/paragraph_style.min.js"></script>
+  <script type="text/javascript" src="../../js/plugins/quick_insert.min.js"></script>
+  <script type="text/javascript" src="../../js/plugins/quote.min.js"></script>
+  <script type="text/javascript" src="../../js/plugins/table.min.js"></script>
+  <script type="text/javascript" src="../../js/plugins/save.min.js"></script>
+  <script type="text/javascript" src="../../js/plugins/url.min.js"></script>
+  <script type="text/javascript" src="../../js/plugins/video.min.js"></script>
+
+  <script>
+    $(function(){
+      $.FroalaEditor.DefineIcon('alert', {NAME: 'info'});
+      $.FroalaEditor.RegisterCommand('alert', {
+        title: 'Hello',
+        focus: false,
+        undo: false,
+        refreshAfterCallback: false,
+        callback: function () {
+          alert('Hello!');
+        }
+      });
+
+      $.FroalaEditor.DefineIcon('clear', {NAME: 'remove'});
+      $.FroalaEditor.RegisterCommand('clear', {
+        title: 'Clear HTML',
+        focus: false,
+        undo: true,
+        refreshAfterCallback: true,
+        callback: function () {
+          this.html.set('');
+          this.events.focus();
+        }
+      });
+
+      $.FroalaEditor.DefineIcon('insert', {NAME: 'plus'});
+      $.FroalaEditor.RegisterCommand('insert', {
+        title: 'Insert HTML',
+        focus: true,
+        undo: true,
+        refreshAfterCallback: true,
+        callback: function () {
+          this.html.insert('My New HTML');
+        }
+      });
+
+      $('#edit').froalaEditor({
+        toolbarButtons: ['undo', 'redo' , 'bold', '|', 'alert', 'clear', 'insert']
+      })
+    });
+  </script>
+</body>
+</html>

+ 113 - 0
modules/boonex/froala/plugins/froala/html/buttons/custom_dropdown.html

@@ -0,0 +1,113 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0"/>
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css">
+  <link rel="stylesheet" href="../../css/froala_editor.css">
+  <link rel="stylesheet" href="../../css/froala_style.css">
+  <link rel="stylesheet" href="../../css/plugins/code_view.css">
+  <link rel="stylesheet" href="../../css/plugins/colors.css">
+  <link rel="stylesheet" href="../../css/plugins/emoticons.css">
+  <link rel="stylesheet" href="../../css/plugins/image_manager.css">
+  <link rel="stylesheet" href="../../css/plugins/image.css">
+  <link rel="stylesheet" href="../../css/plugins/line_breaker.css">
+  <link rel="stylesheet" href="../../css/plugins/table.css">
+  <link rel="stylesheet" href="../../css/plugins/char_counter.css">
+  <link rel="stylesheet" href="../../css/plugins/video.css">
+  <link rel="stylesheet" href="../../css/plugins/fullscreen.css">
+  <link rel="stylesheet" href="../../css/plugins/file.css">
+  <link rel="stylesheet" href="../../css/plugins/quick_insert.css">
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.3.0/codemirror.min.css">
+
+  <style>
+      body {
+          text-align: center;
+      }
+
+      div#editor {
+          width: 81%;
+          margin: auto;
+          text-align: left;
+      }
+  </style>
+</head>
+
+<body>
+  <div id="editor">
+    <div id='edit' style="margin-top: 30px;">
+      <h1>Custom Dropdown</h1>
+
+      <p>An example of custom dropdown for the WYSIWYG HTML editor.</p>
+
+      <p>More details about defining a custom dropdown can be found in the <a href="https://froala.com/wysiwyg-editor/docs/concepts/custom/dropdown" title="Custom Dropdown Concept" target="_blank">Custom Dropdown</a> concept.</p>
+
+      <p>After defining custom buttons you need to add them to the toolbar buttons list, using the following options: <a href="https://froala.com/wysiwyg-editor/docs/options#toolbarButtons" title="toolbarButtons" target="_blank">toolbarButtons</a>, <a href="https://froala.com/wysiwyg-editor/docs/options#toolbarButtonsMD" title="toolbarButtonsMD" target="_blank">toolbarButtonsMD</a>, <a href="https://froala.com/wysiwyg-editor/docs/options#toolbarButtonsSM" title="toolbarButtonsSM" target="_blank">toolbarButtonsSM</a> and <a href="https://froala.com/wysiwyg-editor/docs/options#toolbarButtonsXS" title="toolbarButtonsXS" target="_blank">toolbarButtonsXS</a> as explained in the <a href="https://froala.com/wysiwyg-editor/examples/custom-toolbar" title="Custom Toolbar Example" target="_blank">Custom Toolbar</a> example.</p>
+    </div>
+  </div>
+
+  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
+  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.3.0/codemirror.min.js"></script>
+  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.3.0/mode/xml/xml.min.js"></script>
+
+  <script type="text/javascript" src="../../js/froala_editor.min.js" ></script>
+  <script type="text/javascript" src="../../js/plugins/align.min.js"></script>
+  <script type="text/javascript" src="../../js/plugins/char_counter.min.js"></script>
+  <script type="text/javascript" src="../../js/plugins/code_beautifier.min.js"></script>
+  <script type="text/javascript" src="../../js/plugins/code_view.min.js"></script>
+  <script type="text/javascript" src="../../js/plugins/colors.min.js"></script>
+  <script type="text/javascript" src="../../js/plugins/draggable.min.js"></script>
+  <script type="text/javascript" src="../../js/plugins/emoticons.min.js"></script>
+  <script type="text/javascript" src="../../js/plugins/entities.min.js"></script>
+  <script type="text/javascript" src="../../js/plugins/file.min.js"></script>
+  <script type="text/javascript" src="../../js/plugins/font_size.min.js"></script>
+  <script type="text/javascript" src="../../js/plugins/font_family.min.js"></script>
+  <script type="text/javascript" src="../../js/plugins/fullscreen.min.js"></script>
+  <script type="text/javascript" src="../../js/plugins/image.min.js"></script>
+  <script type="text/javascript" src="../../js/plugins/image_manager.min.js"></script>
+  <script type="text/javascript" src="../../js/plugins/line_breaker.min.js"></script>
+  <script type="text/javascript" src="../../js/plugins/inline_style.min.js"></script>
+  <script type="text/javascript" src="../../js/plugins/link.min.js"></script>
+  <script type="text/javascript" src="../../js/plugins/lists.min.js"></script>
+  <script type="text/javascript" src="../../js/plugins/paragraph_format.min.js"></script>
+  <script type="text/javascript" src="../../js/plugins/paragraph_style.min.js"></script>
+  <script type="text/javascript" src="../../js/plugins/quick_insert.min.js"></script>
+  <script type="text/javascript" src="../../js/plugins/quote.min.js"></script>
+  <script type="text/javascript" src="../../js/plugins/table.min.js"></script>
+  <script type="text/javascript" src="../../js/plugins/save.min.js"></script>
+  <script type="text/javascript" src="../../js/plugins/url.min.js"></script>
+  <script type="text/javascript" src="../../js/plugins/video.min.js"></script>
+
+  <script>
+    $(function(){
+      $.FroalaEditor.DefineIcon('my_dropdown', {NAME: 'cog'});
+        $.FroalaEditor.RegisterCommand('my_dropdown', {
+          title: 'Advanced options',
+          type: 'dropdown',
+          focus: false,
+          undo: false,
+          refreshAfterCallback: true,
+          options: {
+            'v1': 'Option 1',
+            'v2': 'Option 2'
+          },
+          callback: function (cmd, val) {
+            console.log (val);
+          },
+          // Callback on refresh.
+          refresh: function ($btn) {
+            console.log ('do refresh');
+          },
+          // Callback on dropdown show.
+          refreshOnShow: function ($btn, $dropdown) {
+            console.log ('do refresh when show');
+          }
+        });
+
+      $('#edit').froalaEditor({
+        toolbarButtons: ['bold', 'italic', 'formatBlock', 'my_dropdown']
+      })
+    });
+  </script>
+</body>
+</html>

+ 90 - 0
modules/boonex/froala/plugins/froala/html/buttons/external_button.html

@@ -0,0 +1,90 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0"/>
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css">
+  <link rel="stylesheet" href="../../css/froala_editor.css">
+  <link rel="stylesheet" href="../../css/froala_style.css">
+  <link rel="stylesheet" href="../../css/plugins/code_view.css">
+  <link rel="stylesheet" href="../../css/plugins/colors.css">
+  <link rel="stylesheet" href="../../css/plugins/emoticons.css">
+  <link rel="stylesheet" href="../../css/plugins/image_manager.css">
+  <link rel="stylesheet" href="../../css/plugins/image.css">
+  <link rel="stylesheet" href="../../css/plugins/line_breaker.css">
+  <link rel="stylesheet" href="../../css/plugins/table.css">
+  <link rel="stylesheet" href="../../css/plugins/char_counter.css">
+  <link rel="stylesheet" href="../../css/plugins/video.css">
+  <link rel="stylesheet" href="../../css/plugins/fullscreen.css">
+  <link rel="stylesheet" href="../../css/plugins/file.css">
+  <link rel="stylesheet" href="../../css/plugins/quick_insert.css">
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.3.0/codemirror.min.css">
+
+  <style>
+      body {
+          text-align: center;
+      }
+
+      div#editor {
+          width: 81%;
+          margin: auto;
+          text-align: left;
+      }
+  </style>
+</head>
+
+<body>
+  <div id="editor">
+    <div id='edit' style="margin-top: 30px;">
+      <h1>External Button</h1>
+
+      <p>This example illustrates how to clear the text using a button external to the Froala WYSIWYG HTML Editor interface.</p>
+    </div>
+
+    <p><button id="get-text">Clear</button></p>
+  </div>
+
+  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
+  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.3.0/codemirror.min.js"></script>
+  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.3.0/mode/xml/xml.min.js"></script>
+
+  <script type="text/javascript" src="../../js/froala_editor.min.js" ></script>
+  <script type="text/javascript" src="../../js/plugins/align.min.js"></script>
+  <script type="text/javascript" src="../../js/plugins/char_counter.min.js"></script>
+  <script type="text/javascript" src="../../js/plugins/code_beautifier.min.js"></script>
+  <script type="text/javascript" src="../../js/plugins/code_view.min.js"></script>
+  <script type="text/javascript" src="../../js/plugins/colors.min.js"></script>
+  <script type="text/javascript" src="../../js/plugins/draggable.min.js"></script>
+  <script type="text/javascript" src="../../js/plugins/emoticons.min.js"></script>
+  <script type="text/javascript" src="../../js/plugins/entities.min.js"></script>
+  <script type="text/javascript" src="../../js/plugins/file.min.js"></script>
+  <script type="text/javascript" src="../../js/plugins/font_size.min.js"></script>
+  <script type="text/javascript" src="../../js/plugins/font_family.min.js"></script>
+  <script type="text/javascript" src="../../js/plugins/fullscreen.min.js"></script>
+  <script type="text/javascript" src="../../js/plugins/image.min.js"></script>
+  <script type="text/javascript" src="../../js/plugins/image_manager.min.js"></script>
+  <script type="text/javascript" src="../../js/plugins/line_breaker.min.js"></script>
+  <script type="text/javascript" src="../../js/plugins/inline_style.min.js"></script>
+  <script type="text/javascript" src="../../js/plugins/link.min.js"></script>
+  <script type="text/javascript" src="../../js/plugins/lists.min.js"></script>
+  <script type="text/javascript" src="../../js/plugins/paragraph_format.min.js"></script>
+  <script type="text/javascript" src="../../js/plugins/paragraph_style.min.js"></script>
+  <script type="text/javascript" src="../../js/plugins/quick_insert.min.js"></script>
+  <script type="text/javascript" src="../../js/plugins/quote.min.js"></script>
+  <script type="text/javascript" src="../../js/plugins/table.min.js"></script>
+  <script type="text/javascript" src="../../js/plugins/save.min.js"></script>
+  <script type="text/javascript" src="../../js/plugins/url.min.js"></script>
+  <script type="text/javascript" src="../../js/plugins/video.min.js"></script>
+
+  <script>
+    $(function(){
+      $('#edit').on('froalaEditor.initialized', function (e, editor) {
+          editor.events.bindClick($('body'), 'button#get-text', function () {
+          editor.html.set('');
+          editor.events.focus();
+        })
+      }).froalaEditor()
+    });
+  </script>
+</body>
+</html>

+ 85 - 0
modules/boonex/froala/plugins/froala/html/buttons/subscript_superscript.html

@@ -0,0 +1,85 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0"/>
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css">
+  <link rel="stylesheet" href="../../css/froala_editor.css">
+  <link rel="stylesheet" href="../../css/froala_style.css">
+  <link rel="stylesheet" href="../../css/plugins/code_view.css">
+  <link rel="stylesheet" href="../../css/plugins/colors.css">
+  <link rel="stylesheet" href="../../css/plugins/emoticons.css">
+  <link rel="stylesheet" href="../../css/plugins/image_manager.css">
+  <link rel="stylesheet" href="../../css/plugins/image.css">
+  <link rel="stylesheet" href="../../css/plugins/line_breaker.css">
+  <link rel="stylesheet" href="../../css/plugins/table.css">
+  <link rel="stylesheet" href="../../css/plugins/char_counter.css">
+  <link rel="stylesheet" href="../../css/plugins/video.css">
+  <link rel="stylesheet" href="../../css/plugins/fullscreen.css">
+  <link rel="stylesheet" href="../../css/plugins/file.css">
+  <link rel="stylesheet" href="../../css/plugins/quick_insert.css">
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.3.0/codemirror.min.css">
+
+  <style>
+      body {
+          text-align: center;
+      }
+
+      div#editor {
+          width: 81%;
+          margin: auto;
+          text-align: left;
+      }
+  </style>
+</head>
+
+<body>
+  <div id="editor">
+    <div id='edit' style="margin-top: 30px;">
+      <h1>Subscript and Superscript</h1>
+
+      <p>To use <code>subscript</code> and <code>superscript</code>, just make sure that you include these buttons in the buttons list using the <a href="https://froala.com/wysiwyg-editor/docs/options#toolbarButtons" target="_blank" title="toolbarButtons option">toolbarButtons</a> option.</p>
+    </div>
+  </div>
+
+  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
+  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.3.0/codemirror.min.js"></script>
+  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.3.0/mode/xml/xml.min.js"></script>
+
+  <script type="text/javascript" src="../../js/froala_editor.min.js" ></script>
+  <script type="text/javascript" src="../../js/plugins/align.min.js"></script>
+  <script type="text/javascript" src="../../js/plugins/char_counter.min.js"></script>
+  <script type="text/javascript" src="../../js/plugins/code_beautifier.min.js"></script>
+  <script type="text/javascript" src="../../js/plugins/code_view.min.js"></script>
+  <script type="text/javascript" src="../../js/plugins/colors.min.js"></script>
+  <script type="text/javascript" src="../../js/plugins/draggable.min.js"></script>
+  <script type="text/javascript" src="../../js/plugins/emoticons.min.js"></script>
+  <script type="text/javascript" src="../../js/plugins/entities.min.js"></script>
+  <script type="text/javascript" src="../../js/plugins/file.min.js"></script>
+  <script type="text/javascript" src="../../js/plugins/font_size.min.js"></script>
+  <script type="text/javascript" src="../../js/plugins/font_family.min.js"></script>
+  <script type="text/javascript" src="../../js/plugins/fullscreen.min.js"></script>
+  <script type="text/javascript" src="../../js/plugins/image.min.js"></script>
+  <script type="text/javascript" src="../../js/plugins/image_manager.min.js"></script>
+  <script type="text/javascript" src="../../js/plugins/line_breaker.min.js"></script>
+  <script type="text/javascript" src="../../js/plugins/inline_style.min.js"></script>
+  <script type="text/javascript" src="../../js/plugins/link.min.js"></script>
+  <script type="text/javascript" src="../../js/plugins/lists.min.js"></script>
+  <script type="text/javascript" src="../../js/plugins/paragraph_format.min.js"></script>
+  <script type="text/javascript" src="../../js/plugins/paragraph_style.min.js"></script>
+  <script type="text/javascript" src="../../js/plugins/quick_insert.min.js"></script>
+  <script type="text/javascript" src="../../js/plugins/quote.min.js"></script>
+  <script type="text/javascript" src="../../js/plugins/table.min.js"></script>
+  <script type="text/javascript" src="../../js/plugins/save.min.js"></script>
+  <script type="text/javascript" src="../../js/plugins/url.min.js"></script>
+  <script type="text/javascript" src="../../js/plugins/video.min.js"></script>
+
+  <script>
+    $(function(){
+      $('#edit').froalaEditor({
+        toolbarButtons: ['bold', 'italic', '|', 'indent', 'outdent', 'formatOL', 'formatUL', '|', 'insertLink', 'insertImage', 'subscript', 'superscript']
+      })
+    });
+  </script>
+</body>
+</html>

+ 92 - 0
modules/boonex/froala/plugins/froala/html/events/blur_focus.html

@@ -0,0 +1,92 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0"/>
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css">
+  <link rel="stylesheet" href="../../css/froala_editor.css">
+  <link rel="stylesheet" href="../../css/froala_style.css">
+  <link rel="stylesheet" href="../../css/plugins/code_view.css">
+  <link rel="stylesheet" href="../../css/plugins/colors.css">
+  <link rel="stylesheet" href="../../css/plugins/emoticons.css">
+  <link rel="stylesheet" href="../../css/plugins/image_manager.css">
+  <link rel="stylesheet" href="../../css/plugins/image.css">
+  <link rel="stylesheet" href="../../css/plugins/line_breaker.css">
+  <link rel="stylesheet" href="../../css/plugins/table.css">
+  <link rel="stylesheet" href="../../css/plugins/video.css">
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.3.0/codemirror.min.css">
+
+  <style>
+      body {
+          text-align: center;
+      }
+
+      div#editor {
+          width: 81%;
+          margin: auto;
+          text-align: left;
+      }
+
+      div#input-parent {
+        background: #efefef;
+        padding: 10px;
+        margin-top: 30px;
+      }
+  </style>
+</head>
+
+<body>
+  <div id="editor">
+    <div id='edit' style="margin-top: 30px;">
+      <h1>Blur / Focus Events</h1>
+      <p>This example allows you to see when the <a href="https://www.froala.com/wysiwyg-editor/docs/events#blur" title="Blur event" target="_blank">blur</a> and the <a href="https://www.froala.com/wysiwyg-editor/docs/events#focus" title="Focus event" target="_blank">focus</a> events are triggered. Open the browser console to follow the event flow.</p>
+    </div>
+
+    <div id="input-parent">
+      <p>Use the input below to test focus and blur events together with an input.</p>
+      <input id="asd" type="text"><br/>
+    </div>
+  </div>
+
+  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
+  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.3.0/codemirror.min.js"></script>
+  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.3.0/mode/xml/xml.min.js"></script>
+  <script type="text/javascript" src="../../js/froala_editor.min.js"></script>
+  <script type="text/javascript" src="../../js/plugins/align.min.js"></script>
+  <script type="text/javascript" src="../../js/plugins/code_beautifier.min.js"></script>
+  <script type="text/javascript" src="../../js/plugins/code_view.min.js"></script>
+  <script type="text/javascript" src="../../js/plugins/colors.min.js"></script>
+  <script type="text/javascript" src="../../js/plugins/draggable.min.js"></script>
+  <script type="text/javascript" src="../../js/plugins/emoticons.min.js"></script>
+  <script type="text/javascript" src="../../js/plugins/font_size.min.js"></script>
+  <script type="text/javascript" src="../../js/plugins/font_family.min.js"></script>
+  <script type="text/javascript" src="../../js/plugins/image.min.js"></script>
+  <script type="text/javascript" src="../../js/plugins/image_manager.min.js"></script>
+  <script type="text/javascript" src="../../js/plugins/line_breaker.min.js"></script>
+  <script type="text/javascript" src="../../js/plugins/link.min.js"></script>
+  <script type="text/javascript" src="../../js/plugins/lists.min.js"></script>
+  <script type="text/javascript" src="../../js/plugins/paragraph_format.min.js"></script>
+  <script type="text/javascript" src="../../js/plugins/table.min.js"></script>
+  <script type="text/javascript" src="../../js/plugins/video.min.js"></script>
+
+  <script>
+    $(function(){
+      $('#edit').froalaEditor({
+        enter: $.FroalaEditor.ENTER_P
+      })
+      .on('froalaEditor.focus', function () {
+        console.log ('focus');
+      })
+      .on('froalaEditor.blur', function () {
+        console.log ('blur');
+      })
+
+      $('#asd').on('focus', function () {
+        console.log ('input focus')
+      }).on('blur', function () {
+        console.log ('input blur')
+      })
+    });
+  </script>
+</body>
+</html>

+ 72 - 0
modules/boonex/froala/plugins/froala/html/events/content_changed.html

@@ -0,0 +1,72 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0"/>
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css">
+  <link rel="stylesheet" href="../../css/froala_editor.css">
+  <link rel="stylesheet" href="../../css/froala_style.css">
+  <link rel="stylesheet" href="../../css/plugins/code_view.css">
+  <link rel="stylesheet" href="../../css/plugins/colors.css">
+  <link rel="stylesheet" href="../../css/plugins/emoticons.css">
+  <link rel="stylesheet" href="../../css/plugins/image_manager.css">
+  <link rel="stylesheet" href="../../css/plugins/image.css">
+  <link rel="stylesheet" href="../../css/plugins/line_breaker.css">
+  <link rel="stylesheet" href="../../css/plugins/table.css">
+  <link rel="stylesheet" href="../../css/plugins/video.css">
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.3.0/codemirror.min.css">
+
+  <style>
+      body {
+          text-align: center;
+      }
+
+      div#editor {
+          width: 81%;
+          margin: auto;
+          text-align: left;
+      }
+  </style>
+</head>
+
+<body>
+  <div id="editor">
+    <div id='edit' style="margin-top: 30px;">
+      <h1>Content Changed Event</h1>
+      <p>This example allows you to see when the <a href="https://www.froala.com/wysiwyg-editor/v2.0/docs/events#contentChanged" title="contentChanged event" target="_blank">contentChanged</a> event is triggered. Open the browser console to follow the event.</p>
+    </div>
+  </div>
+
+  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
+  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.3.0/codemirror.min.js"></script>
+  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.3.0/mode/xml/xml.min.js"></script>
+  <script type="text/javascript" src="../../js/froala_editor.min.js"></script>
+  <script type="text/javascript" src="../../js/plugins/align.min.js"></script>
+  <script type="text/javascript" src="../../js/plugins/code_beautifier.min.js"></script>
+  <script type="text/javascript" src="../../js/plugins/code_view.min.js"></script>
+  <script type="text/javascript" src="../../js/plugins/draggable.min.js"></script>
+  <script type="text/javascript" src="../../js/plugins/colors.min.js"></script>
+  <script type="text/javascript" src="../../js/plugins/emoticons.min.js"></script>
+  <script type="text/javascript" src="../../js/plugins/font_size.min.js"></script>
+  <script type="text/javascript" src="../../js/plugins/font_family.min.js"></script>
+  <script type="text/javascript" src="../../js/plugins/image.min.js"></script>
+  <script type="text/javascript" src="../../js/plugins/image_manager.min.js"></script>
+  <script type="text/javascript" src="../../js/plugins/line_breaker.min.js"></script>
+  <script type="text/javascript" src="../../js/plugins/link.min.js"></script>
+  <script type="text/javascript" src="../../js/plugins/lists.min.js"></script>
+  <script type="text/javascript" src="../../js/plugins/inline_style.min.js"></script>
+  <script type="text/javascript" src="../../js/plugins/table.min.js"></script>
+  <script type="text/javascript" src="../../js/plugins/video.min.js"></script>
+
+  <script>
+    $(function(){
+      $('#edit').froalaEditor({
+        enter: $.FroalaEditor.ENTER_P
+      })
+      .on ('froalaEditor.contentChanged', function () {
+        console.log ('content changed');
+      })
+    });
+  </script>
+</body>
+</html>

+ 103 - 0
modules/boonex/froala/plugins/froala/html/events/drop.html

@@ -0,0 +1,103 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0"/>
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css">
+  <link rel="stylesheet" href="../../css/froala_editor.css">
+  <link rel="stylesheet" href="../../css/froala_style.css">
+  <link rel="stylesheet" href="../../css/plugins/code_view.css">
+  <link rel="stylesheet" href="../../css/plugins/colors.css">
+  <link rel="stylesheet" href="../../css/plugins/emoticons.css">
+  <link rel="stylesheet" href="../../css/plugins/image_manager.css">
+  <link rel="stylesheet" href="../../css/plugins/image.css">
+  <link rel="stylesheet" href="../../css/plugins/line_breaker.css">
+  <link rel="stylesheet" href="../../css/plugins/table.css">
+  <link rel="stylesheet" href="../../css/plugins/video.css">
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.3.0/codemirror.min.css">
+
+  <style>
+      body {
+          text-align: center;
+      }
+
+      div#editor {
+          width: 81%;
+          margin: auto;
+          text-align: left;
+      }
+
+      div#dragme {
+        border: solid 1px #CCC;
+        display: inline-block;
+        padding: 10px;
+        background: #efefef;
+      }
+
+      [draggable=true] {
+        -khtml-user-drag: element;
+      }
+  </style>
+</head>
+
+<body>
+  <div id="editor">
+    <div id="dragme" draggable="true">
+      Drag &amp; Drop me inside the editor
+    </div>
+    <div id='edit' style="margin-top: 30px;">
+      <h1>Drop Event</h1>
+      <p>Drag &amp; Drop the box above into the editable area to see the <a href="https://www.froala.com/wysiwyg-editor/docs/events#drop" title="Drop Event">drop</a> event being triggered. Don't forget to open the browser console to follow the event.</p>
+    </div>
+  </div>
+
+  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
+  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.3.0/codemirror.min.js"></script>
+  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.3.0/mode/xml/xml.min.js"></script>
+  <script type="text/javascript" src="../../js/froala_editor.min.js"></script>
+  <script type="text/javascript" src="../../js/plugins/align.min.js"></script>
+  <script type="text/javascript" src="../../js/plugins/code_beautifier.min.js"></script>
+  <script type="text/javascript" src="../../js/plugins/code_view.min.js"></script>
+  <script type="text/javascript" src="../../js/plugins/colors.min.js"></script>
+  <script type="text/javascript" src="../../js/plugins/draggable.min.js"></script>
+  <script type="text/javascript" src="../../js/plugins/emoticons.min.js"></script>
+  <script type="text/javascript" src="../../js/plugins/font_size.min.js"></script>
+  <script type="text/javascript" src="../../js/plugins/font_family.min.js"></script>
+  <script type="text/javascript" src="../../js/plugins/line_breaker.min.js"></script>
+  <script type="text/javascript" src="../../js/plugins/link.min.js"></script>
+  <script type="text/javascript" src="../../js/plugins/lists.min.js"></script>
+  <script type="text/javascript" src="../../js/plugins/inline_style.min.js"></script>
+  <script type="text/javascript" src="../../js/plugins/table.min.js"></script>
+  <script type="text/javascript" src="../../js/plugins/video.min.js"></script>
+
+  <script>
+    $(function(){
+      $('#edit').froalaEditor({
+        enter: $.FroalaEditor.ENTER_P
+      })
+      .on ('froalaEditor.drop', function (e, editor, dropEvent) {
+        console.log ('drop')
+
+        // Focus at the current posisiton.
+        editor.markers.insertAtPoint(dropEvent.originalEvent);
+        var $marker = editor.$el.find('.fr-marker');
+        $marker.replaceWith($.FroalaEditor.MARKERS);
+        editor.selection.restore();
+
+        // Insert HTML.
+        editor.html.insert('Element dropped here.')
+
+
+        dropEvent.preventDefault();
+        dropEvent.stopPropagation();
+        return false;
+      })
+
+      // For Firefox to work.
+      $('#dragme').on('dragstart', function (e) {
+        e.originalEvent.dataTransfer.setData('Text', this.id);
+      })
+    });
+  </script>
+</body>
+</html>

+ 76 - 0
modules/boonex/froala/plugins/froala/html/events/image_removed.html

@@ -0,0 +1,76 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0"/>
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css">
+  <link rel="stylesheet" href="../../css/froala_editor.css">
+  <link rel="stylesheet" href="../../css/froala_style.css">
+  <link rel="stylesheet" href="../../css/plugins/code_view.css">
+  <link rel="stylesheet" href="../../css/plugins/colors.css">
+  <link rel="stylesheet" href="../../css/plugins/emoticons.css">
+  <link rel="stylesheet" href="../../css/plugins/image_manager.css">
+  <link rel="stylesheet" href="../../css/plugins/image.css">
+  <link rel="stylesheet" href="../../css/plugins/line_breaker.css">
+  <link rel="stylesheet" href="../../css/plugins/table.css">
+  <link rel="stylesheet" href="../../css/plugins/video.css">
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.3.0/codemirror.min.css">
+
+  <style>
+      body {
+          text-align: center;
+      }
+
+      div#editor {
+          width: 81%;
+          margin: auto;
+          text-align: left;
+      }
+  </style>
+</head>
+
+<body>
+  <div id="editor">
+      <div id='edit' style="margin-top: 30px;">
+        <h1>Image Removed event</h1>
+        <p>In this example you can see how the <a href="https://www.froala.com/wysiwyg-editor/docs/events#image.removed" title="image.removed">image.removed</a> event is fired. Don't forget to open the browser console.</p>
+
+        <img class="fr-fir fr-dii" src="../../img/photo1.jpg" alt="Old Clock" width="300"/>Lorem <strong>ipsum</strong> dolor sit amet, consectetur <strong>adipiscing <em>elit.</em> Donec</strong> facilisis diam in odio iaculis blandit. Nunc eu mauris sit amet purus <strong>viverra</strong><em> gravida</em> ut a dui.<br/>
+                <ul><li>Vivamus nec rutrum augue, pharetra faucibus purus. Maecenas non orci sagittis, vehicula lorem et, dignissim nunc.</li> <li>Suspendisse suscipit, diam non varius facilisis, enim libero tincidunt magna, sit amet iaculis eros libero sit amet eros. Vestibulum a rhoncus felis.<ol><li>Nam lacus nulla, consequat ac lacus sit amet, accumsan pellentesque risus. Aenean viverra mi at urna mattis fermentum.</li> <li>Curabitur porta metus in tortor elementum, in semper nulla ullamcorper. Vestibulum mattis tempor tortor quis gravida. In rhoncus risus nibh. Nullam condimentum dapibus massa vel fringilla. Sed hendrerit sed est quis facilisis. Ut sit amet nibh sem. Pellentesque imperdiet mollis libero.</li></ol></li></ul>
+      </div>
+  </div>
+
+  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
+  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.3.0/codemirror.min.js"></script>
+  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.3.0/mode/xml/xml.min.js"></script>
+  <script type="text/javascript" src="../../js/froala_editor.min.js"></script>
+  <script type="text/javascript" src="../../js/plugins/align.min.js"></script>
+  <script type="text/javascript" src="../../js/plugins/code_beautifier.min.js"></script>
+  <script type="text/javascript" src="../../js/plugins/code_view.min.js"></script>
+  <script type="text/javascript" src="../../js/plugins/colors.min.js"></script>
+  <script type="text/javascript" src="../../js/plugins/draggable.min.js"></script>
+  <script type="text/javascript" src="../../js/plugins/emoticons.min.js"></script>
+  <script type="text/javascript" src="../../js/plugins/font_size.min.js"></script>
+  <script type="text/javascript" src="../../js/plugins/font_family.min.js"></script>
+  <script type="text/javascript" src="../../js/plugins/image.min.js"></script>
+  <script type="text/javascript" src="../../js/plugins/image_manager.min.js"></script>
+  <script type="text/javascript" src="../../js/plugins/line_breaker.min.js"></script>
+  <script type="text/javascript" src="../../js/plugins/link.min.js"></script>
+  <script type="text/javascript" src="../../js/plugins/lists.min.js"></script>
+  <script type="text/javascript" src="../../js/plugins/inline_style.min.js"></script>
+  <script type="text/javascript" src="../../js/plugins/table.min.js"></script>
+  <script type="text/javascript" src="../../js/plugins/video.min.js"></script>
+
+  <script>
+    $(function(){
+      $('#edit').froalaEditor({
+        enter: $.FroalaEditor.ENTER_P
+      })
+      .on ('froalaEditor.image.removed', function (e, editor, $img) {
+        console.log ('image removed', $img);
+        console.log ('image src', $img.attr('src'))
+      })
+    });
+  </script>
+</body>
+</html>

+ 87 - 0
modules/boonex/froala/plugins/froala/html/events/initialized_destroy.html

@@ -0,0 +1,87 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0"/>
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css">
+  <link rel="stylesheet" href="../../css/froala_editor.css">
+  <link rel="stylesheet" href="../../css/froala_style.css">
+  <link rel="stylesheet" href="../../css/plugins/code_view.css">
+  <link rel="stylesheet" href="../../css/plugins/image_manager.css">
+  <link rel="stylesheet" href="../../css/plugins/image.css">
+  <link rel="stylesheet" href="../../css/plugins/table.css">
+  <link rel="stylesheet" href="../../css/plugins/video.css">
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.3.0/codemirror.min.css">
+
+
+  <style>
+    body {
+      text-align: center;
+    }
+
+    div#editor {
+      width: 81%;
+      margin: auto;
+      text-align: left;
+    }
+
+    div#buttons {
+      margin-top: 30px;
+    }
+  </style>
+</head>
+
+<body>
+  <div id="buttons">
+    <button id="init">Init Editor</button>
+    <button id="destroy">Destroy Editor</button>
+  </div>
+
+  <div id="editor">
+    <div id='edit' style="margin-top: 30px;">
+      <h1>Initialized / Destroy Events</h1>
+      <p>This example allows you to see when the <a href="https://www.froala.com/wysiwyg-editor/v2.0/docs/events#initialized" title="Initialized Event" target="_blank">initialized</a> and <a href="https://www.froala.com/wysiwyg-editor/v2.0/docs/events#destroy" title="Destroy Event" target="_blank">destroy</a> events are triggered. Open the browser console to follow the events.</p>
+      <p>You can destroy and initialize the editor again to see the events being triggered.</p>
+    </div>
+  </div>
+
+  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
+  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.3.0/codemirror.min.js"></script>
+  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.3.0/mode/xml/xml.min.js"></script>
+  <script type="text/javascript" src="../../js/froala_editor.min.js"></script>
+  <script type="text/javascript" src="../../js/plugins/align.min.js"></script>
+  <script type="text/javascript" src="../../js/plugins/code_beautifier.min.js"></script>
+  <script type="text/javascript" src="../../js/plugins/code_view.min.js"></script>
+  <script type="text/javascript" src="../../js/plugins/draggable.min.js"></script>
+  <script type="text/javascript" src="../../js/plugins/image.min.js"></script>
+  <script type="text/javascript" src="../../js/plugins/image_manager.min.js"></script>
+  <script type="text/javascript" src="../../js/plugins/link.min.js"></script>
+  <script type="text/javascript" src="../../js/plugins/lists.min.js"></script>
+  <script type="text/javascript" src="../../js/plugins/paragraph_format.min.js"></script>
+  <script type="text/javascript" src="../../js/plugins/paragraph_style.min.js"></script>
+  <script type="text/javascript" src="../../js/plugins/table.min.js"></script>
+  <script type="text/javascript" src="../../js/plugins/video.min.js"></script>
+  <script type="text/javascript" src="../../js/plugins/url.min.js"></script>
+  <script type="text/javascript" src="../../js/plugins/entities.min.js"></script>
+
+  <script>
+      $(function(){
+        $('#init').on('click', function(e) {
+          $('#edit').on('froalaEditor.initialized', function (e, editor) {
+            console.log('Initialized')
+          })
+
+          $('#edit').removeClass('fr-view').froalaEditor();
+        })
+        $('#destroy').on('click', function (e) {
+          $('#edit').on('froalaEditor.destroy', function (e, editor) {
+            console.log('Destroy')
+          })
+
+          $('#edit').froalaEditor('destroy');
+          $('#edit').addClass('fr-view');
+        });
+      });
+  </script>
+</body>
+</html>

+ 182 - 0
modules/boonex/froala/plugins/froala/html/file_s3_upload.php

@@ -0,0 +1,182 @@
+<?php
+  // Set date timezone.
+  date_default_timezone_set('Europe/Bucharest');
+
+  // important variables that will be used throughout this example
+  $bucket = 'froala-dev';
+  $region = 's3';
+  $keyStart = 'editor/';
+  $acl = 'public-read';
+
+  // these can be found on your Account page, under Security Credentials > Access Keys
+  $accessKeyId = $_SERVER['AWS_ACCESS_KEY'];
+  $secret = $_SERVER['AWS_SECRET_ACCESS_KEY'];
+
+  $policy = base64_encode(json_encode(array(
+      // ISO 8601 - date('c'); generates uncompatible date, so better do it manually
+      'expiration' => date('Y-m-d\TH:i:s.000\Z', strtotime('+1 day')),
+      'conditions' => array(
+          array('bucket' => $bucket),
+          array('acl' => $acl),
+          array('success_action_status' => '201'),
+          array('x-requested-with' => 'xhr'),
+          array('starts-with', '$key', $keyStart),
+          array('starts-with', '$Content-Type', '') // accept all files
+      )
+  )));
+
+  $signature = base64_encode(hash_hmac('sha1', $policy, $secret, true));
+?>
+
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0"/>
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css">
+  <link rel="stylesheet" href="../css/froala_editor.css">
+  <link rel="stylesheet" href="../css/froala_style.css">
+  <link rel="stylesheet" href="../css/plugins/code_view.css">
+  <link rel="stylesheet" href="../css/plugins/colors.css">
+  <link rel="stylesheet" href="../css/plugins/emoticons.css">
+  <link rel="stylesheet" href="../css/plugins/image_manager.css">
+  <link rel="stylesheet" href="../css/plugins/image.css">
+  <link rel="stylesheet" href="../css/plugins/line_breaker.css">
+  <link rel="stylesheet" href="../css/plugins/table.css">
+  <link rel="stylesheet" href="../css/plugins/char_counter.css">
+  <link rel="stylesheet" href="../css/plugins/video.css">
+  <link rel="stylesheet" href="../css/plugins/file.css">
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.3.0/codemirror.min.css">
+
+  <style>
+      body {
+          text-align: center;
+      }
+
+      div#editor {
+          width: 81%;
+          margin: auto;
+          text-align: left;
+      }
+  </style>
+</head>
+
+<body>
+  <div id="editor">
+      <div id='edit' style="margin-top: 30px;">
+        <h1>Click and edit</h1>
+
+        <img class="fr-fir fr-dii" src="../img/photo1.jpg" alt="Old Clock" width="300"/>Lorem <strong>ipsum</strong> dolor sit amet, consectetur <strong>adipiscing <em>elit.</em> Donec</strong> facilisis diam in odio iaculis blandit. Nunc eu mauris sit amet purus <strong>viverra</strong><em> gravida</em> ut a dui.<br/>
+        <ul><li>Vivamus nec rutrum augue, pharetra faucibus purus. Maecenas non orci sagittis, vehicula lorem et, dignissim nunc.</li> <li>Suspendisse suscipit, diam non varius facilisis, enim libero tincidunt magna, sit amet iaculis eros libero sit amet eros. Vestibulum a rhoncus felis.<ol><li>Nam lacus nulla, consequat ac lacus sit amet, accumsan pellentesque risus. Aenean viverra mi at urna mattis fermentum.</li> <li>Curabitur porta metus in tortor elementum, in semper nulla ullamcorper. Vestibulum mattis tempor tortor quis gravida. In rhoncus risus nibh. Nullam condimentum dapibus massa vel fringilla. Sed hendrerit sed est quis facilisis. Ut sit amet nibh sem. Pellentesque imperdiet mollis libero.</li></ol></li></ul>
+
+        <table style="width: 100%;">
+          <tr><td>asdasd</td><td>asdasdasd</td></tr>
+        </table>
+
+        Sed dictum dictum tristique. Proin eros turpis, ultricies eu sapien eget, ornare rutrum ipsum. Pellentesque eros nisl, ornare nec ipsum sed, aliquet sollicitudin erat. Nulla tincidunt porta <strong>vehicula.</strong><br/>
+
+        <a href="http://google.com" title="Aenean sed hendrerit">Aenean sed hendrerit</a> velit. Nullam eu mi dolor. Maecenas et erat risus. Nulla ac auctor diam, non aliquet ante. Fusce ullamcorper, ipsum id tempor lacinia, sem tellus malesuada libero, quis ornare sem massa in orci. Sed dictum dictum tristique. Proin eros turpis, ultricies eu sapien eget, ornare rutrum ipsum. Pellentesque eros nisl, ornare nec ipsum sed, aliquet sollicitudin erat. Nulla tincidunt porta <strong>vehicula.</strong><br/>
+
+        <i>Nullam laoreet</i> imperdiet orci ac euismod. Curabitur vel lectus nisi. Phasellus accumsan aliquet augue, eu rutrum tellus iaculis in. Nunc viverra ultrices mollis. Curabitur malesuada nunc massa, ut imperdiet arcu lobortis sed. Cras ac arcu mauris. Maecenas id lectus nisl. Donec consectetur scelerisque quam at ultricies. Nam quis magna iaculis, condimentum metus ut, elementum metus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vivamus id tempus nisi.<br/>
+      </div>
+
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam pretium efficitur lectus, porttitor ornare dolor luctus eu. Vivamus auctor nunc non vestibulum tempor. Integer tristique massa sit amet mi auctor euismod. In finibus nec purus et volutpat. Nullam consectetur est id lorem posuere, quis blandit eros dignissim. Curabitur fringilla iaculis est sed porttitor. Duis in nisi felis.
+
+      Suspendisse ex sem, eleifend vitae felis eu, finibus malesuada odio. Duis eget risus in sem facilisis venenatis eget nec turpis. Aliquam ac sapien dictum, tempor libero sed, feugiat odio. Mauris bibendum nisi justo, eu pulvinar neque tempor ac. Vivamus suscipit in elit interdum euismod. Etiam porta molestie lobortis. Nam consectetur malesuada ante non sagittis. Nunc nec odio ex. Duis non hendrerit diam. Integer vulputate, mi a gravida pretium, ligula libero laoreet libero, in vestibulum arcu velit at velit.
+
+      Suspendisse at neque commodo, sollicitudin lectus sed, blandit sem. Curabitur pharetra suscipit elit ac ultrices. Quisque ullamcorper quis massa et fringilla. Donec euismod, metus id porttitor semper, tortor velit accumsan metus, ut malesuada risus elit eu lorem. Mauris magna odio, efficitur et elit eu, suscipit fermentum sapien. Donec lacinia aliquet augue eu convallis. Suspendisse tincidunt lacus ac ipsum mattis malesuada. Curabitur pellentesque nec nulla ut commodo. Suspendisse pretium nunc in risus iaculis dignissim. Donec faucibus tempus lectus, vel ultrices lectus tincidunt et. Mauris pulvinar ut est in iaculis. Maecenas facilisis enim nec pharetra mattis. Aliquam laoreet egestas lacus, et porta nisl. Ut euismod laoreet purus sed eleifend. Vivamus ullamcorper sodales arcu, sit amet accumsan augue placerat semper. Duis condimentum mattis nulla sed consequat.
+
+      Donec non dui ligula. Aliquam id efficitur massa. Donec tristique aliquet dolor, quis rhoncus felis dignissim sit amet. Duis pellentesque orci eget rhoncus lacinia. Ut dapibus neque id ex fringilla, vitae lobortis turpis interdum. Donec mi lectus, finibus id placerat ut, molestie sit amet erat. Vivamus laoreet semper dui, id efficitur eros. Etiam mollis a nisi a ullamcorper. Vivamus ut porta odio. Maecenas dictum dignissim faucibus. Vestibulum lectus lacus, tempus pulvinar fermentum in, suscipit eget ex. Sed mollis non libero at dignissim. Curabitur non justo vel dui convallis feugiat. Suspendisse quis dictum augue, et pharetra arcu.
+
+      Curabitur sem purus, sagittis quis lorem ac, iaculis laoreet lacus. Fusce eleifend congue massa a ornare. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sodales, tortor ut hendrerit lacinia, velit metus commodo libero, eu consequat est metus sit amet odio. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Pellentesque eu sem vehicula, vulputate est sit amet, mattis nisi. Nullam consequat at turpis vitae pretium. Nulla risus velit, pharetra ac sollicitudin sed, volutpat nec felis.
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam pretium efficitur lectus, porttitor ornare dolor luctus eu. Vivamus auctor nunc non vestibulum tempor. Integer tristique massa sit amet mi auctor euismod. In finibus nec purus et volutpat. Nullam consectetur est id lorem posuere, quis blandit eros dignissim. Curabitur fringilla iaculis est sed porttitor. Duis in nisi felis.
+
+      Suspendisse ex sem, eleifend vitae felis eu, finibus malesuada odio. Duis eget risus in sem facilisis venenatis eget nec turpis. Aliquam ac sapien dictum, tempor libero sed, feugiat odio. Mauris bibendum nisi justo, eu pulvinar neque tempor ac. Vivamus suscipit in elit interdum euismod. Etiam porta molestie lobortis. Nam consectetur malesuada ante non sagittis. Nunc nec odio ex. Duis non hendrerit diam. Integer vulputate, mi a gravida pretium, ligula libero laoreet libero, in vestibulum arcu velit at velit.
+
+      Suspendisse at neque commodo, sollicitudin lectus sed, blandit sem. Curabitur pharetra suscipit elit ac ultrices. Quisque ullamcorper quis massa et fringilla. Donec euismod, metus id porttitor semper, tortor velit accumsan metus, ut malesuada risus elit eu lorem. Mauris magna odio, efficitur et elit eu, suscipit fermentum sapien. Donec lacinia aliquet augue eu convallis. Suspendisse tincidunt lacus ac ipsum mattis malesuada. Curabitur pellentesque nec nulla ut commodo. Suspendisse pretium nunc in risus iaculis dignissim. Donec faucibus tempus lectus, vel ultrices lectus tincidunt et. Mauris pulvinar ut est in iaculis. Maecenas facilisis enim nec pharetra mattis. Aliquam laoreet egestas lacus, et porta nisl. Ut euismod laoreet purus sed eleifend. Vivamus ullamcorper sodales arcu, sit amet accumsan augue placerat semper. Duis condimentum mattis nulla sed consequat.
+
+      Donec non dui ligula. Aliquam id efficitur massa. Donec tristique aliquet dolor, quis rhoncus felis dignissim sit amet. Duis pellentesque orci eget rhoncus lacinia. Ut dapibus neque id ex fringilla, vitae lobortis turpis interdum. Donec mi lectus, finibus id placerat ut, molestie sit amet erat. Vivamus laoreet semper dui, id efficitur eros. Etiam mollis a nisi a ullamcorper. Vivamus ut porta odio. Maecenas dictum dignissim faucibus. Vestibulum lectus lacus, tempus pulvinar fermentum in, suscipit eget ex. Sed mollis non libero at dignissim. Curabitur non justo vel dui convallis feugiat. Suspendisse quis dictum augue, et pharetra arcu.
+
+      Curabitur sem purus, sagittis quis lorem ac, iaculis laoreet lacus. Fusce eleifend congue massa a ornare. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sodales, tortor ut hendrerit lacinia, velit metus commodo libero, eu consequat est metus sit amet odio. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Pellentesque eu sem vehicula, vulputate est sit amet, mattis nisi. Nullam consequat at turpis vitae pretium. Nulla risus velit, pharetra ac sollicitudin sed, volutpat nec felis.
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam pretium efficitur lectus, porttitor ornare dolor luctus eu. Vivamus auctor nunc non vestibulum tempor. Integer tristique massa sit amet mi auctor euismod. In finibus nec purus et volutpat. Nullam consectetur est id lorem posuere, quis blandit eros dignissim. Curabitur fringilla iaculis est sed porttitor. Duis in nisi felis.
+
+      Suspendisse ex sem, eleifend vitae felis eu, finibus malesuada odio. Duis eget risus in sem facilisis venenatis eget nec turpis. Aliquam ac sapien dictum, tempor libero sed, feugiat odio. Mauris bibendum nisi justo, eu pulvinar neque tempor ac. Vivamus suscipit in elit interdum euismod. Etiam porta molestie lobortis. Nam consectetur malesuada ante non sagittis. Nunc nec odio ex. Duis non hendrerit diam. Integer vulputate, mi a gravida pretium, ligula libero laoreet libero, in vestibulum arcu velit at velit.
+
+      Suspendisse at neque commodo, sollicitudin lectus sed, blandit sem. Curabitur pharetra suscipit elit ac ultrices. Quisque ullamcorper quis massa et fringilla. Donec euismod, metus id porttitor semper, tortor velit accumsan metus, ut malesuada risus elit eu lorem. Mauris magna odio, efficitur et elit eu, suscipit fermentum sapien. Donec lacinia aliquet augue eu convallis. Suspendisse tincidunt lacus ac ipsum mattis malesuada. Curabitur pellentesque nec nulla ut commodo. Suspendisse pretium nunc in risus iaculis dignissim. Donec faucibus tempus lectus, vel ultrices lectus tincidunt et. Mauris pulvinar ut est in iaculis. Maecenas facilisis enim nec pharetra mattis. Aliquam laoreet egestas lacus, et porta nisl. Ut euismod laoreet purus sed eleifend. Vivamus ullamcorper sodales arcu, sit amet accumsan augue placerat semper. Duis condimentum mattis nulla sed consequat.
+
+      Donec non dui ligula. Aliquam id efficitur massa. Donec tristique aliquet dolor, quis rhoncus felis dignissim sit amet. Duis pellentesque orci eget rhoncus lacinia. Ut dapibus neque id ex fringilla, vitae lobortis turpis interdum. Donec mi lectus, finibus id placerat ut, molestie sit amet erat. Vivamus laoreet semper dui, id efficitur eros. Etiam mollis a nisi a ullamcorper. Vivamus ut porta odio. Maecenas dictum dignissim faucibus. Vestibulum lectus lacus, tempus pulvinar fermentum in, suscipit eget ex. Sed mollis non libero at dignissim. Curabitur non justo vel dui convallis feugiat. Suspendisse quis dictum augue, et pharetra arcu.
+
+      Curabitur sem purus, sagittis quis lorem ac, iaculis laoreet lacus. Fusce eleifend congue massa a ornare. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sodales, tortor ut hendrerit lacinia, velit metus commodo libero, eu consequat est metus sit amet odio. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Pellentesque eu sem vehicula, vulputate est sit amet, mattis nisi. Nullam consequat at turpis vitae pretium. Nulla risus velit, pharetra ac sollicitudin sed, volutpat nec felis.
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam pretium efficitur lectus, porttitor ornare dolor luctus eu. Vivamus auctor nunc non vestibulum tempor. Integer tristique massa sit amet mi auctor euismod. In finibus nec purus et volutpat. Nullam consectetur est id lorem posuere, quis blandit eros dignissim. Curabitur fringilla iaculis est sed porttitor. Duis in nisi felis.
+
+      Suspendisse ex sem, eleifend vitae felis eu, finibus malesuada odio. Duis eget risus in sem facilisis venenatis eget nec turpis. Aliquam ac sapien dictum, tempor libero sed, feugiat odio. Mauris bibendum nisi justo, eu pulvinar neque tempor ac. Vivamus suscipit in elit interdum euismod. Etiam porta molestie lobortis. Nam consectetur malesuada ante non sagittis. Nunc nec odio ex. Duis non hendrerit diam. Integer vulputate, mi a gravida pretium, ligula libero laoreet libero, in vestibulum arcu velit at velit.
+
+      Suspendisse at neque commodo, sollicitudin lectus sed, blandit sem. Curabitur pharetra suscipit elit ac ultrices. Quisque ullamcorper quis massa et fringilla. Donec euismod, metus id porttitor semper, tortor velit accumsan metus, ut malesuada risus elit eu lorem. Mauris magna odio, efficitur et elit eu, suscipit fermentum sapien. Donec lacinia aliquet augue eu convallis. Suspendisse tincidunt lacus ac ipsum mattis malesuada. Curabitur pellentesque nec nulla ut commodo. Suspendisse pretium nunc in risus iaculis dignissim. Donec faucibus tempus lectus, vel ultrices lectus tincidunt et. Mauris pulvinar ut est in iaculis. Maecenas facilisis enim nec pharetra mattis. Aliquam laoreet egestas lacus, et porta nisl. Ut euismod laoreet purus sed eleifend. Vivamus ullamcorper sodales arcu, sit amet accumsan augue placerat semper. Duis condimentum mattis nulla sed consequat.
+
+      Donec non dui ligula. Aliquam id efficitur massa. Donec tristique aliquet dolor, quis rhoncus felis dignissim sit amet. Duis pellentesque orci eget rhoncus lacinia. Ut dapibus neque id ex fringilla, vitae lobortis turpis interdum. Donec mi lectus, finibus id placerat ut, molestie sit amet erat. Vivamus laoreet semper dui, id efficitur eros. Etiam mollis a nisi a ullamcorper. Vivamus ut porta odio. Maecenas dictum dignissim faucibus. Vestibulum lectus lacus, tempus pulvinar fermentum in, suscipit eget ex. Sed mollis non libero at dignissim. Curabitur non justo vel dui convallis feugiat. Suspendisse quis dictum augue, et pharetra arcu.
+
+      Curabitur sem purus, sagittis quis lorem ac, iaculis laoreet lacus. Fusce eleifend congue massa a ornare. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sodales, tortor ut hendrerit lacinia, velit metus commodo libero, eu consequat est metus sit amet odio. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Pellentesque eu sem vehicula, vulputate est sit amet, mattis nisi. Nullam consequat at turpis vitae pretium. Nulla risus velit, pharetra ac sollicitudin sed, volutpat nec felis.
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam pretium efficitur lectus, porttitor ornare dolor luctus eu. Vivamus auctor nunc non vestibulum tempor. Integer tristique massa sit amet mi auctor euismod. In finibus nec purus et volutpat. Nullam consectetur est id lorem posuere, quis blandit eros dignissim. Curabitur fringilla iaculis est sed porttitor. Duis in nisi felis.
+
+      Suspendisse ex sem, eleifend vitae felis eu, finibus malesuada odio. Duis eget risus in sem facilisis venenatis eget nec turpis. Aliquam ac sapien dictum, tempor libero sed, feugiat odio. Mauris bibendum nisi justo, eu pulvinar neque tempor ac. Vivamus suscipit in elit interdum euismod. Etiam porta molestie lobortis. Nam consectetur malesuada ante non sagittis. Nunc nec odio ex. Duis non hendrerit diam. Integer vulputate, mi a gravida pretium, ligula libero laoreet libero, in vestibulum arcu velit at velit.
+
+      Suspendisse at neque commodo, sollicitudin lectus sed, blandit sem. Curabitur pharetra suscipit elit ac ultrices. Quisque ullamcorper quis massa et fringilla. Donec euismod, metus id porttitor semper, tortor velit accumsan metus, ut malesuada risus elit eu lorem. Mauris magna odio, efficitur et elit eu, suscipit fermentum sapien. Donec lacinia aliquet augue eu convallis. Suspendisse tincidunt lacus ac ipsum mattis malesuada. Curabitur pellentesque nec nulla ut commodo. Suspendisse pretium nunc in risus iaculis dignissim. Donec faucibus tempus lectus, vel ultrices lectus tincidunt et. Mauris pulvinar ut est in iaculis. Maecenas facilisis enim nec pharetra mattis. Aliquam laoreet egestas lacus, et porta nisl. Ut euismod laoreet purus sed eleifend. Vivamus ullamcorper sodales arcu, sit amet accumsan augue placerat semper. Duis condimentum mattis nulla sed consequat.
+
+      Donec non dui ligula. Aliquam id efficitur massa. Donec tristique aliquet dolor, quis rhoncus felis dignissim sit amet. Duis pellentesque orci eget rhoncus lacinia. Ut dapibus neque id ex fringilla, vitae lobortis turpis interdum. Donec mi lectus, finibus id placerat ut, molestie sit amet erat. Vivamus laoreet semper dui, id efficitur eros. Etiam mollis a nisi a ullamcorper. Vivamus ut porta odio. Maecenas dictum dignissim faucibus. Vestibulum lectus lacus, tempus pulvinar fermentum in, suscipit eget ex. Sed mollis non libero at dignissim. Curabitur non justo vel dui convallis feugiat. Suspendisse quis dictum augue, et pharetra arcu.
+
+      Curabitur sem purus, sagittis quis lorem ac, iaculis laoreet lacus. Fusce eleifend congue massa a ornare. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sodales, tortor ut hendrerit lacinia, velit metus commodo libero, eu consequat est metus sit amet odio. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Pellentesque eu sem vehicula, vulputate est sit amet, mattis nisi. Nullam consequat at turpis vitae pretium. Nulla risus velit, pharetra ac sollicitudin sed, volutpat nec felis.
+  </div>
+
+  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
+  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.3.0/codemirror.min.js"></script>
+  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.3.0/mode/xml/xml.min.js"></script>
+  <script type="text/javascript" src="../js/froala_editor.min.js"></script>
+  <script type="text/javascript" src="../js/plugins/align.min.js"></script>
+  <script type="text/javascript" src="../js/plugins/code_beautifier.min.js"></script>
+  <script type="text/javascript" src="../js/plugins/code_view.min.js"></script>
+  <script type="text/javascript" src="../js/plugins/colors.min.js"></script>
+  <script type="text/javascript" src="../js/plugins/draggable.min.js"></script>
+  <script type="text/javascript" src="../js/plugins/emoticons.min.js"></script>
+  <script type="text/javascript" src="../js/plugins/font_size.min.js"></script>
+  <script type="text/javascript" src="../js/plugins/font_family.min.js"></script>
+  <script type="text/javascript" src="../js/plugins/image.min.js"></script>
+  <script type="text/javascript" src="../js/plugins/image_manager.min.js"></script>
+  <script type="text/javascript" src="../js/plugins/line_breaker.min.js"></script>
+  <script type="text/javascript" src="../js/plugins/link.min.js"></script>
+  <script type="text/javascript" src="../js/plugins/lists.min.js"></script>
+  <script type="text/javascript" src="../js/plugins/paragraph_format.min.js"></script>
+  <script type="text/javascript" src="../js/plugins/paragraph_style.min.js"></script>
+  <script type="text/javascript" src="../js/plugins/video.min.js"></script>
+  <script type="text/javascript" src="../js/plugins/table.min.js"></script>
+  <script type="text/javascript" src="../js/plugins/url.min.js"></script>
+  <script type="text/javascript" src="../js/plugins/entities.min.js"></script>
+  <script type="text/javascript" src="../js/plugins/char_counter.min.js"></script>
+  <script type="text/javascript" src="../js/plugins/inline_style.min.js"></script>
+  <script type="text/javascript" src="../js/plugins/save.min.js"></script>
+  <script type="text/javascript" src="../js/plugins/file.min.js"></script>
+  <script type="text/javascript" src="../js/languages/ro.js"></script>
+
+  <script>
+    $(function(){
+      $('#edit').froalaEditor({
+        enter: $.FroalaEditor.ENTER_P,
+        fileUploadToS3: {
+          bucket: '<?php echo $bucket; ?>',
+          region: '<?php echo $region; ?>',
+          keyStart: '<?php echo $keyStart; ?>',
+          params: {
+            acl: '<?php echo $acl; ?>',
+            AWSAccessKeyId: '<?php echo $accessKeyId; ?>',
+            policy: '<?php echo $policy; ?>',
+            signature: '<?php echo $signature; ?>',
+          }
+        }
+      })
+      .on('froala.file.uploadedToS3', function (e, editor, link, key, response) {
+        console.log ('S3 Link:', link);
+        console.log ('S3 Key:', key);
+      })
+    });
+  </script>
+</body>
+</html>

+ 102 - 0
modules/boonex/froala/plugins/froala/html/image/custom_button.html

@@ -0,0 +1,102 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0"/>
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css">
+  <link rel="stylesheet" href="../../css/froala_editor.css">
+  <link rel="stylesheet" href="../../css/froala_style.css">
+  <link rel="stylesheet" href="../../css/plugins/code_view.css">
+  <link rel="stylesheet" href="../../css/plugins/colors.css">
+  <link rel="stylesheet" href="../../css/plugins/emoticons.css">
+  <link rel="stylesheet" href="../../css/plugins/image_manager.css">
+  <link rel="stylesheet" href="../../css/plugins/image.css">
+  <link rel="stylesheet" href="../../css/plugins/line_breaker.css">
+  <link rel="stylesheet" href="../../css/plugins/table.css">
+  <link rel="stylesheet" href="../../css/plugins/char_counter.css">
+  <link rel="stylesheet" href="../../css/plugins/video.css">
+  <link rel="stylesheet" href="../../css/plugins/fullscreen.css">
+  <link rel="stylesheet" href="../../css/plugins/file.css">
+  <link rel="stylesheet" href="../../css/plugins/quick_insert.css">
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.3.0/codemirror.min.css">
+
+  <style>
+      body {
+          text-align: center;
+      }
+
+      div#editor {
+          width: 81%;
+          margin: auto;
+          text-align: left;
+      }
+  </style>
+</head>
+
+<body>
+  <div id="editor">
+    <div id='edit' style="margin-top: 30px;">
+      <img class="fr-fir fr-dii" src="../../img/photo1.jpg" alt="Old Clock" width="200"/>
+      <h1>Custom Image Button</h1>
+
+      <p>Click on the image to see the custom image button.</p>
+
+      <p>An example of custom button for the image editing popup. More details about defining a custom image button can be found in the <a href="https://www.froala.com/wysiwyg-editor/docs/concepts/custom/button" title="Custom Button Concept" target="_blank">Custom Button</a> concept.</p>
+
+      <p>After defining custom buttons you need to add them to the image popup buttons list, using the <a href="https://www.froala.com/wysiwyg-editor/docs/options#imageEditButtons" title="imageEditButtons" target="_blank">imageEditButtons</a> option.</p>
+    </div>
+  </div>
+
+  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
+  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.3.0/codemirror.min.js"></script>
+  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.3.0/mode/xml/xml.min.js"></script>
+
+  <script type="text/javascript" src="../../js/froala_editor.min.js" ></script>
+  <script type="text/javascript" src="../../js/plugins/align.min.js"></script>
+  <script type="text/javascript" src="../../js/plugins/char_counter.min.js"></script>
+  <script type="text/javascript" src="../../js/plugins/code_beautifier.min.js"></script>
+  <script type="text/javascript" src="../../js/plugins/code_view.min.js"></script>
+  <script type="text/javascript" src="../../js/plugins/colors.min.js"></script>
+  <script type="text/javascript" src="../../js/plugins/draggable.min.js"></script>
+  <script type="text/javascript" src="../../js/plugins/emoticons.min.js"></script>
+  <script type="text/javascript" src="../../js/plugins/entities.min.js"></script>
+  <script type="text/javascript" src="../../js/plugins/file.min.js"></script>
+  <script type="text/javascript" src="../../js/plugins/font_size.min.js"></script>
+  <script type="text/javascript" src="../../js/plugins/font_family.min.js"></script>
+  <script type="text/javascript" src="../../js/plugins/fullscreen.min.js"></script>
+  <script type="text/javascript" src="../../js/plugins/image.min.js"></script>
+  <script type="text/javascript" src="../../js/plugins/image_manager.min.js"></script>
+  <script type="text/javascript" src="../../js/plugins/line_breaker.min.js"></script>
+  <script type="text/javascript" src="../../js/plugins/inline_style.min.js"></script>
+  <script type="text/javascript" src="../../js/plugins/link.min.js"></script>
+  <script type="text/javascript" src="../../js/plugins/lists.min.js"></script>
+  <script type="text/javascript" src="../../js/plugins/paragraph_format.min.js"></script>
+  <script type="text/javascript" src="../../js/plugins/paragraph_style.min.js"></script>
+  <script type="text/javascript" src="../../js/plugins/quick_insert.min.js"></script>
+  <script type="text/javascript" src="../../js/plugins/quote.min.js"></script>
+  <script type="text/javascript" src="../../js/plugins/table.min.js"></script>
+  <script type="text/javascript" src="../../js/plugins/save.min.js"></script>
+  <script type="text/javascript" src="../../js/plugins/url.min.js"></script>
+  <script type="text/javascript" src="../../js/plugins/video.min.js"></script>
+
+  <script>
+    $(function(){
+      $.FroalaEditor.DefineIcon('imageInfo', {NAME: 'info'});
+      $.FroalaEditor.RegisterCommand('imageInfo', {
+        title: 'Info',
+        focus: false,
+        undo: false,
+        refreshAfterCallback: false,
+        callback: function () {
+          var $img = this.image.get();
+          alert($img.attr('src'));
+        }
+      });
+
+      $('#edit').froalaEditor({
+        imageEditButtons: ['imageDisplay', 'imageAlign', 'imageInfo', 'imageRemove']
+      })
+    });
+  </script>
+</body>
+</html>

+ 96 - 0
modules/boonex/froala/plugins/froala/html/image/default_width.html

@@ -0,0 +1,96 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0"/>
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css">
+  <link rel="stylesheet" href="../../css/froala_editor.css">
+  <link rel="stylesheet" href="../../css/froala_style.css">
+  <link rel="stylesheet" href="../../css/plugins/code_view.css">
+  <link rel="stylesheet" href="../../css/plugins/colors.css">
+  <link rel="stylesheet" href="../../css/plugins/emoticons.css">
+  <link rel="stylesheet" href="../../css/plugins/image_manager.css">
+  <link rel="stylesheet" href="../../css/plugins/image.css">
+  <link rel="stylesheet" href="../../css/plugins/line_breaker.css">
+  <link rel="stylesheet" href="../../css/plugins/table.css">
+  <link rel="stylesheet" href="../../css/plugins/char_counter.css">
+  <link rel="stylesheet" href="../../css/plugins/video.css">
+  <link rel="stylesheet" href="../../css/plugins/fullscreen.css">
+  <link rel="stylesheet" href="../../css/plugins/file.css">
+  <link rel="stylesheet" href="../../css/plugins/quick_insert.css">
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.3.0/codemirror.min.css">
+
+  <style>
+      body {
+          text-align: center;
+      }
+
+      div#editor {
+          width: 81%;
+          margin: auto;
+          text-align: left;
+      }
+
+      .class1 {
+        border-radius: 10%;
+        border: 2px solid #efefef;
+      }
+
+      .class2 {
+        opacity: 0.5;
+      }
+  </style>
+</head>
+
+<body>
+  <div id="editor">
+    <div id='edit' style="margin-top: 30px;">
+      <h1>Default Width</h1>
+
+      <p>Images inserted in the editor have a default width of 300px. This can be changed using the <a href="https://www.froala.com/wysiwyg-editor/docs/options#imageDefaultWidth" title="Image Default Width option">imageDefaultWidth</a> option.</p>
+
+      <p>Setting this option to 0 will not set any width to the inserted image.</p>
+    </div>
+  </div>
+
+  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
+  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.3.0/codemirror.min.js"></script>
+  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.3.0/mode/xml/xml.min.js"></script>
+
+  <script type="text/javascript" src="../../js/froala_editor.min.js" ></script>
+  <script type="text/javascript" src="../../js/plugins/align.min.js"></script>
+  <script type="text/javascript" src="../../js/plugins/char_counter.min.js"></script>
+  <script type="text/javascript" src="../../js/plugins/code_beautifier.min.js"></script>
+  <script type="text/javascript" src="../../js/plugins/code_view.min.js"></script>
+  <script type="text/javascript" src="../../js/plugins/colors.min.js"></script>
+  <script type="text/javascript" src="../../js/plugins/draggable.min.js"></script>
+  <script type="text/javascript" src="../../js/plugins/emoticons.min.js"></script>
+  <script type="text/javascript" src="../../js/plugins/entities.min.js"></script>
+  <script type="text/javascript" src="../../js/plugins/file.min.js"></script>
+  <script type="text/javascript" src="../../js/plugins/font_size.min.js"></script>
+  <script type="text/javascript" src="../../js/plugins/font_family.min.js"></script>
+  <script type="text/javascript" src="../../js/plugins/fullscreen.min.js"></script>
+  <script type="text/javascript" src="../../js/plugins/image.min.js"></script>
+  <script type="text/javascript" src="../../js/plugins/image_manager.min.js"></script>
+  <script type="text/javascript" src="../../js/plugins/line_breaker.min.js"></script>
+  <script type="text/javascript" src="../../js/plugins/inline_style.min.js"></script>
+  <script type="text/javascript" src="../../js/plugins/link.min.js"></script>
+  <script type="text/javascript" src="../../js/plugins/lists.min.js"></script>
+  <script type="text/javascript" src="../../js/plugins/paragraph_format.min.js"></script>
+  <script type="text/javascript" src="../../js/plugins/paragraph_style.min.js"></script>
+  <script type="text/javascript" src="../../js/plugins/quick_insert.min.js"></script>
+  <script type="text/javascript" src="../../js/plugins/quote.min.js"></script>
+  <script type="text/javascript" src="../../js/plugins/table.min.js"></script>
+  <script type="text/javascript" src="../../js/plugins/save.min.js"></script>
+  <script type="text/javascript" src="../../js/plugins/url.min.js"></script>
+  <script type="text/javascript" src="../../js/plugins/video.min.js"></script>
+
+  <script>
+    $(function(){
+      $('#edit').froalaEditor({
+        imageDefaultWidth: 0
+      })
+    });
+  </script>
+</body>
+</html>

+ 103 - 0
modules/boonex/froala/plugins/froala/html/image/image_styles.html

@@ -0,0 +1,103 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0"/>
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css">
+  <link rel="stylesheet" href="../../css/froala_editor.css">
+  <link rel="stylesheet" href="../../css/froala_style.css">
+  <link rel="stylesheet" href="../../css/plugins/code_view.css">
+  <link rel="stylesheet" href="../../css/plugins/colors.css">
+  <link rel="stylesheet" href="../../css/plugins/emoticons.css">
+  <link rel="stylesheet" href="../../css/plugins/image_manager.css">
+  <link rel="stylesheet" href="../../css/plugins/image.css">
+  <link rel="stylesheet" href="../../css/plugins/line_breaker.css">
+  <link rel="stylesheet" href="../../css/plugins/table.css">
+  <link rel="stylesheet" href="../../css/plugins/char_counter.css">
+  <link rel="stylesheet" href="../../css/plugins/video.css">
+  <link rel="stylesheet" href="../../css/plugins/fullscreen.css">
+  <link rel="stylesheet" href="../../css/plugins/file.css">
+  <link rel="stylesheet" href="../../css/plugins/quick_insert.css">
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.3.0/codemirror.min.css">
+
+  <style>
+      body {
+          text-align: center;
+      }
+
+      div#editor {
+          width: 81%;
+          margin: auto;
+          text-align: left;
+      }
+
+      .class1 {
+        border-radius: 10%;
+        border: 2px solid #efefef;
+      }
+
+      .class2 {
+        opacity: 0.5;
+      }
+  </style>
+</head>
+
+<body>
+  <div id="editor">
+    <div id='edit' style="margin-top: 30px;">
+      <h1>Image Styles</h1>
+
+      <p>The classes should be defined in CSS, otherwise no changes will be visible on the image&#39;s appearance.</p>
+
+      <img class="fr-fil fr-dii" src="../../img/photo1.jpg" alt="Old Clock" width="200"/>
+
+      <p>You can define your own image styles using the <code><a href="https://www.froala.com/wysiwyg-editor/docs/options#imageStyles" title="imageStyles" target="_blank">imageStyles</a></code> option. This option is an Object where the key represents the class name and its value is the style name that appears in the dropdown list. It is important to have unique keys otherwise they will not work properly.</p>
+      <p>By default you can select multiple image styles at a time. If you want to toggle them and allow only one style to be selected at a time use the <code><a href="https://www.froala.com/wysiwyg-editor/docs/options#imageMultipleStyles" title="imageMultipleStyles" target="_blank">imageMultipleStyles</a></code> option.</p>
+    </div>
+  </div>
+
+  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
+  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.3.0/codemirror.min.js"></script>
+  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.3.0/mode/xml/xml.min.js"></script>
+
+  <script type="text/javascript" src="../../js/froala_editor.min.js" ></script>
+  <script type="text/javascript" src="../../js/plugins/align.min.js"></script>
+  <script type="text/javascript" src="../../js/plugins/char_counter.min.js"></script>
+  <script type="text/javascript" src="../../js/plugins/code_beautifier.min.js"></script>
+  <script type="text/javascript" src="../../js/plugins/code_view.min.js"></script>
+  <script type="text/javascript" src="../../js/plugins/colors.min.js"></script>
+  <script type="text/javascript" src="../../js/plugins/draggable.min.js"></script>
+  <script type="text/javascript" src="../../js/plugins/emoticons.min.js"></script>
+  <script type="text/javascript" src="../../js/plugins/entities.min.js"></script>
+  <script type="text/javascript" src="../../js/plugins/file.min.js"></script>
+  <script type="text/javascript" src="../../js/plugins/font_size.min.js"></script>
+  <script type="text/javascript" src="../../js/plugins/font_family.min.js"></script>
+  <script type="text/javascript" src="../../js/plugins/fullscreen.min.js"></script>
+  <script type="text/javascript" src="../../js/plugins/image.min.js"></script>
+  <script type="text/javascript" src="../../js/plugins/image_manager.min.js"></script>
+  <script type="text/javascript" src="../../js/plugins/line_breaker.min.js"></script>
+  <script type="text/javascript" src="../../js/plugins/inline_style.min.js"></script>
+  <script type="text/javascript" src="../../js/plugins/link.min.js"></script>
+  <script type="text/javascript" src="../../js/plugins/lists.min.js"></script>
+  <script type="text/javascript" src="../../js/plugins/paragraph_format.min.js"></script>
+  <script type="text/javascript" src="../../js/plugins/paragraph_style.min.js"></script>
+  <script type="text/javascript" src="../../js/plugins/quick_insert.min.js"></script>
+  <script type="text/javascript" src="../../js/plugins/quote.min.js"></script>
+  <script type="text/javascript" src="../../js/plugins/table.min.js"></script>
+  <script type="text/javascript" src="../../js/plugins/save.min.js"></script>
+  <script type="text/javascript" src="../../js/plugins/url.min.js"></script>
+  <script type="text/javascript" src="../../js/plugins/video.min.js"></script>
+
+  <script>
+    $(function(){
+      $('#edit').froalaEditor({
+        // Define new image styles.
+        imageStyles: {
+          class1: 'Class 1',
+          class2: 'Class 2'
+        }
+      })
+    });
+  </script>
+</body>
+</html>

+ 106 - 0
modules/boonex/froala/plugins/froala/html/image/insert_base64.html

@@ -0,0 +1,106 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0"/>
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css">
+  <link rel="stylesheet" href="../../css/froala_editor.css">
+  <link rel="stylesheet" href="../../css/froala_style.css">
+  <link rel="stylesheet" href="../../css/plugins/code_view.css">
+  <link rel="stylesheet" href="../../css/plugins/colors.css">
+  <link rel="stylesheet" href="../../css/plugins/emoticons.css">
+  <link rel="stylesheet" href="../../css/plugins/image_manager.css">
+  <link rel="stylesheet" href="../../css/plugins/image.css">
+  <link rel="stylesheet" href="../../css/plugins/line_breaker.css">
+  <link rel="stylesheet" href="../../css/plugins/table.css">
+  <link rel="stylesheet" href="../../css/plugins/char_counter.css">
+  <link rel="stylesheet" href="../../css/plugins/video.css">
+  <link rel="stylesheet" href="../../css/plugins/fullscreen.css">
+  <link rel="stylesheet" href="../../css/plugins/file.css">
+  <link rel="stylesheet" href="../../css/plugins/quick_insert.css">
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.3.0/codemirror.min.css">
+
+  <style>
+      body {
+          text-align: center;
+      }
+
+      div#editor {
+          width: 81%;
+          margin: auto;
+          text-align: left;
+      }
+
+      .class1 {
+        border-radius: 10%;
+        border: 2px solid #efefef;
+      }
+
+      .class2 {
+        opacity: 0.5;
+      }
+  </style>
+</head>
+
+<body>
+  <div id="editor">
+    <div id='edit' style="margin-top: 30px;">
+      <h1>Insert as Base64</h1>
+
+      <p>Using the <code>image.beforeUpload</code> event, the images can be inserted as base64 instead of being uploaded to the server.</p>
+    </div>
+  </div>
+
+  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
+  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.3.0/codemirror.min.js"></script>
+  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.3.0/mode/xml/xml.min.js"></script>
+
+  <script type="text/javascript" src="../../js/froala_editor.min.js" ></script>
+  <script type="text/javascript" src="../../js/plugins/align.min.js"></script>
+  <script type="text/javascript" src="../../js/plugins/char_counter.min.js"></script>
+  <script type="text/javascript" src="../../js/plugins/code_beautifier.min.js"></script>
+  <script type="text/javascript" src="../../js/plugins/code_view.min.js"></script>
+  <script type="text/javascript" src="../../js/plugins/colors.min.js"></script>
+  <script type="text/javascript" src="../../js/plugins/draggable.min.js"></script>
+  <script type="text/javascript" src="../../js/plugins/emoticons.min.js"></script>
+  <script type="text/javascript" src="../../js/plugins/entities.min.js"></script>
+  <script type="text/javascript" src="../../js/plugins/file.min.js"></script>
+  <script type="text/javascript" src="../../js/plugins/font_size.min.js"></script>
+  <script type="text/javascript" src="../../js/plugins/font_family.min.js"></script>
+  <script type="text/javascript" src="../../js/plugins/fullscreen.min.js"></script>
+  <script type="text/javascript" src="../../js/plugins/image.min.js"></script>
+  <script type="text/javascript" src="../../js/plugins/image_manager.min.js"></script>
+  <script type="text/javascript" src="../../js/plugins/line_breaker.min.js"></script>
+  <script type="text/javascript" src="../../js/plugins/inline_style.min.js"></script>
+  <script type="text/javascript" src="../../js/plugins/link.min.js"></script>
+  <script type="text/javascript" src="../../js/plugins/lists.min.js"></script>
+  <script type="text/javascript" src="../../js/plugins/paragraph_format.min.js"></script>
+  <script type="text/javascript" src="../../js/plugins/paragraph_style.min.js"></script>
+  <script type="text/javascript" src="../../js/plugins/quick_insert.min.js"></script>
+  <script type="text/javascript" src="../../js/plugins/quote.min.js"></script>
+  <script type="text/javascript" src="../../js/plugins/table.min.js"></script>
+  <script type="text/javascript" src="../../js/plugins/save.min.js"></script>
+  <script type="text/javascript" src="../../js/plugins/url.min.js"></script>
+  <script type="text/javascript" src="../../js/plugins/video.min.js"></script>
+
+  <script>
+    $(function(){
+      $('#edit').froalaEditor()
+        .on('froalaEditor.image.beforeUpload', function (e, editor, files) {
+          if (files.length) {
+            var reader = new FileReader();
+            reader.onload = function (e) {
+              var result = e.target.result;
+
+              editor.image.insert(result, null, null, editor.image.get());
+            };
+
+            reader.readAsDataURL(files[0]);
+          }
+
+          return false;
+        })
+    });
+  </script>
+</body>
+</html>

+ 180 - 0
modules/boonex/froala/plugins/froala/html/image_s3_upload.php

@@ -0,0 +1,180 @@
+<?php
+  // Set date timezone.
+  date_default_timezone_set('Europe/Bucharest');
+
+  // important variables that will be used throughout this example
+  $bucket = 'froala-dev';
+  $region = 's3';
+  $keyStart = 'editor/';
+  $acl = 'public-read';
+
+  // these can be found on your Account page, under Security Credentials > Access Keys
+  $accessKeyId = $_SERVER['AWS_ACCESS_KEY'];
+  $secret = $_SERVER['AWS_SECRET_ACCESS_KEY'];
+
+  $policy = base64_encode(json_encode(array(
+      // ISO 8601 - date('c'); generates uncompatible date, so better do it manually
+      'expiration' => date('Y-m-d\TH:i:s.000\Z', strtotime('+1 day')),
+      'conditions' => array(
+          array('bucket' => $bucket),
+          array('acl' => $acl),
+          array('success_action_status' => '201'),
+          array('x-requested-with' => 'xhr'),
+          array('starts-with', '$key', $keyStart),
+          array('starts-with', '$Content-Type', '') // accept all files
+      )
+  )));
+
+  $signature = base64_encode(hash_hmac('sha1', $policy, $secret, true));
+?>
+
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0"/>
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css">
+  <link rel="stylesheet" href="../css/froala_editor.css">
+  <link rel="stylesheet" href="../css/froala_style.css">
+  <link rel="stylesheet" href="../css/plugins/code_view.css">
+  <link rel="stylesheet" href="../css/plugins/colors.css">
+  <link rel="stylesheet" href="../css/plugins/emoticons.css">
+  <link rel="stylesheet" href="../css/plugins/image_manager.css">
+  <link rel="stylesheet" href="../css/plugins/image.css">
+  <link rel="stylesheet" href="../css/plugins/line_breaker.css">
+  <link rel="stylesheet" href="../css/plugins/table.css">
+  <link rel="stylesheet" href="../css/plugins/char_counter.css">
+  <link rel="stylesheet" href="../css/plugins/video.css">
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.3.0/codemirror.min.css">
+
+  <style>
+      body {
+          text-align: center;
+      }
+
+      div#editor {
+          width: 81%;
+          margin: auto;
+          text-align: left;
+      }
+  </style>
+</head>
+
+<body>
+  <div id="editor">
+      <div id='edit' style="margin-top: 30px;">
+        <h1>Click and edit</h1>
+
+        <img class="fr-fir fr-dii" src="../img/photo1.jpg" alt="Old Clock" width="300"/>Lorem <strong>ipsum</strong> dolor sit amet, consectetur <strong>adipiscing <em>elit.</em> Donec</strong> facilisis diam in odio iaculis blandit. Nunc eu mauris sit amet purus <strong>viverra</strong><em> gravida</em> ut a dui.<br/>
+        <ul><li>Vivamus nec rutrum augue, pharetra faucibus purus. Maecenas non orci sagittis, vehicula lorem et, dignissim nunc.</li> <li>Suspendisse suscipit, diam non varius facilisis, enim libero tincidunt magna, sit amet iaculis eros libero sit amet eros. Vestibulum a rhoncus felis.<ol><li>Nam lacus nulla, consequat ac lacus sit amet, accumsan pellentesque risus. Aenean viverra mi at urna mattis fermentum.</li> <li>Curabitur porta metus in tortor elementum, in semper nulla ullamcorper. Vestibulum mattis tempor tortor quis gravida. In rhoncus risus nibh. Nullam condimentum dapibus massa vel fringilla. Sed hendrerit sed est quis facilisis. Ut sit amet nibh sem. Pellentesque imperdiet mollis libero.</li></ol></li></ul>
+
+        <table style="width: 100%;">
+          <tr><td>asdasd</td><td>asdasdasd</td></tr>
+        </table>
+
+        Sed dictum dictum tristique. Proin eros turpis, ultricies eu sapien eget, ornare rutrum ipsum. Pellentesque eros nisl, ornare nec ipsum sed, aliquet sollicitudin erat. Nulla tincidunt porta <strong>vehicula.</strong><br/>
+
+        <a href="http://google.com" title="Aenean sed hendrerit">Aenean sed hendrerit</a> velit. Nullam eu mi dolor. Maecenas et erat risus. Nulla ac auctor diam, non aliquet ante. Fusce ullamcorper, ipsum id tempor lacinia, sem tellus malesuada libero, quis ornare sem massa in orci. Sed dictum dictum tristique. Proin eros turpis, ultricies eu sapien eget, ornare rutrum ipsum. Pellentesque eros nisl, ornare nec ipsum sed, aliquet sollicitudin erat. Nulla tincidunt porta <strong>vehicula.</strong><br/>
+
+        <i>Nullam laoreet</i> imperdiet orci ac euismod. Curabitur vel lectus nisi. Phasellus accumsan aliquet augue, eu rutrum tellus iaculis in. Nunc viverra ultrices mollis. Curabitur malesuada nunc massa, ut imperdiet arcu lobortis sed. Cras ac arcu mauris. Maecenas id lectus nisl. Donec consectetur scelerisque quam at ultricies. Nam quis magna iaculis, condimentum metus ut, elementum metus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vivamus id tempus nisi.<br/>
+      </div>
+
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam pretium efficitur lectus, porttitor ornare dolor luctus eu. Vivamus auctor nunc non vestibulum tempor. Integer tristique massa sit amet mi auctor euismod. In finibus nec purus et volutpat. Nullam consectetur est id lorem posuere, quis blandit eros dignissim. Curabitur fringilla iaculis est sed porttitor. Duis in nisi felis.
+
+      Suspendisse ex sem, eleifend vitae felis eu, finibus malesuada odio. Duis eget risus in sem facilisis venenatis eget nec turpis. Aliquam ac sapien dictum, tempor libero sed, feugiat odio. Mauris bibendum nisi justo, eu pulvinar neque tempor ac. Vivamus suscipit in elit interdum euismod. Etiam porta molestie lobortis. Nam consectetur malesuada ante non sagittis. Nunc nec odio ex. Duis non hendrerit diam. Integer vulputate, mi a gravida pretium, ligula libero laoreet libero, in vestibulum arcu velit at velit.
+
+      Suspendisse at neque commodo, sollicitudin lectus sed, blandit sem. Curabitur pharetra suscipit elit ac ultrices. Quisque ullamcorper quis massa et fringilla. Donec euismod, metus id porttitor semper, tortor velit accumsan metus, ut malesuada risus elit eu lorem. Mauris magna odio, efficitur et elit eu, suscipit fermentum sapien. Donec lacinia aliquet augue eu convallis. Suspendisse tincidunt lacus ac ipsum mattis malesuada. Curabitur pellentesque nec nulla ut commodo. Suspendisse pretium nunc in risus iaculis dignissim. Donec faucibus tempus lectus, vel ultrices lectus tincidunt et. Mauris pulvinar ut est in iaculis. Maecenas facilisis enim nec pharetra mattis. Aliquam laoreet egestas lacus, et porta nisl. Ut euismod laoreet purus sed eleifend. Vivamus ullamcorper sodales arcu, sit amet accumsan augue placerat semper. Duis condimentum mattis nulla sed consequat.
+
+      Donec non dui ligula. Aliquam id efficitur massa. Donec tristique aliquet dolor, quis rhoncus felis dignissim sit amet. Duis pellentesque orci eget rhoncus lacinia. Ut dapibus neque id ex fringilla, vitae lobortis turpis interdum. Donec mi lectus, finibus id placerat ut, molestie sit amet erat. Vivamus laoreet semper dui, id efficitur eros. Etiam mollis a nisi a ullamcorper. Vivamus ut porta odio. Maecenas dictum dignissim faucibus. Vestibulum lectus lacus, tempus pulvinar fermentum in, suscipit eget ex. Sed mollis non libero at dignissim. Curabitur non justo vel dui convallis feugiat. Suspendisse quis dictum augue, et pharetra arcu.
+
+      Curabitur sem purus, sagittis quis lorem ac, iaculis laoreet lacus. Fusce eleifend congue massa a ornare. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sodales, tortor ut hendrerit lacinia, velit metus commodo libero, eu consequat est metus sit amet odio. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Pellentesque eu sem vehicula, vulputate est sit amet, mattis nisi. Nullam consequat at turpis vitae pretium. Nulla risus velit, pharetra ac sollicitudin sed, volutpat nec felis.
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam pretium efficitur lectus, porttitor ornare dolor luctus eu. Vivamus auctor nunc non vestibulum tempor. Integer tristique massa sit amet mi auctor euismod. In finibus nec purus et volutpat. Nullam consectetur est id lorem posuere, quis blandit eros dignissim. Curabitur fringilla iaculis est sed porttitor. Duis in nisi felis.
+
+      Suspendisse ex sem, eleifend vitae felis eu, finibus malesuada odio. Duis eget risus in sem facilisis venenatis eget nec turpis. Aliquam ac sapien dictum, tempor libero sed, feugiat odio. Mauris bibendum nisi justo, eu pulvinar neque tempor ac. Vivamus suscipit in elit interdum euismod. Etiam porta molestie lobortis. Nam consectetur malesuada ante non sagittis. Nunc nec odio ex. Duis non hendrerit diam. Integer vulputate, mi a gravida pretium, ligula libero laoreet libero, in vestibulum arcu velit at velit.
+
+      Suspendisse at neque commodo, sollicitudin lectus sed, blandit sem. Curabitur pharetra suscipit elit ac ultrices. Quisque ullamcorper quis massa et fringilla. Donec euismod, metus id porttitor semper, tortor velit accumsan metus, ut malesuada risus elit eu lorem. Mauris magna odio, efficitur et elit eu, suscipit fermentum sapien. Donec lacinia aliquet augue eu convallis. Suspendisse tincidunt lacus ac ipsum mattis malesuada. Curabitur pellentesque nec nulla ut commodo. Suspendisse pretium nunc in risus iaculis dignissim. Donec faucibus tempus lectus, vel ultrices lectus tincidunt et. Mauris pulvinar ut est in iaculis. Maecenas facilisis enim nec pharetra mattis. Aliquam laoreet egestas lacus, et porta nisl. Ut euismod laoreet purus sed eleifend. Vivamus ullamcorper sodales arcu, sit amet accumsan augue placerat semper. Duis condimentum mattis nulla sed consequat.
+
+      Donec non dui ligula. Aliquam id efficitur massa. Donec tristique aliquet dolor, quis rhoncus felis dignissim sit amet. Duis pellentesque orci eget rhoncus lacinia. Ut dapibus neque id ex fringilla, vitae lobortis turpis interdum. Donec mi lectus, finibus id placerat ut, molestie sit amet erat. Vivamus laoreet semper dui, id efficitur eros. Etiam mollis a nisi a ullamcorper. Vivamus ut porta odio. Maecenas dictum dignissim faucibus. Vestibulum lectus lacus, tempus pulvinar fermentum in, suscipit eget ex. Sed mollis non libero at dignissim. Curabitur non justo vel dui convallis feugiat. Suspendisse quis dictum augue, et pharetra arcu.
+
+      Curabitur sem purus, sagittis quis lorem ac, iaculis laoreet lacus. Fusce eleifend congue massa a ornare. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sodales, tortor ut hendrerit lacinia, velit metus commodo libero, eu consequat est metus sit amet odio. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Pellentesque eu sem vehicula, vulputate est sit amet, mattis nisi. Nullam consequat at turpis vitae pretium. Nulla risus velit, pharetra ac sollicitudin sed, volutpat nec felis.
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam pretium efficitur lectus, porttitor ornare dolor luctus eu. Vivamus auctor nunc non vestibulum tempor. Integer tristique massa sit amet mi auctor euismod. In finibus nec purus et volutpat. Nullam consectetur est id lorem posuere, quis blandit eros dignissim. Curabitur fringilla iaculis est sed porttitor. Duis in nisi felis.
+
+      Suspendisse ex sem, eleifend vitae felis eu, finibus malesuada odio. Duis eget risus in sem facilisis venenatis eget nec turpis. Aliquam ac sapien dictum, tempor libero sed, feugiat odio. Mauris bibendum nisi justo, eu pulvinar neque tempor ac. Vivamus suscipit in elit interdum euismod. Etiam porta molestie lobortis. Nam consectetur malesuada ante non sagittis. Nunc nec odio ex. Duis non hendrerit diam. Integer vulputate, mi a gravida pretium, ligula libero laoreet libero, in vestibulum arcu velit at velit.
+
+      Suspendisse at neque commodo, sollicitudin lectus sed, blandit sem. Curabitur pharetra suscipit elit ac ultrices. Quisque ullamcorper quis massa et fringilla. Donec euismod, metus id porttitor semper, tortor velit accumsan metus, ut malesuada risus elit eu lorem. Mauris magna odio, efficitur et elit eu, suscipit fermentum sapien. Donec lacinia aliquet augue eu convallis. Suspendisse tincidunt lacus ac ipsum mattis malesuada. Curabitur pellentesque nec nulla ut commodo. Suspendisse pretium nunc in risus iaculis dignissim. Donec faucibus tempus lectus, vel ultrices lectus tincidunt et. Mauris pulvinar ut est in iaculis. Maecenas facilisis enim nec pharetra mattis. Aliquam laoreet egestas lacus, et porta nisl. Ut euismod laoreet purus sed eleifend. Vivamus ullamcorper sodales arcu, sit amet accumsan augue placerat semper. Duis condimentum mattis nulla sed consequat.
+
+      Donec non dui ligula. Aliquam id efficitur massa. Donec tristique aliquet dolor, quis rhoncus felis dignissim sit amet. Duis pellentesque orci eget rhoncus lacinia. Ut dapibus neque id ex fringilla, vitae lobortis turpis interdum. Donec mi lectus, finibus id placerat ut, molestie sit amet erat. Vivamus laoreet semper dui, id efficitur eros. Etiam mollis a nisi a ullamcorper. Vivamus ut porta odio. Maecenas dictum dignissim faucibus. Vestibulum lectus lacus, tempus pulvinar fermentum in, suscipit eget ex. Sed mollis non libero at dignissim. Curabitur non justo vel dui convallis feugiat. Suspendisse quis dictum augue, et pharetra arcu.
+
+      Curabitur sem purus, sagittis quis lorem ac, iaculis laoreet lacus. Fusce eleifend congue massa a ornare. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sodales, tortor ut hendrerit lacinia, velit metus commodo libero, eu consequat est metus sit amet odio. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Pellentesque eu sem vehicula, vulputate est sit amet, mattis nisi. Nullam consequat at turpis vitae pretium. Nulla risus velit, pharetra ac sollicitudin sed, volutpat nec felis.
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam pretium efficitur lectus, porttitor ornare dolor luctus eu. Vivamus auctor nunc non vestibulum tempor. Integer tristique massa sit amet mi auctor euismod. In finibus nec purus et volutpat. Nullam consectetur est id lorem posuere, quis blandit eros dignissim. Curabitur fringilla iaculis est sed porttitor. Duis in nisi felis.
+
+      Suspendisse ex sem, eleifend vitae felis eu, finibus malesuada odio. Duis eget risus in sem facilisis venenatis eget nec turpis. Aliquam ac sapien dictum, tempor libero sed, feugiat odio. Mauris bibendum nisi justo, eu pulvinar neque tempor ac. Vivamus suscipit in elit interdum euismod. Etiam porta molestie lobortis. Nam consectetur malesuada ante non sagittis. Nunc nec odio ex. Duis non hendrerit diam. Integer vulputate, mi a gravida pretium, ligula libero laoreet libero, in vestibulum arcu velit at velit.
+
+      Suspendisse at neque commodo, sollicitudin lectus sed, blandit sem. Curabitur pharetra suscipit elit ac ultrices. Quisque ullamcorper quis massa et fringilla. Donec euismod, metus id porttitor semper, tortor velit accumsan metus, ut malesuada risus elit eu lorem. Mauris magna odio, efficitur et elit eu, suscipit fermentum sapien. Donec lacinia aliquet augue eu convallis. Suspendisse tincidunt lacus ac ipsum mattis malesuada. Curabitur pellentesque nec nulla ut commodo. Suspendisse pretium nunc in risus iaculis dignissim. Donec faucibus tempus lectus, vel ultrices lectus tincidunt et. Mauris pulvinar ut est in iaculis. Maecenas facilisis enim nec pharetra mattis. Aliquam laoreet egestas lacus, et porta nisl. Ut euismod laoreet purus sed eleifend. Vivamus ullamcorper sodales arcu, sit amet accumsan augue placerat semper. Duis condimentum mattis nulla sed consequat.
+
+      Donec non dui ligula. Aliquam id efficitur massa. Donec tristique aliquet dolor, quis rhoncus felis dignissim sit amet. Duis pellentesque orci eget rhoncus lacinia. Ut dapibus neque id ex fringilla, vitae lobortis turpis interdum. Donec mi lectus, finibus id placerat ut, molestie sit amet erat. Vivamus laoreet semper dui, id efficitur eros. Etiam mollis a nisi a ullamcorper. Vivamus ut porta odio. Maecenas dictum dignissim faucibus. Vestibulum lectus lacus, tempus pulvinar fermentum in, suscipit eget ex. Sed mollis non libero at dignissim. Curabitur non justo vel dui convallis feugiat. Suspendisse quis dictum augue, et pharetra arcu.
+
+      Curabitur sem purus, sagittis quis lorem ac, iaculis laoreet lacus. Fusce eleifend congue massa a ornare. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sodales, tortor ut hendrerit lacinia, velit metus commodo libero, eu consequat est metus sit amet odio. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Pellentesque eu sem vehicula, vulputate est sit amet, mattis nisi. Nullam consequat at turpis vitae pretium. Nulla risus velit, pharetra ac sollicitudin sed, volutpat nec felis.
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam pretium efficitur lectus, porttitor ornare dolor luctus eu. Vivamus auctor nunc non vestibulum tempor. Integer tristique massa sit amet mi auctor euismod. In finibus nec purus et volutpat. Nullam consectetur est id lorem posuere, quis blandit eros dignissim. Curabitur fringilla iaculis est sed porttitor. Duis in nisi felis.
+
+      Suspendisse ex sem, eleifend vitae felis eu, finibus malesuada odio. Duis eget risus in sem facilisis venenatis eget nec turpis. Aliquam ac sapien dictum, tempor libero sed, feugiat odio. Mauris bibendum nisi justo, eu pulvinar neque tempor ac. Vivamus suscipit in elit interdum euismod. Etiam porta molestie lobortis. Nam consectetur malesuada ante non sagittis. Nunc nec odio ex. Duis non hendrerit diam. Integer vulputate, mi a gravida pretium, ligula libero laoreet libero, in vestibulum arcu velit at velit.
+
+      Suspendisse at neque commodo, sollicitudin lectus sed, blandit sem. Curabitur pharetra suscipit elit ac ultrices. Quisque ullamcorper quis massa et fringilla. Donec euismod, metus id porttitor semper, tortor velit accumsan metus, ut malesuada risus elit eu lorem. Mauris magna odio, efficitur et elit eu, suscipit fermentum sapien. Donec lacinia aliquet augue eu convallis. Suspendisse tincidunt lacus ac ipsum mattis malesuada. Curabitur pellentesque nec nulla ut commodo. Suspendisse pretium nunc in risus iaculis dignissim. Donec faucibus tempus lectus, vel ultrices lectus tincidunt et. Mauris pulvinar ut est in iaculis. Maecenas facilisis enim nec pharetra mattis. Aliquam laoreet egestas lacus, et porta nisl. Ut euismod laoreet purus sed eleifend. Vivamus ullamcorper sodales arcu, sit amet accumsan augue placerat semper. Duis condimentum mattis nulla sed consequat.
+
+      Donec non dui ligula. Aliquam id efficitur massa. Donec tristique aliquet dolor, quis rhoncus felis dignissim sit amet. Duis pellentesque orci eget rhoncus lacinia. Ut dapibus neque id ex fringilla, vitae lobortis turpis interdum. Donec mi lectus, finibus id placerat ut, molestie sit amet erat. Vivamus laoreet semper dui, id efficitur eros. Etiam mollis a nisi a ullamcorper. Vivamus ut porta odio. Maecenas dictum dignissim faucibus. Vestibulum lectus lacus, tempus pulvinar fermentum in, suscipit eget ex. Sed mollis non libero at dignissim. Curabitur non justo vel dui convallis feugiat. Suspendisse quis dictum augue, et pharetra arcu.
+
+      Curabitur sem purus, sagittis quis lorem ac, iaculis laoreet lacus. Fusce eleifend congue massa a ornare. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sodales, tortor ut hendrerit lacinia, velit metus commodo libero, eu consequat est metus sit amet odio. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Pellentesque eu sem vehicula, vulputate est sit amet, mattis nisi. Nullam consequat at turpis vitae pretium. Nulla risus velit, pharetra ac sollicitudin sed, volutpat nec felis.
+  </div>
+
+  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
+  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.3.0/codemirror.min.js"></script>
+  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.3.0/mode/xml/xml.min.js"></script>
+  <script type="text/javascript" src="../js/froala_editor.min.js"></script>
+  <script type="text/javascript" src="../js/plugins/align.min.js"></script>
+  <script type="text/javascript" src="../js/plugins/code_beautifier.min.js"></script>
+  <script type="text/javascript" src="../js/plugins/code_view.min.js"></script>
+  <script type="text/javascript" src="../js/plugins/draggable.min.js"></script>
+  <script type="text/javascript" src="../js/plugins/colors.min.js"></script>
+  <script type="text/javascript" src="../js/plugins/emoticons.min.js"></script>
+  <script type="text/javascript" src="../js/plugins/font_size.min.js"></script>
+  <script type="text/javascript" src="../js/plugins/font_family.min.js"></script>
+  <script type="text/javascript" src="../js/plugins/image.min.js"></script>
+  <script type="text/javascript" src="../js/plugins/image_manager.min.js"></script>
+  <script type="text/javascript" src="../js/plugins/line_breaker.min.js"></script>
+  <script type="text/javascript" src="../js/plugins/link.min.js"></script>
+  <script type="text/javascript" src="../js/plugins/lists.min.js"></script>
+  <script type="text/javascript" src="../js/plugins/paragraph_format.min.js"></script>
+  <script type="text/javascript" src="../js/plugins/paragraph_style.min.js"></script>
+  <script type="text/javascript" src="../js/plugins/video.min.js"></script>
+  <script type="text/javascript" src="../js/plugins/table.min.js"></script>
+  <script type="text/javascript" src="../js/plugins/url.min.js"></script>
+  <script type="text/javascript" src="../js/plugins/entities.min.js"></script>
+  <script type="text/javascript" src="../js/plugins/char_counter.min.js"></script>
+  <script type="text/javascript" src="../js/plugins/inline_style.min.js"></script>
+  <script type="text/javascript" src="../js/plugins/save.min.js"></script>
+  <script type="text/javascript" src="../js/languages/ro.js"></script>
+
+  <script>
+    $(function(){
+      $('#edit').froalaEditor({
+        enter: $.FroalaEditor.ENTER_P,
+        imageUploadToS3: {
+          bucket: '<?php echo $bucket; ?>',
+          region: '<?php echo $region; ?>',
+          keyStart: '<?php echo $keyStart; ?>',
+          params: {
+            acl: '<?php echo $acl; ?>',
+            AWSAccessKeyId: '<?php echo $accessKeyId; ?>',
+            policy: '<?php echo $policy; ?>',
+            signature: '<?php echo $signature; ?>',
+          }
+        }
+      })
+      .on('froalaEditor.image.uploadedToS3', function (e, editor, link, key, response) {
+        console.log ('S3 Link:', link);
+        console.log ('S3 Key:', key);
+      })
+    });
+  </script>
+</body>
+</html>

Некоторые файлы не были показаны из-за большого количества измененных файлов