Hi, I'm loading via ajax different forms with textarea's which should use ckeditor (attached by Drupal.attachBehaviors). There appear two Problems:

1. As ckeditor_basic.js uses the "onload" Event to set the CKEDITOR.status from "basic_loaded" to "basic_ready" and call the CKEDITOR.loadFullCore Method, which only works if the status is "basic_ready". The first time a form is loaded via ajax fails. Because the "loaded" Event on

CKEDITOR.on('loaded', function() {
         textarea_settings = Drupal.ckeditorLoadPlugins(textarea_settings);
         Drupal.ckeditorInstance = CKEDITOR.replace(textarea_id, textarea_settings);
}

is not fired. Only on the second ajax form it works, because the CKEDITOR.status changes to "basic_ready" by the "onload" Event.
To solve this I added in the Drupal.ckeditorInit Method:

       if (CKEDITOR.loadFullCore) {
+      if(CKEDITOR.status == 'basic_loaded') CKEDITOR.status = 'basic_ready';
        CKEDITOR.on('loaded', function() {

this force the function CKEDITOR.loadFullCore to be executed.

2. The second Problem is that if multiple forms are loaded via ajax, drupal generates different id's for the filter select box (like edit-body-und-0-format--4, edit-body-und-0-format--6, etc.) so the line in the ckeditor.utils.js

var sel_format = $("#" + ta_id.substr(0, ta_id.lastIndexOf("-")) + "-format--2");

only works on the first loaded form.
My solution is to verify if multiple id's are present.

+        var match = ta_id.match(/^(.*)-value--[0-9]+$/);
+        var sel_format = null;
+        if(match){
+               sel_format = $(this).closest('.text-format-wrapper').find('.filter-wrapper .filter-list');
+        }else{
+               sel_format = $("#" + ta_id.substr(0, ta_id.lastIndexOf("-")) + "-format--2");   
+        }

Here the patch for the Tag 7.x-1.12:
diff --git a/includes/ckeditor.utils.js b/includes/ckeditor.utils.js
index 27552a4..232f657 100644
--- a/includes/ckeditor.utils.js
+++ b/includes/ckeditor.utils.js
@@ -112,6 +112,7 @@ window.CKEDITOR_BASEPATH = Drupal.settings.ckeditor.editor_path;
     if (textarea_settings.width == '100%') textarea_settings.width = '';
 
     if (CKEDITOR.loadFullCore) {
+      if(CKEDITOR.status == 'basic_loaded') CKEDITOR.status = 'basic_ready';
       CKEDITOR.on('loaded', function() {
         textarea_settings = Drupal.ckeditorLoadPlugins(textarea_settings);
         Drupal.ckeditorInstance = CKEDITOR.replace(textarea_id, textarea_settings);
@@ -287,8 +288,15 @@ window.CKEDITOR_BASEPATH = Drupal.settings.ckeditor.editor_path;
         if (typeof(Drupal.settings.ckeditor.input_formats[Drupal.settings.ckeditor.elements[ta_id]]) != 'undefi
           $('.ckeditor_links').show();
         }
+        
+        var match = ta_id.match(/^(.*)-value--[0-9]+$/);
+        var sel_format = null;
+        if(match){
+               sel_format = $(this).closest('.text-format-wrapper').find('.filter-wrapper .filter-list');
+        }else{
+               sel_format = $("#" + ta_id.substr(0, ta_id.lastIndexOf("-")) + "-format--2");   
+        }
 
-        var sel_format = $("#" + ta_id.substr(0, ta_id.lastIndexOf("-")) + "-format--2");
         if (sel_format && sel_format.not('.ckeditor-processed')) {
           sel_format.addClass('ckeditor-processed').change(function() {
             Drupal.settings.ckeditor.elements[ta_id] = $(this).val();
Support from Acquia helps fund testing for Drupal Acquia logo

Comments

wwalc’s picture

If anyone used this, please report back if it worked as expected.

wwalc’s picture

Status: Active » Needs review
clmntbk’s picture

Version: 7.x-1.12 » 7.x-1.x-dev

Hello, I am unable to load CKEditor on a content type containing multiple ajax loaded forms (field collection, multiple text forms, autocomplete fields, etc). I tried to apply your patch but I haven't notice any effect.
Must be something else in my case...

Tested under:
- CKEditor - WYSIWYG HTML editor 7.x-1.x-dev
- CKEditor 4.1.2 full

clmntbk’s picture

Just fixed my problem: it was simply fieldgroup that turned CKEditor off!!
It was set on "accordion" setting and when I turned it to "vertical tabs group", CKEditor was eventually working on this content type!

ttkaminski’s picture

I can confirm bug #2 reported by @cezaryrk. It can be reproduced with the ajax_comments module. My attached patch is slightly simpler than the one suggested by @cezaryrk.

-        var sel_format = $("#" + ta_id.substr(0, ta_id.lastIndexOf("-")) + "-format--2");
+        var sel_format = $(this).closest('.comment-form').find('select[id^="edit-comment-body-und-0-format"]');
ttkaminski’s picture

Ignore the patch in #5. Use this one instead.

-        var sel_format = $("#" + ta_id.substr(0, ta_id.lastIndexOf("-")) + "-format--2");
+        var sel_format = $(this).closest('.text-format-wrapper').find('select.filter-list');
Matthijs’s picture

Status: Needs review » Reviewed & tested by the community

The patch in #6 seems to work fine for me!

wwalc’s picture

@Matthijs - you mentioned that patch #6 worked for you, but attached patch #5 in your reply instead. Could you clarify which one worked for you?

loopduplicate’s picture

None of the patches above work for me. I'm trying to use panels IPE.

Here's my situation. The first time a form is loaded in a popup, CKEditor is not enabled. If I close the popup and reopen it again, CKEditor shows up.

In my case, CKEDITOR is undefined and so Drupal.ckeditor equates to false on line 9

Drupal.ckeditor = (typeof(CKEDITOR) != 'undefined');

I'll try to fix this and post a patch if I do.

Cheers,
Jeff

loopduplicate’s picture

For me, I fixed the problem by visiting admin/config/content/ckeditor/editg and changing the 'Path to CKEditor' to %l/ckeditor . It was previously set to use the CDN even though I had downloaded it and put it in the libraries folder.

BTW, I downloaded the latest full build from CKEditor (and also got these extras: the Shared Space plugin, the Table Resize plugin, and the Source Dialog plugin) and am using the latest dev version of this drupal module.

wwalc’s picture

@loopduplicate - many thanks for your comments. It looks like you actually encountered a different issue, strictly related to a recent update in CKEditor module where CDN support was added: #2244817: CKEditor from CDN does not load in Panels IPE when a form is loaded in a popup for the first time.. Indeed panels worked only when CKEditor was loaded from the same domain.

@all - can anyone else confirm that patch in #6 worked for him and did not break anything?

loopduplicate’s picture

Not sure if this helps or not. I tried loading in multiple forms at once to reproduce this bug but I couldn't reproduce it. First I created a new fieldable panels pane bundle with two text areas and tried to load them up using the panels IPE. That worked just fine.

Next I created a new node content type with four custom fields: two text areas and two field collections. Each field collection contained two text areas. When I loaded up the node add form, all 6 instances of CKEditor loaded correctly.

jcisio’s picture

Status: Reviewed & tested by the community » Needs work

There was no proper review, and the patch no longer applies.

saniyat’s picture

Status: Needs work » Needs review
FileSize
675 bytes

Found same issue on multiple ajax loaded form (media ctools edit modal). Applied the changes of #6 and it works.
So, I create a new patch against the latest release and attached here for further review.