CKEditor For WordPress not working for comments

I keep trying to debug. Everything seems to run fine until in editor.js, the following call isn't processed:

CKEDITOR.plugins.load( plugins.split( ',' ), function( plugins )

plugins seems to be fine, it's a string with a bunch of plugins names separated by ','

Just before the call I use alert() to see what's inside plugins, but then nothing else happens.

As I can understand, this function should be called so that loadTheme() is called inside it. loadTheme() would call editorTheme.build(), that's defined in theme.js, and would build editor's HTML, store it in the variable "container", and then insert it to DOM.

So, why aren't plugins finishing to be loaded?

Ok, I discovered what was breaking it.

I suspected the problem was not in the editor itself because it's tested in many platforms, while plugin files are still beta and less used, but I couldn't find it.


editor.config.extraPlugins has a bunch of plugins that aren't working. They don't seem to be added directly by the plugin, I couldn't find where they are coming from, but I found where they are being added.

In \ckeditor\_source\core\config.js, CKEDITOR.config.plugins defines these default plugins:

'about,a11yhelp,basicstyles,blockquote,button,clipboard,colorbutton,colordialog,contextmenu,div,elementspath,enterkey,entities,filebrowser,find,flash,font,format,forms,horizontalrule,htmldataprocessor,image,indent,justify,keystrokes,link,list,maximize,newpage,pagebreak,pastefromword,pastetext,popup,preview,print,removeformat,resize,save,scayt,smiley,showblocks,showborders,sourcearea,stylescombo,table,tabletools,specialchar,tab,templates,toolbar,undo,wysiwygarea,wsc'

but editor.config.extraPlugins had these:

"about,a11yhelp,basicstyles,blockquote,button,clipboard,colorbutton,colordialog,contextmenu,div,elementspath,enterkey,entities,filebrowser,flash,font,format,forms,horizontalrule,htmldataprocessor,image,indent,justify,keystrokes,link,list,maximize,newpage,pagebreak,pastefromword,pastetext,popup,preview,print,removeformat,resize,save,scayt,smiley,showblocks,showborders,sourcearea,stylescombo,table,tabletools,specialchar,tab,templates,toolbar,undo,wysiwygarea,wsc,eachSlice,all,any,collect,detect,findAll,grep,include,inGroupsOf,inject,invoke,max,min,partition,pluck,reject,sortBy,toArray,zip,size,inspect,find,select,member,entries,_reverse,_each,clear,first,last,compact,flatten,without,uniq,intersect,clone,toJSON"

Wherever they are coming from, they are added in \ckeditor-for-wordpress\includes\ckeditor.utils.js, so we just need to comment the line that adds them to the editor:

//evt.editor.config.extraPlugins += (evt.editor.config.extraPlugins ? ','+externals.join(',') : externals.join(','));

Commenting this line they stop being added. But there's still another plugin bugging, "find", so we also must remove it.

Still inside the "configLoaded" event listener, we add the folloing code:

   ckeditorSettings.configuration['on'] = {
      configLoaded : function ( evt ) {

// (...)

         var remove = "find";
         evt.editor.config.removePlugins += (evt.editor.config.removePlugins ? ','+remove : remove);
      }
   }

Using "removePlugins" property, all plugins listed there will be removed when plugins are loaded, and finally doing that the editor will load!


But there are still 2 other bugs. The plugin offers 3 toolbars: WordpressBasic, WordpressFull and Full, but Full is not working. I set it to use WordpressFull and worked fine.

Also, when reply is used and comment form is moved, the editor brokes. comment-reply.js must be hacked to remove the editor before the move, then brought back after it. There's a TinyMCE plugin that implements it, and CKEditor plugin has functions to "easily" load and unload the editor, so it must be easy to adapt.

http://wordpress.org/extend/plugins/tinymcecomments/

It did it! it was much easier than I thought!!

I'll publish the code here for now and do some more tests, if anything new shows up I update it.

original \wp-includes\js\comment-reply.dev.js :

addComment = {
   moveForm : function(commId, parentId, respondId, postId) {
      var t = this, div, comm = t.I(commId), respond = t.I(respondId), cancel = t.I('cancel-comment-reply-link'), parent = t.I('comment_parent'), post = t.I('comment_post_ID');

      if ( ! comm || ! respond || ! cancel || ! parent )
         return;

      t.respondId = respondId;
      postId = postId || false;

      if ( ! t.I('wp-temp-form-div') ) {
         div = document.createElement('div');
         div.id = 'wp-temp-form-div';
         div.style.display = 'none';
         respond.parentNode.insertBefore(div, respond);
      }

      comm.parentNode.insertBefore(respond, comm.nextSibling);
      if ( post && postId )
         post.value = postId;
      parent.value = parentId;
      cancel.style.display = '';

      cancel.onclick = function() {
         var t = addComment, temp = t.I('wp-temp-form-div'), respond = t.I(t.respondId);

         if ( ! temp || ! respond )
            return;

         t.I('comment_parent').value = '0';
         temp.parentNode.insertBefore(respond, temp);
         temp.parentNode.removeChild(temp);
         this.style.display = 'none';
         this.onclick = null;
         return false;
      }

      try { t.I('comment').focus(); }
      catch(e) {}

      return false;
   },

   I : function(e) {
      return document.getElementById(e);
   }
}

updated to support CKEditor:

addComment = {
   moveForm : function(commId, parentId, respondId, postId) {
      var t = this, div, comm = t.I(commId), respond = t.I(respondId), cancel = t.I('cancel-comment-reply-link'), parent = t.I('comment_parent'), post = t.I('comment_post_ID');

      if ( ! comm || ! respond || ! cancel || ! parent )
         return;
ckeditorOff();
      t.respondId = respondId;
      postId = postId || false;

      if ( ! t.I('wp-temp-form-div') ) {
         div = document.createElement('div');
         div.id = 'wp-temp-form-div';
         div.style.display = 'none';
         respond.parentNode.insertBefore(div, respond);
      }

      comm.parentNode.insertBefore(respond, comm.nextSibling);
      if ( post && postId )
         t.I('comment_post_ID').value = postId;
      t.I('comment_parent').value = parentId;
      cancel.style.display = '';

      cancel.onclick = function() {
         var t = addComment, temp = t.I('wp-temp-form-div'), respond = t.I(t.respondId);

         if ( ! temp || ! respond )
            return;
ckeditorOff();
         t.I('comment_parent').value = '0';
         temp.parentNode.insertBefore(respond, temp);
         temp.parentNode.removeChild(temp);
         this.style.display = 'none';
         this.onclick = null;
ckeditorOn();
         return false;
      }
ckeditorOn()
      try { t.I('comment').focus(); }
      catch(e) {}

      return false;
   },

   I : function(e) {
      return document.getElementById(e);
   }
}

Use this code in a file in ur plugin root folder named comment-reply.js, then add the following code inside ckeditor_wordpress.add_comment_js():

      wp_deregister_script('comment-reply');
      wp_register_script( 'comment-reply', plugin_dir_url(__FILE__). "comment-reply.js", array('ckeditor.utils'), '20090102');

In a few tests it worked great, I can move comment form around and CKEditor continues working.

http://Hikari.ws