Using Drupal.ckeditorOn manually

FORWARD PROGRESS:

Instead of calling just "CKEDITOR.replace('form-name'), I used the following :

CKEDITOR.replace( 'form-name',{
        toolbar : 'DrupalFiltered'
    	});

DrupalFiltered is defined in modules/ckeditor.config.js

But it does not seem like that toolbar is recognized by CKEDITOR. It looks as though its only looking in ckeditor/ckeditor/ckeditor.js

I am getting the error message:

v is undefined
modules/ckeditor/ckeditor/ckeditor.js?D
Line 77

Line 77 is :

var u=n.toolbox.toolbars,v=n.config.toolbar instanceof Array?n.config.toolbar:n.config['toolbar_'+n.config.toolbar];for(var w=0;w

');t=0;}if(x==='/'){r.push('

');continue;}r.push('');var A=u.push(z)-1;if(A>0){z.previous=u[A-1];z.previous.next=z;}for(var B=0;B');t=1;}}else if(t){r.push('');t=0;}var E=C.render(n,r);A=z.items.push(E)-1;if(A>0){E.previous=z.items[A-1];E.previous.next=E;}E.toolbar=z;E.onkey=o;E.onfocus=function(){if(!n.toolbox.focusCommandExecuted)n.focus();};}}if(t){r.push('');t=0;}r.push('');}r.push('

');if(n.config.toolbarCanCollapse){var F=e.addFunction(function(){n.execCommand('toolbarCollapse');}),G='cke_'+e.getNextNumber();n.addCommand('toolbarCollapse',{exec:function(H){var I=a.document.getById(G),J=I.getPrevious(),K=H.getThemeSpace('contents'),L=J.getParent(),M=parseInt(K.$.style.height,10),N=L.$.offsetHeight,O=!J.isVisible();if(!O){J.hide();I.addClass('cke_toolbox_collapser_min');I.setAttribute('title',H.lang.toolbarExpand);}else{J.show();I.removeClass('cke_toolbox_collapser_min');I.setAttribute('title',H.lang.toolbarCollapse);}I.getFirst().setText(O?'▲':'◀');var P=L.$.offsetHeight-N;K.setStyle('height',M-P+'px');H.fire('resize');},modes:{wysiwyg:1,source:1}});r.push('','▲','');}p.data.html+=r.join('');}});n.addCommand('toolbarFocus',m.toolbarFocus);}});})();k.separator={render:function(l,m){m.push('');return{};}};i.toolbarLocation='top';i.toolbar_Basic=[['Bold','Italic','-','NumberedList','BulletedList','-','Link','Unlink','-','About']];i.toolbar_Full=[['Source','-','Save','NewPage','Preview','-','Templates'],['Cut','Copy','Paste','PasteText','PasteFromWord','-','Print','SpellChecker','Scayt'],['Undo','Redo','-','Find','Replace','-','SelectAll','RemoveFormat'],['Form','Checkbox','Radio','TextField','Textarea','Select','Button','ImageButton','HiddenField'],'/',['Bold','Italic','Underline','Strike','-','Subscript','Superscript'],['NumberedList','BulletedList','-','Outdent','Indent','Blockquote','CreateDiv'],['JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock'],['Link','Unlink','Anchor'],['Image','Flash','Table','HorizontalRule','Smiley','SpecialChar','PageBreak'],'/',['Styles','Format','Font','FontSize'],['TextColor','BGColor'],['Maximize','ShowBlocks','-','About']];

P.S. Good docs can be found at : http://docs.cksource.com/CKEditor_3.x/Developers_Guide

I've also tried doing a :

Drupal.attachBehaviors($('#my-ajax-form-container') after the form is loaded, but get the following:

Drupal.settings.ckeditor is undefined
[Break on this error] if ((typeof(Drupal.settings.ckedit....autostart[ta_id]) != 'undefined')) {

Looking at ckeditor.utils.js, it looks like the proper way to do this is to call Drupal.ckeditorOn('#my-textarea-id');

Doing that, I am getting no errors now, but also no action.

Help?

I do not mean to bump relentlessly, but I am inching away and just want to get some things confirmed / denied.

I see that ckeditor_process_textarea within ckeditor.module seems to do some important things. Does this need to be called in order for a textarea to properly turn into a CKEditor field?

I guess I could use a menu_callback to do this from my JS or something?

Hey Mephir.

Here is my issue :

1) I'm using CKEditor on the body field of a node
2) Its working perfectly if I go to www.site.com/node/12/edit
3) I pull in a node-edit form from the front page using : $('div#mydiv').load('node/12/edit #node-form')
4) The node-edit form gets pulled, but does not have a CKEditor instance on the body field
5) I can't figure out how to get CKEditor module to turn the body field into an instance

I've tried the following:
Drupal.ckeditorOn('body-edit');
Drupal.ckeditorToggle('body-edit');

I have loaded ckeditor and ckeditor.utils manually.

you can use ckeditorOn for make instance, but you haven't got settings for that instance

Definitely what is going on.

Thanks for your help, I look forward to hearing from you.

Mephir, if this issue needs to be sponsored, just let me know please.

