How to Access the BE's controls within the TinyEditor

Topics: Controls
Feb 1, 2011 at 8:01 PM
Edited Feb 2, 2011 at 12:42 AM

Hi All!

In the admin/Posts/AddEntry.aspx there is a User Control named txtContent which holds the TinyEditor. In the admin/tinyMCE.ascx, the following JavaScript exists which is responsible for updating the Word Count as the user types in the TinyEditor:

        //Character count       
        theme_advanced_path: false,
        setup: function (ed) {
            ed.onKeyUp.add(function (ed, e) {

                var strip = (tinyMCE.activeEditor.getContent()).replace(/(<([^>]+)>)/ig, "");
                var words = strip.split(' ').length;
                var text = strip.split(' ').length + " Words.";
                tinymce.DOM.setHTML(tinymce.DOM.get(tinyMCE.activeEditor.id + '_path_row'), text);

            });
        }

I'd like to modify the code above to grab the value of a control residing in admin/Posts/AddEntry.aspx. A simple example is the txtTitle control. So here is the question:

How do I reference the txtTitle control inside the code above? First I need to know the TinyEditor's container. Then I need to refer to the container's txtTitle control. My JavaScript experience is lacking.

A better question would be is how to design the AddEntry.aspx so that I could write a code-behind to do what I want. I tried adding an onTextChanged event on the txtContent control but it would not fire.

Thanks!

Coordinator
Feb 2, 2011 at 11:13 AM

tinyMCE.ascx is also used when adding/editing Pages ... in addition to adding/editing Posts.  It's good to be aware of that so you don't write code for tinyMCE.ascx that is tailored for just one add entry, and fails when adding a Page.

In Add_Entry.aspx, you could add the following:

<script type="text/javascript">
	$(function() {
		var jItemTitle = $("#<%= txtTitle.ClientID %>");
	});
</script>

And then you could modify that code you posted from tinyMCE.ascx to do something like:

//Character count       
theme_advanced_path: false,
setup: function (ed) {
	ed.onKeyUp.add(function (ed, e) {

		/* NEW Part Start */
		if (typeof jItemTitle !== 'undefined' && jItemTitle.length > 0) {
			var itemTitle = $.trim(jItemTitle.val());
			alert("The title is: " + itemTitle);
		}
		/* NEW Part End */
	
		var strip = (tinyMCE.activeEditor.getContent()).replace(/(<([^>]+)>)/ig, "");
		var words = strip.split(' ').length;
		var text = strip.split(' ').length + " Words.";
		tinymce.DOM.setHTML(tinymce.DOM.get(tinyMCE.activeEditor.id + '_path_row'), text);

	});
}

(I added the part marked as "NEW Part").  It's untested, but *should* work.

Feb 2, 2011 at 11:29 PM

Hi Ben!

Thanks for getting me there.

For those who are interested, this code worked:


                function GetTitle() {
                    var title = document.getElementById('<%=txtTitle.ClientID %>').value;
                    return title;
                }