This project has moved. For the latest updates, please go here.

Selector to parent window jHtmlEditor instance?

Feb 19, 2010 at 10:02 PM
Edited Feb 19, 2010 at 10:04 PM

How do you get a reference to the jHtmlEditor API instance from a popup window opened from the current page?  I can get a reference to the textbox the editor is attached to, but I want to call the pasteHtml function on the jHtmlEditor instance at the cursor location.  I don't want to modify the text of the underlying textarea directly.

So far I have this in the parent page containing the jHtmlEditor instance (this is a slight modification of ColorPickerMenu.htm in the sample included with the download).  I tried creating a local page variable with the instance that clicked the custom toolbar button, but I can't find a reference to that from the popup page either.

<script type="text/javascript">
        var HTMLAPI; //try to access this from popup
        $(function() {
            $("#Textarea1").htmlarea({
                toolbar: [["html"],
                            ["forecolor"],  // <-- Add the "forecolor" Toolbar Button
                            ["bold", "italic", "underline"],
                            ["p", "h1", "h2", "h3"],
                            ["link", "unlink"],
                            [{
                                css:"imagegallerybutton",
                                text:"Image Gallery",
                                action:function(btn) {
                                    var url = 'PickFile.htm';
                                    HTMLAPI = $(this);
                                                            var gallery = window.open(url,'gallery','width=700,height=600,toolbars=0,resizable=1');
                                                            gallery.focus();    
                                                        }
                            }]
                        ]
                });
        });
    </script>

 

Here is my popup page in full:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Pick a file</title>
    <script type="text/javascript" src="scripts/jquery-1.3.2.min.js"></script>
</head>
<body>
    <script type="text/javascript">
$(document).ready(function() {
    $('#insert').click(function(){
        var htmlText = $('#html').val();
        var openerID = '#Textarea1';
        var $parent = $(window.opener.document); //this is the root of the parent window document, appears correct in Firebug
        var $editor = $(window.opener.document).find(openerID); //this is the textarea instance, appears correct in Firebug
        $parent.HTMLAPI.pasteHTML(htmlText);
    });
});
    </script>
    <input id="html" type="text" value="Some <b>html</b>" />
    <input id="insert" type="button" value="Insert" />
</body>
</html>

 

I have successfully changed $editor to point to a selector of another non-HtmlEditor on the parent page and updated it's value.  So I know I have a good reference to elements on the parent page.  $parent.HTMLAPI is 'undefined' from the popup.  Any ideas how to reference the API of the jHtmlEditor opened from the parent window custom toolbar button?

Thanks,

Michael Lang

Feb 21, 2010 at 4:49 AM

I found a workaround; although in my opinion, it is not an ideal solution.  The calling page (the one with the editor instance(s)) needs the following change.  The lines to accomplish each step are highlighted in purple

1) define a page level variable to hold html area instances.

2) On button click add the current instance to the page level variable as an array member.  If your selector creating the 'htmlarea' does not resolve to one entity, then you may want to alter this line to get the id of the textarea attached to this editor and put that as the array key.  You don't want multiple editors created by class name, all overriding a given instance in the array.  Otherwise you will end up with popups opened from one editor putting content into a different editor.

var jHtmlArea_API = new Object(); //step 1
$(document).ready(function(){
        $("#Textarea1").htmlarea({
                toolbar: [["html"],
                            ["forecolor"],  // <-- Add the "forecolor" Toolbar Button
                            ["bold", "italic", "underline"],
                            ["p", "h1", "h2", "h3"],
                            ["link", "unlink"],
                            [{
                                css:"imagegallerybutton",
                                text:"Image Gallery",
                                action:function(btn) {
                                    jHtmlArea_API['#Textarea1'] = $(this); //step 2
                                    var url = 'PickFile.htm'; //TODO: add selector to url querystring
                                    var gallery = window.open(url,'gallery','width=700,height=600,toolbars=0,resizable=1');
                                    gallery.focus();    
                                }
                            }]
                        ]
                });
    });

Then on the popup page (will be an image gallery in my case), hack your way to down to the editor instance methods.

$(document).ready(function() {
    $('#insert').click(function(){
        var htmlText = $('#html').val();
        var openerID = '#Textarea1'; //TODO: get from the url
        var $parent = $(window.opener);
        $parent[0].jHtmlArea_API[openerID][0].pasteHTML(htmlText);
    });
});

Aug 6, 2010 at 12:53 AM
mlang great script was exactly what i needed and very easy to implement with your instruction. Thx mate. Only problem that has come up for me so far is it does not work in Safari5 or Chrome5. :( Works great in IE8 and Firefox3!!!
Aug 26, 2010 at 8:52 PM

Did you find out why it did not work?  Which line?