When editing a Views Global: Text area (Global: Text area), the text formats integrate with it, but the ckeditor module doesn't plug into the text area to provide, for example Full HTML, editing within the Global: Text area (Global: Text area) being used within the view, for example to create a (Full HTML) header or footer for a view.

Support from Acquia helps fund testing for Drupal Acquia logo

Comments

DrupalWebsiteBuilder created an issue. See original summary.

Version: 8.3.x-dev » 8.4.x-dev

Drupal 8.3.6 was released on August 2, 2017 and is the final full bugfix release for the Drupal 8.3.x series. Drupal 8.3.x will not receive any further development aside from critical and security fixes. Sites should prepare to update to 8.4.0 on October 4, 2017. (Drupal 8.4.0-alpha1 is available for testing.)

Bug reports should be targeted against the 8.4.x-dev branch from now on, and new development or disruptive changes should be targeted against the 8.5.x-dev branch. For more information see the Drupal 8 minor version schedule and the Allowed changes during the Drupal 8 release cycle.

Wim Leers’s picture

Title: ckeditor does not plug into Views global text areas » CKEditor not available for Views "text" areas
Issue tags: +VDC

Reproduced.

Apparently this is being done intentionally though. See \Drupal\views\Plugin\views\area\Text::buildOptionsForm():

  public function buildOptionsForm(&$form, FormStateInterface $form_state) {
    parent::buildOptionsForm($form, $form_state);

    $form['content'] = [
      '#title' => $this->t('Content'),
      '#type' => 'text_format',
      '#default_value' => $this->options['content']['value'],
      '#rows' => 6,
      '#format' => isset($this->options['content']['format']) ? $this->options['content']['format'] : filter_default_format(),
      '#editor' => FALSE,
    ];
  }

This already was the case in a626abb — the commit that added the 7.x-3.x Views branch to Drupal core.

To answer why this was added in the first place, I cloned Views' 7.x-3.x branch and blamed it:

4f36bb7d (Daniel Wehner 2011-03-24 22:09:27 +0100  31)       '#wysiwyg' => FALSE,

That showed me this:

$ git show 4f36bb7d
commit 4f36bb7d6dd382013debf385e66fd1d0432d2e1e
Author: Daniel Wehner <daniel.wehner@erdfisch.de>
Date:   Thu Mar 24 22:09:27 2011 +0100

    Disable wysiwg editor on handler areas

diff --git a/handlers/views_handler_area_text.inc b/handlers/views_handler_area_text.inc
index e1639ff..b76c69d 100644
--- a/handlers/views_handler_area_text.inc
+++ b/handlers/views_handler_area_text.inc
@@ -17,6 +17,7 @@ class views_handler_area_text extends views_handler_area {
       '#default_value' => $this->options['content'],
       '#rows' => 6,
       '#format' => $this->options['format'],
+      '#wysiwyg' => FALSE,
     );
   }
 

There's no issue with related discussion to understand the reasoning.

However, I know that https://www.drupal.org/project/wysiwyg and the WYSIWYG editors at the time were less robust than CKEditor is today. So perhaps it's time to change this?

Wim Leers’s picture

Assigned: Unassigned » dawehner
Issue summary: View changes
Status: Active » Needs review
FileSize
693 bytes
240.08 KB
202.83 KB
Before
After
Anonymous’s picture

When we use a ckeditor button with a dialog (e.g. image), it closes the parent dialog. This can lead to confusion and loss of unfixed data in the text area. Without this flaw, the appearance of the ckeditor in the view looks perfect.

Wim Leers’s picture

#5: d'oh, you're right! That's a long-standing bug in the Dialog system…

Can you find the right issue, and mark this postponed on that?

jibran’s picture

I'm sure this issue is Duplicate of some issue.

jibran’s picture

Version: 8.4.x-dev » 8.5.x-dev

Drupal 8.4.4 was released on January 3, 2018 and is the final full bugfix release for the Drupal 8.4.x series. Drupal 8.4.x will not receive any further development aside from critical and security fixes. Sites should prepare to update to 8.5.0 on March 7, 2018. (Drupal 8.5.0-alpha1 is available for testing.)

Bug reports should be targeted against the 8.5.x-dev branch from now on, and new development or disruptive changes should be targeted against the 8.6.x-dev branch. For more information see the Drupal 8 minor version schedule and the Allowed changes during the Drupal 8 release cycle.

nightlife2008’s picture

Hi,

Just wanted to ask a question about nested modals, and the fact that currently drupal always passes `#drupal-modal` as the default selector...

Say you’d have nested modals, because a link in the outer modal triggers a new modal (CKeditor in modal + a LinkIt modal for example).

Would it be logical if both modals would have a randomly chosen ID (`#drupal-modal-uniqid()`) and push it onto an array of modal ID’s, and upon closing a modal, it would just follow the logic of “popping” off the last modal ID of the stack as it would be unlogical of an inner modal to close the outer modal?