Thanks,

First think which i had, is using jQuery.get instead of load, and try to get settings for ckeditor from all document.

By "settings" do you mean specifically Drupal.settings.ckeditor ?

Yaaarrrrrrrrrrrrrhhhhhhhhhhhhh!

Rejoice like the King you are, Mephir! Enjoy beautiful women with wine and a full moon!

Below is how I pulled a node-edit form w/ CKEditor attached via Ajax:

---------------------------------------------------------------

Prerequisites
A nodeblock (www.drupal.org/project/nodeblock) block, with a body field that uses CKEditor
A way to submit your form via Ajax .I'm using the Ajax module. This requires a line of code to re-initialize the JS for our form. It would be pretty easy to submit it using jQuery's ajax() tools, and I may edit this in the future so that Ajax module is not required.

1) I have a node block on my /node/51/edit page, using standard Block Admin
2) In my module's JS file, I have manipulated the block's "edit" link in the following way:

/********************
    EDIT-IN-PLACE
 *******************/
 	
  	 
 	/* 
 	 *  Nodeblock Ajax-Edit
 	*/
// Since I'm using nodeblock, I am making every single Nodeblock be able to be edited via an Ajax pull. The '.tooltip' div is inside of my Nodeblock content because I added it to the node-uiblock.tpl.php file. So conceptually I have made it so that every nodeblock block has a custom 'Edit' link. You may want to do this some other way.

	$("div[id*='block-nodeblock-'] .content .tooltip a.editFore").click(initBlockEdit);
        
        function initBlockEdit() {
                // Check to see if another block is being edited. 
                // You'll see that we add the 'inEdit' class to this block below
                if($('.inEdit').length > 0){
                    alert("There is already a block being edited. Please Save or Cancel those changes first.");
                    return false;
                }

                // start loading animation
                // I've created a loading animation dialog using jQuery, that does not open automatically. This opens it.
                $('#loading').dialog('open');



		// get rid of the tooltip window
                // this is very specific to me. I'm using the jQuery .rightClick() plugin to create a dialog for people to edit blocks and I want it closed after they click a link in there
		$(this).parent().hide();
		
                // Now, pay attention. this is where we are getting the "/node/[nid]/edit" path from. Remember my custom tooltip with the edit link? I have an "href=/node/"<?php print $nid ?> in there. We steal that href and make an Ajax call to it, then "return false" below to stop the browser from redirecting
		var EditSRC = $(this).attr("href");		
                // These are shortcuts for my case so I can manipulate the Block's DOM
		var blockInner = $(this).parent().parent().parent().parent();
		var blockContent = $(this).parent().prev();
		
                // class for styling while in edit is in process
                blockContent.addClass('inEdit');
                
		// start Ajax request for Node Edit Form
		blockContent.empty().load(EditSRC + ' #node-form', function(data) {
  			
                    // ID Replacement to avoid CKEditor field conflicts
                    blockContent.find('#edit-body').attr('id','newest-body');

                    
                    // attaches Ajax and CKEditor JS
                    Drupal.attachBehaviors($('#newest-body'));

                    // initialize Ajax module JS for form submit
                    Drupal.Ajax.init();

                    // get rid of Loading img once the Node Edit Form is loaded
                    $('#loading').dialog('close');
                 
// Now, our Node-Edit form is loaded INSIDE of our Block, replacing the content, and the user can edit the content using CKEDitor
			
                    // Node-Edit Submit
                    blockContent.find('input#edit-submit').click(function(){
                        // start loading img
                        $('#loading').dialog('open');
                        // I'm finding the NID here from the Block's Dom. Kind of kludge. This is unnecessary because I already got the edit link above (so I could have saved it to a variable) but I don't have time to change everything right now ;)
                        var nid = blockContent.parent().attr('id');
                        nid = nid.split('-');
                        nid = nid[1];
                        //Show new content when node-edit-form is done submitting
                        $(blockContent).ajaxComplete(function(e, xhr, settings) {
                            // if it was indeed our Ajax-module-enabled form that finished (we get an infinite loop without this)
                            if (settings.type == 'post' && settings.url == EditSRC) {
                                // destroy the CKEDitor text-area
                                Drupal.ckeditorOff('newest-body');
                                // load the newly modified node block
                                blockContainer = blockContent.parent().parent();
                                blockContainer.empty().load('/node/' + nid + ' #content-area .node', function(data) {
                                    // this is all specific stuff to my '.tooltip' div inside of my node-uiblock.tpl.php file
                                    blockContainer.find('.tooltip .editFore').click(initBlockEdit);
                                    blockContainer.find('.tooltip .delBlock').click(initBlockDelete);
                                    blockContainer.find('.tooltip .remBlock').click(initBlockRemove);
                                    // kill the loading img when the Node-Block is finished loading
                                    $('#loading').dialog('close');
                                    // remember our check to make sure no other blocks are being edited? We need to remove this class so we can edit another block in the future and get rid of any styling we want applied during the edit.
                                    blockContent.removeClass('inEdit');
                                });
                            }
                        });
                    });
                });
		
		
    return false;
   
		
}

Thank you most graciously, Mephir.