Change in tinyMCEComments.php

Before (start line 295):

if (subBtn != null) {
	subBtn.onclick=function() {
		var inst = tinyMCE.getInstanceById("comment");
		document.getElementById("comment").value = inst.getContent();
		document.getElementById("commentform").submit();
		return false;
	}
}
tinyMCEPreInit.go();
tinyMCE.init(tinyMCEPreInit.mceInit);

After:

var subBtn = document.getElementById("submit");
	if (subBtn != null) {
	subBtn.onclick=function() {
		var inst = tinyMCE.getInstanceById("comment");
		document.getElementById("comment").value = inst.getContent();
		document.getElementById("commentform").submit();
		return false;
	}
}
tinyMCEPreInit.go();
tinymce.dom.Event.add(window, "load", function() {
	// Change the hidden fields id
	var pId = document.getElementById("comment_parent");
	if(pId) pId.id = "comment_parent_hf";
	tinyMCE.init(tinyMCEPreInit.mceInit);
});

The last thing that was changed in the script was a hard coded name of the comment_parent hidden filed inside comment-reply.dev.js in the TinyMCEComments plugin folder. Change parent = t.I(‘comment_parent’) to parent = t.I(‘comment_parent_hf’) to reflect the change we make on the load of TinyMCEComments:

Before (line 3):

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');

After:

var t = this, div, comm = t.I(commId), respond = t.I(respondId), cancel = t.I('cancel-comment-reply-link'), parent = t.I('comment_parent_hf'), post = t.I('comment_post_ID');

Now it works! Woohoo! I’m going to try to contact the other and have these changes included in the next release so everyone can enjoy threaded comments with TinyMCEComments. Thanks for reading and hopefully someone will find this helpful.

Today at work I was trying to convert our blog theme to a wider stance for an upcoming template switch, I thought this would be a very simple task. Little did I know the long day that would ensue. Our blog system at work used to use a plugin to create threaded functionality for posts. My boss decided that since WordPress now supports threaded comments we would switch over to that. I thought this would be a great idea (the less code, the less complex, the better). I began to convert our comments template to the new version required for Threaded Comments. After this was done I tried it out. It wouldn’t work with TinyMCEComments (plugin) enabled, but worked fine with it off. When TinyMCEComments was enabled it created two TinyMCE textareas whenever you tried to do a threaded reply. This seemed very odd to me but I had a feeling it had to do with moving the comment box below the comment that you’re replying too. After quite awhile and a little bit of help from my boss I was able to figure out all the issues and get TinyMCEComments working with the new threaded comments feature. There were two main issues:

1. Double insertion of TinyMCE editors.
2. TinyMCE has a bug where if create an editor with an id, then destroy that editor, and then try to create a new editor with that same id it will not work.
3. TinyMCE names its iframe the id of the textarea concatenated with “_parent”. So when you add TinyMCE functionality to a textare with id=”comments” you get an iframe with id=”comments_parent”. Unfortunately, WordPress uses “comment_parent” as the id for a hidden field used to transfer information about where your new comment should be added in the threading (or to the base comments). The hidden fields are output by the function comment_id_fields(). Also WordPress says “the comment textarea, it MUST have an id=”comment”. The JavaScript expects it for focus purposes. If you used anything else, change it. Note that because of this, no other element on your page can have the “comment” ID”.

Before I explain the fixes let me first say that TinyMCEComments overrides the addComment.moveForm function that is used by WordPress to move the comment box under the comment you want to reply too. It has the same code except that it has the added functionality for enabling TinyMCE on the comment box. Unfortunately it doesn’t work out of the box with WordPress’ thread comments.

Problem 1 was an issue with the TinyMCEComments plugin and TinyMCE. Using the remove method doesn’t remove the the TinyMCE’s iframe from the DOM. This was fixed with Problem 2. The removing and adding method being used doesn’t work correctly for Problem number 2 is a TinyMCE problem and we can’t really do to much about it other then implementing a name change when we reinsert the comment box. So we modified the TinyMCEComments plugin to rename the text area on reinsertion.

Before

Remove TinyMCE Comment box:

try {
   tinyMCE.triggerSave();
   tinyMCE.execCommand('mceFocus', false,'comment');
   tinyMCE.execCommand('mceRemoveControl', false,'comment');
} catch(el) { console.error(el); }

Add TinyMCE Comment box code:

addTiny : function() {
   try { tinyMCE.execCommand('mceAddControl', false, 'comment');
   } catch (e) { console.error(e); }
}

After:

Remove TinyMCE Comment box:

// **** Remove the TinyMCE Editor
var editor = tinymce.EditorManager.activeEditor;
var editorId = editor.getParam('elements');
editor.remove();
tinymce.DOM.remove(editor.getContainer());
editor.destroy();
tinymce.EditorManager.activeEditor = null;

Add TinyMCE Comment box code:

var commentElement = document.getElementById(editorId);
if (editorId == "comment")
	editorId = "comment_1";
else {
	var count = parseInt(editorId.replace(/comment_/, ""), 10) + 1;
	editorId = "comment_" + count;
}
commentElement.id = editorId;
tinyMCEPreInit.mceInit.elements = editorId;
tinyMCE.init(tinyMCEPreInit.mceInit);

Problem number 2 was more of a conflict and wasn’t really anyones fault, but was rather troublesome to fix. We thought it would be easier to change the TinyMCEComments plugin then modify the install of WordPress. We also had already modified the plugin to remove/insert TinyMCE boxes correctly so we might as well keep working with that. To fix the problem before TinyMCE is initialized we change the hidden field with id=”comment_parent” so it is id=”comment_parent_hf”. This doesn’t effect WordPress comment submission because form submissions use the name field server side to identify an attribute.

Change in tinyMCEComments.php

Before (start line 295):

if (subBtn != null) {
	subBtn.onclick=function() {
		var inst = tinyMCE.getInstanceById("comment");
		document.getElementById("comment").value = inst.getContent();
		document.getElementById("commentform").submit();
		return false;
	}
}
tinyMCEPreInit.go();
tinyMCE.init(tinyMCEPreInit.mceInit);

After:

var subBtn = document.getElementById("submit");
	if (subBtn != null) {
	subBtn.onclick=function() {
		var inst = tinyMCE.getInstanceById("comment");
		document.getElementById("comment").value = inst.getContent();
		document.getElementById("commentform").submit();
		return false;
	}
}
tinyMCEPreInit.go();
tinymce.dom.Event.add(window, "load", function() {
	// Change the hidden fields id
	var pId = document.getElementById("comment_parent");
	if(pId) pId.id = "comment_parent_hf";
	tinyMCE.init(tinyMCEPreInit.mceInit);
});

The last thing that was changed in the script was a hard coded name of the comment_parent hidden filed inside comment-reply.dev.js in the TinyMCEComments plugin folder. Change parent = t.I(‘comment_parent’) to parent = t.I(‘comment_parent_hf’) to reflect the change we make on the load of TinyMCEComments:

Before (line 3):

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');

After:

var t = this, div, comm = t.I(commId), respond = t.I(respondId), cancel = t.I('cancel-comment-reply-link'), parent = t.I('comment_parent_hf'), post = t.I('comment_post_ID');

Now it works! Woohoo! I’m going to try to contact the other and have these changes included in the next release so everyone can enjoy threaded comments with TinyMCEComments. Thanks for reading and hopefully someone will find this helpful.

Completed Files in Zip: DevTinyMCEComments