I’m only a bit worried about feedback that this would not be a structural solution, but more a guesswork-method

But again, the modal-principal should block any interaction with anything except the upper modal. Also, it should be an all-js solution (I think), as between AJAX responses, Drupal can’t keep up with the generated ID’s coming from pretty much any random caller, being core or contrib

Keeping it client-side can also guarantee name-collision on the ID’s, and we could still "fallback" to the provided selector if it's different from the default "drupal-modal" in case someone did specify it.

I’d kindly appreciate your 2-eurocents on this :-)

nightlife2008’s picture

Luckily the geniuses on Drupal Core have created prototype commands so with a bit of extra code, you could easily achieve the nested modals...

/**
 * @file
 * Extends methods from core/misc/dialog/dialog.ajax.js.
 */
(function ($, window, Drupal, drupalSettings) {
  drupalSettings.dialogStack = [];

  Drupal.behaviors.nestedDialog = {
    attach: function attach(context, settings) {
      // Remove the core drupal modal.
      if ($('#drupal-modal').length) {
        $('#drupal-modal').remove();
      }

      var originalClose = settings.dialog.close;
      settings.dialog.close = function (event) {
        originalClose.apply(settings.dialog, arguments);
        $(event.target).remove();

        var lastSelector = drupalSettings.dialogStack[drupalSettings.dialogStack.length - 1] || false;

        if (lastSelector && $(event.target).attr('id') === lastSelector.replace(/^#/, '')) {
          settings.dialogStack.pop();
        }
      };
    }
  };

  Drupal.AjaxCommands.prototype.openDialog = function (ajax, response, status) {
    if (!response.selector) {
      return false;
    }
    var $dialog = $(response.selector);

    if (!$dialog.length) {
      if (response.selector === '#drupal-modal') {
        response.selector = '#drupal-modal-' + Math.random().toString(36).substr(2, 16);
      }
      $dialog = $('<div id="' + response.selector.replace(/^#/, '') + '" class="ui-front"/>').appendTo('body');

      drupalSettings.dialogStack.push(response.selector);
    }

    if (!ajax.wrapper) {
      ajax.wrapper = $dialog.attr('id');
    }

    response.command = 'insert';
    response.method = 'html';
    ajax.commands.insert(ajax, response, status);

    if (!response.dialogOptions.buttons) {
      response.dialogOptions.drupalAutoButtons = true;
      response.dialogOptions.buttons = Drupal.behaviors.dialog.prepareDialogButtons($dialog);
    }

    $dialog.on('dialogButtonsChange', function () {
      var buttons = Drupal.behaviors.dialog.prepareDialogButtons($dialog);
      $dialog.dialog('option', 'buttons', buttons);
    });

    response.dialogOptions = response.dialogOptions || {};
    var dialog = Drupal.dialog($dialog.get(0), response.dialogOptions);
    if (response.dialogOptions.modal) {
      dialog.showModal();
    } else {
      dialog.show();
    }

    $dialog.parent().find('.ui-dialog-buttonset').addClass('form-actions');
  };

  Drupal.AjaxCommands.prototype.closeDialog = function (ajax, response, status) {
    if (response.selector === '#drupal-modal') {
      response.selector = drupalSettings.dialogStack[drupalSettings.dialogStack.length - 1] || '#drupal-modal';
    }

    var $dialog = $(response.selector);
    if ($dialog.length) {
      drupalSettings.dialogStack.pop();

      Drupal.dialog($dialog.get(0)).close();
      if (!response.persist) {
        $dialog.remove();
      }
    }

    $dialog.off('dialogButtonsChange');
  };
})(jQuery, this, Drupal, drupalSettings);

Place the above code in a JS file, and load it with your module's or theme's libraries.yml file.

flyke’s picture

@nightlife2008 This is very interesting.
Unfortunatly when I apply your code, the wysiwyg editor is missing from textareas that normally do show up in the normal modal.
My problem was that I have an edit field in a modal with ckeditor, but when clicking on the link button it would replace the entire field edit modal. I hoped this code of yours could fix this, but if it removes the ckeditor, it is pretty useless unfortunately.

Any help on how to enable ckeditor with your code ?

johnzzon’s picture

I'm also having the issue with disappearing CKEditor after trying to add that javascript, @nightlife2008.

If anyone has some insight on what could be wrong, I'm all ears!

Version: 8.5.x-dev » 8.6.x-dev

Drupal 8.5.6 was released on August 1, 2018 and is the final bugfix release for the Drupal 8.5.x series. Drupal 8.5.x will not receive any further development aside from security fixes. Sites should prepare to update to 8.6.0 on September 5, 2018. (Drupal 8.6.0-rc1 is available for testing.)

Bug reports should be targeted against the 8.6.x-dev branch from now on, and new development or disruptive changes should be targeted against the 8.7.x-dev branch. For more information see the Drupal 8 minor version schedule and the Allowed changes during the Drupal 8 release cycle.

SocialNicheGuru’s picture

Status: Needs review » Needs work

I have linkit enabled
I select a url
i hit save
the modal does not close
I get the following:

js_F4yJIbj7ENAGfZRTjH5aygX1rBPOJd_GpDn85lneSKc.js:2 jQuery.Deferred exception: Cannot read property 'getRanges' of null TypeError: Cannot read property 'getRanges' of null
at Object.saveCallback (https://site/core/modules/ckeditor/js/plugins/drupallink/plugin.js?t=pgr...)
at https://onebayview.com/sites/site/files/js/js_2Ap9rB8KBM6XuA60h9L-VbjT3J...
at dispatch (https://site/sites/site/files/js/js_F4yJIbj7ENAGfZRTjH5aygX1rBPOJd_GpDn8...)
at q.handle (https://site/sites/site/files/js/js_F4yJIbj7ENAGfZRTjH5aygX1rBPOJd_GpDn8...)
at Object.trigger (https://site/sites/site/files/js/js_F4yJIbj7ENAGfZRTjH5aygX1rBPOJd_GpDn8...)
at https://site/sites/site/files/js/js_F4yJIbj7ENAGfZRTjH5aygX1rBPOJd_GpDn8...
at Function.each (https://site/sites/site/files/js/js_F4yJIbj7ENAGfZRTjH5aygX1rBPOJd_GpDn8...)
at r.fn.init.each (https://site/sites/site/files/js/js_F4yJIbj7ENAGfZRTjH5aygX1rBPOJd_GpDn8...)
at r.fn.init.trigger (https://site/sites/site/files/js/js_F4yJIbj7ENAGfZRTjH5aygX1rBPOJd_GpDn8...)
at Drupal.AjaxCommands.editorDialogSave (https://onebayview.com/sites/site/files/js/js_heyBfxySc9P2tJEGTJdrDhgu4m...) undefined
r.Deferred.exceptionHook @ js_F4yJIbj7ENAGfZRTjH5aygX1rBPOJd_GpDn85lneSKc.js:2
k @ js_F4yJIbj7ENAGfZRTjH5aygX1rBPOJd_GpDn85lneSKc.js:2

Déjà vu’s picture

#4 patch worked for me thank you.

Version: 8.6.x-dev » 8.8.x-dev

Drupal 8.6.x will not receive any further development aside from security fixes. Bug reports should be targeted against the 8.8.x-dev branch from now on, and new development or disruptive changes should be targeted against the 8.9.x-dev branch. For more information see the Drupal 8 and 9 minor version schedule and the Allowed changes during the Drupal 8 and 9 release cycles.

Version: 8.8.x-dev » 8.9.x-dev

Drupal 8.8.7 was released on June 3, 2020 and is the final full bugfix release for the Drupal 8.8.x series. Drupal 8.8.x will not receive any further development aside from security fixes. Sites should prepare to update to Drupal 8.9.0 or Drupal 9.0.0 for ongoing support.

Bug reports should be targeted against the 8.9.x-dev branch from now on, and new development or disruptive changes should be targeted against the 9.1.x-dev branch. For more information see the Drupal 8 and 9 minor version schedule and the Allowed changes during the Drupal 8 and 9 release cycles.

Version: 8.9.x-dev » 9.2.x-dev

Drupal 8 is end-of-life as of November 17, 2021. There will not be further changes made to Drupal 8. Bugfixes are now made to the 9.3.x and higher branches only. For more information see the Drupal core minor version schedule and the Allowed changes during the Drupal core release cycle.

nessunluogo’s picture

Drupal 9.3 could not apply patch #4. Providing new patch.

Version: 9.2.x-dev » 9.3.x-dev

Version: 9.3.x-dev » 9.4.x-dev

Drupal 9.3.15 was released on June 1st, 2022 and is the final full bugfix release for the Drupal 9.3.x series. Drupal 9.3.x will not receive any further development aside from security fixes. Drupal 9 bug reports should be targeted for the 9.4.x-dev branch from now on, and new development or disruptive changes should be targeted for the 9.5.x-dev branch. For more information see the Drupal core minor version schedule and the Allowed changes during the Drupal core release cycle.

quietone’s picture

Project: Drupal core » CKEditor 4 - WYSIWYG HTML editor
Version: 9.4.x-dev » 1.0.x-dev
Component: ckeditor.module » Code

CKEditor has been removed from core, CKEditor 4 is removed from Drupal Core in 10.0.0

cilefen’s picture

This is actually a Views issue. I’m not sure it should have been moved.