/* Front End Code
     * One check box has a normal postback the other creates
     * a stacked PostBack.
     */
    <div>
        <asp:CheckBox ID="cb1" Text="CheckBox 1 (AutoPostBack=false)" OnCheckedChanged="cb1_CheckChanged" AutoPostBack="false" runat="server" />&nbsp;
        <asp:CheckBox ID="cb2" Text="CheckBox 2" OnCheckedChanged="cb2_CheckChanged" AutoPostBack="true" runat="server" />&nbsp;
        <br />
        <br />
        <asp:Label ID="lblTarget" runat="server" />
        <br />
        <br />
        <asp:Button ID="Submit" Text="Submit" runat="server" OnClick="Submit_Click" />&nbsp;
        <asp:Button ID="Reset" Text="Reset" OnClick="Reset_Click" runat="server" />
    </div>

    /* Back End Code
     * The back end code just adds the name of the ID of the button lblTarget
     */
        protected void cb1_CheckChanged(object sender, EventArgs e)
        {
            if (lblTarget.Text.Equals(lblTargetText))
            {
                lblTarget.Text = " cb1 ";
            }
            else
            {
                lblTarget.Text += " cb1 ";
            }
        }

        /*
        * Author: Matt Seigel
        * Name: Strip Tags
        * Version: v2.0.340
        * Relase Date: 9/24/2010
        * Contact: http://brokenbytes.info
        */
        $(document).ready(function () {
            // ***** START OPTIONS ***** //
            // Name of target textarea / input box
            var target = "#txtArea";
            // Boolean indicating wether to remove linebreaks or not
            var removeLinebreaks = true;
            // ****** END OPTIONS ****** //

            // Bind to the thing you want to check for pastes
            $(target).bind('paste', function (e) {
                // Calling Object
                var callingObject = $(this);
                // Get the original text in the target
                var originalText = $(this).val();
                // Get cursor information
                var cursorInfo = $(target).getSelection();
                // Set a very short timeout and set its callback to the function
                // stripping tags, the short timeout allows for the pasted text to be accessable
                setTimeout(function () { stripTags(callingObject, originalText, cursorInfo, removeLinebreaks) }, 1);
            });
        });
        /*
        * callingObject:       Calling object.
        * originalText:        The text inside the textarea before the paste.
        * cursorInfo:          Gets the information about the cursor. (location, etc)
        * removeLinebreaks:    true to remove linebreaks, false to ignore linebreaks
        */
        function stripTags(callingObject, originalText, cursorInfo, removeLinebreaks) {
            // Get the front part of the original text (part before the new text)
            var front = originalText.substring(0, cursorInfo.start);
            // Get the back part of the original text (part after the new text)
            var back = originalText.substring(cursorInfo.end);
            // Get the pasted text out of the new text
            var pasted = callingObject.val().replace(front, "").replace(back, "");
            // Remove tags from the pasted stuff
            pasted = pasted.replace(/(<[^<>]*>)/g, "");
            // Remove newline characters, if we want to.
            if (removeLinebreaks) {
                pasted = pasted.replace(/\n/g, "");
            }
            // Put the new text into the target
            $(callingObject).text(front + pasted + back);
        }

// Line 311
function mcecomment_init() {
    global $post;
    if (strpos(strtolower($_SERVER['HTTP_USER_AGENT']), "iphone") === false) {
        $loadJS = false;
        if (is_plugin_page()) {
        $loadJS = true;
        } else if (is_singular()) {
            if (comments_open() && ( !get_option('comment_registration') || is_user_logged_in() )) {
                $loadJS = true;
            }
        }
        if ($loadJS)
        	mcecomment_getInitJS();
    }
}

// Line 350
function mcecomment_loadCoreJS() {
    global $post, $mce_locale;
    if (is_singular() && (strpos(strtolower($_SERVER['HTTP_USER_AGENT']), "iphone") === false))
    {
        if (comments_open() && ( !get_option('comment_registration') || is_user_logged_in() )) {
            wp_enqueue_script('tiny_mce', get_option('siteurl') .
            	'/wp-includes/js/tinymce/tiny_mce.js', false, '20081129');
            wp_enqueue_script('tiny_mce_lang', get_option('siteurl') .
                '/wp-includes/js/tinymce/langs/wp-langs-' . $mce_locale . '.js',
                false, '20081129');
            wp_deregister_script('comment-reply');
            wp_enqueue_script( 'comment-reply', get_option('siteurl') .
                '/wp-content/plugins/' . plugin_basename ( dirname ( __FILE__ ) ) .
                "/comment-reply.dev.js", false, '20090102');
        }
    }
}

WordPress – MCEComments and Threaded Comments Fix

February 23rd, 2010 - 1 Comment

---

Edit: After further investigation it looks like the only real problem was problem number 2 (hidden field and iframe named the same). All you have to do is implement the fix for problem 2 discussed below and it should work fine.
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.

---

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

[ Tags ]: error, fix, javascript, MCEComments, problem, problems, threaded comments, TinyMCE, tinymcecomments, wordpress
[ Category ]: programming