Enable uploading file into RTE (CKEditor) field with drag&drop in CP and Channel Form

cp-styles/app/styles/components/_rte.scss

@@ -865,6 +865,52 @@ a.ck.ck-button.ck-on {
  border-color: var(--ee-button-secondary-hover-border) !important;
 }
 
+.ck.ck-dialog {
+ background: var(--ee-button-default-bg) !important;
+ color: var(--ee-button-default-color) !important;
+ border-color: var(--ee-list-item-border) !important;
+}
+
+.ck.ck-dialog h2 {
+ color: var(--ee-button-default-color) !important;
+}
+
+.ck.ck-find-and-replace-form__actions {
+ margin-top: 10px !important;
+}
+
+.ck.ck-labeled-field-view .ck-labeled-field-view__status.ck-labeled-field-view__status_error {
+ color: var(--ee-error) !important;
+}
+
+// STYLES FOR CKEDITOR LABEL
+.ck.ck-labeled-field-view .ck-labeled-field-view__status.ck-labeled-field-view__status_error {
+ color: var(--ee-error) !important;
+}
+
+.ck.ck-balloon-panel.ck-powered-by-balloon .ck-powered-by:hover {
+ filter: grayscale(1);
+}
+
+.ck.ck-balloon-panel.ck-powered-by-balloon .ck.ck-powered-by a {
+ padding: 1px;
+}
+
+.ck.ck-balloon-panel.ck-powered-by-balloon .ck.ck-powered-by .ck-powered-by__label {
+ color: var(--ee-text-secondary);
+ opacity: 0.5;
+ font-size: 6px;
+}
+
+.ck.ck-balloon-panel.ck-powered-by-balloon .ck.ck-powered-by .ck-icon {
+ color: var(--ee-text-secondary);
+ opacity: 0.3;
+}
+
+.ck.ck-widget__resizer {
+ background: transparent !important;
+}
+
 // REDACTORX STYLES
 .rx-toolbar,
 .rx-topbar {

system/ee/ExpressionEngine/Addons/rte/Service/CkeditorService.php

@@ -198,6 +198,41 @@ protected function insertConfigJsById()
  'Rte.configs.' . $configHandle => $config
  ]);
 
+ // some config values are regular expressions, re-decleare those as such
+ $configRegex = [];
+ if (isset($config['htmlSupport']) && isset($config['htmlSupport']->allow)) {
+ foreach ($config['htmlSupport'] as $property => $htmlSupport) {
+ foreach ($htmlSupport as $i => $allowDisallow) {
+ foreach ($allowDisallow as $key => $value) {
+ if (is_string($value) && strpos($value, '/') === 0 && strrpos($value, '/') === strlen($value) - 1) {
+ $configRegex[] = 'EE.Rte.configs.' . $configHandle . '.htmlSupport.' . $property . '[' . $i . '].' . $key . ' = new RegExp(' . $value . ');';
+ } elseif (is_array($value)) {
+ foreach ($value as $j => $v) {
+ if (is_string($v) && strpos($v, '/') === 0 && strrpos($v, '/') === strlen($v) - 1) {
+ $configRegex[] = 'EE.Rte.configs.' . $configHandle . '.htmlSupport.' . $property . '[' . $i . '].' . $key . '[' . $j . '] = new RegExp(' . $v . ');';
+ }
+ }
+ }
+ }
+ }
+ }
+ }
+ if (isset($config['typing']) && isset($config['typing']->transformations) && isset($config['typing']->transformations->extra)) {
+ foreach ($config['typing']->transformations->extra as $i => $extra) {
+ foreach ($extra as $key => $value) {
+ if (is_string($value) && strpos($value, '/') === 0 && strrpos($value, '/') === strlen($value) - 1) {
+ $configRegex[] = 'EE.Rte.configs.typing.transformations.extra[' . $i . '].' . $key . ' = new RegExp(' . $value . ');';
+ }
+ }
+ }
+ }
+
+ if (!empty($configRegex)) {
+ ee()->cp->add_to_foot('<script type="text/javascript">
+ ' . implode("\n", $configRegex) . '
+ </script>');
+ }
+
  static::$_includedConfigs[] = $configHandle;
 
  if (isset($config['height']) && !empty($config['height'])) {
@@ -259,13 +294,21 @@ public function buildToolbarConfig($config)
  $toolbarConfig['htmlEmbed'] = new \stdClass();
  $toolbarConfig['htmlEmbed']->showPreviews = true;
 
+ // By default, we allow some block elements & span with any data-attribute and any class
+ // Plus the elements that have corresponding plugin or button - such as table, link, image, etc.
+ // We also allow classes, but not styles
+ // If the mode "do anything when in source editing" needs to be enable, set up advanaced config like this:
+ // https://ckeditor.com/docs/ckeditor5/latest/features/html/general-html-support.html#enabling-all-html-features
+ // However this is ponetially dangerous and also will break "paste from Word" filters
  $allowedHtml = new \stdClass();
- $allowedHtml->name = '/.*/';
- $allowedHtml->attributes = true;
+ $allowedHtml->name = '/^(div|section|article|span)$/';
+ $allowedHtml->attributes = '/data-[\w-]+/';
  $allowedHtml->classes = true;
- $allowedHtml->styles = true;
+ $allowedHtml->styles = false;
  $toolbarConfig['htmlSupport'] = new \stdClass();
- $toolbarConfig['htmlSupport']->allow = [$allowedHtml];
+ $toolbarConfig['htmlSupport']->allow = [
+ $allowedHtml
+ ];
 
  if (in_array('heading', $toolbarConfig['toolbar']->items)) {
  $toolbarConfig['heading'] = new \stdClass();

themes/ee/cp/css/common.min.css

@@ -47497,6 +47497,51 @@ a.ck.ck-button.ck-on {
  border-color: var(--ee-button-secondary-hover-border) !important;
 }
 
+.ck.ck-dialog {
+ background: var(--ee-button-default-bg) !important;
+ color: var(--ee-button-default-color) !important;
+ border-color: var(--ee-list-item-border) !important;
+}
+
+.ck.ck-dialog h2 {
+ color: var(--ee-button-default-color) !important;
+}
+
+.ck.ck-find-and-replace-form__actions {
+ margin-top: 10px !important;
+}
+
+.ck.ck-labeled-field-view .ck-labeled-field-view__status.ck-labeled-field-view__status_error {
+ color: var(--ee-error) !important;
+}
+
+.ck.ck-labeled-field-view .ck-labeled-field-view__status.ck-labeled-field-view__status_error {
+ color: var(--ee-error) !important;
+}
+
+.ck.ck-balloon-panel.ck-powered-by-balloon .ck-powered-by:hover {
+ filter: grayscale(1);
+}
+
+.ck.ck-balloon-panel.ck-powered-by-balloon .ck.ck-powered-by a {
+ padding: 1px;
+}
+
+.ck.ck-balloon-panel.ck-powered-by-balloon .ck.ck-powered-by .ck-powered-by__label {
+ color: var(--ee-text-secondary);
+ opacity: 0.5;
+ font-size: 6px;
+}
+
+.ck.ck-balloon-panel.ck-powered-by-balloon .ck.ck-powered-by .ck-icon {
+ color: var(--ee-text-secondary);
+ opacity: 0.3;
+}
+
+.ck.ck-widget__resizer {
+ background: transparent !important;
+}
+
 .rx-toolbar .rx-button-toolbar,
 .rx-toolbar .rx-button-topbar,
 .rx-topbar .rx-button-toolbar,