Inserting character into textarea of opener from a popup - advice

[ianhi]

Hi all,

I'm trying to create a simple 'insert special characters' function. The idea is that a user has a textarea in the main window and a button. When they press the button, a popup is opened that shows a selection of special characters. When they click on a character, it is inserted at the cursor point in the main window text area.

So far it works perfectly in Firefox but in IE I cannot get the javascript to recognise the textarea. The full code follows at the bottom but the problem lies in the fact that document.selection.createRange().text; doesnt work when called from a popup and I cannot see how to do it. Any thoughts?

Ta very much, IH

Full code:
var insertHTML = {
buildUpdate: function(id) {
if(self.opener) {
var element = self.opener.document.getElementById(id);
} else {
var element = document.getElementById(id);
}
return element;
},

storeCaret: function(selec,id,type) {
if (isMozilla) {
// Firefox
// code ommited for clarity

} else {
oField = insertHTML.buildUpdate(id);
if(self.opener) {
//WHAT TO PUT HERE
} else {
var str = document.selection.createRange().text;
}
if (str.length>0) {
// if we have selected some text,
var sel = document.selection.createRange();
if (type) {
// special character
sel.text = "&" + selec + ";";
} else {
sel.text = "<" + selec + ">" + str + "</" + selec + ">";
}
sel.collapse();
sel.select();
} else {
oField.focus(oField.caretPos);
oField.focus(oField.value.length);
oField.caretPos = document.selection.createRange().duplicate();

var bidon = "%~%"; // needed to catch the cursor position with IE
var orig = oField.value;
oField.caretPos.text = bidon;
var i = oField.value.search(bidon);

if (type) {
// special character
oField.value = orig.substr(0,i) + "&" + selec + ";" + orig.substr(i, oField.value.length);
} else {
oField.value = orig.substr(0,i) + "<" + selec + "></" + selec + ">" + orig.substr(i, oField.value.length);
}

var r = 0;
for(n = 0; n < i; n++) {
if(regexp.test(oField.value.substr(n,2)) == true)
{
r++;
}
};
if (type) {
// special character
pos = i + 1 + selec.length - r;
} else {
pos = i + 2 + selec.length - r;
}

// re-format the textarea & move the cursor to the correct position
var r = oField.createTextRange();
r.moveStart('character', pos);
r.collapse();
r.select();
//close the popup if open
if (self.opener) {
window.close(this);
}
}
}
},
}

 

[MissouriTiger]

Instead of using a standard popup, you might create a "popup" using activex or java.

Or better yet, try using a CSS layer and make it visible when needed. That ought to solve your problem, since technically all of the functionality would be in the same page. Options for styling the appearance of the layer are potentially limitless.

Let me know what approach you take & how you solve this problem. I'm very curious to see how things turn out.





Greg Norris
Software Developer & all around swell guy

http://www.GregNorris.net

__________________________________________________
Constructed from 100% recycled electrons.

 

[ianhi]

For some reason it never occured to me to put all the functionality into a CSS layer, having looked at how FCK editor and similar do it I was focussed on a JS solution.

As it happens I (finally) solved it, but next time will try your CSS suggestion.
So, heres the full code I used, tested on a PC with FF and IE6, no idea what would happen on a Mac though! To work you need to create a page in the same folder as the js file and then call either like this:

onClick="insertHTML.storeCaret('i', 'title'); return false"
where i is the HTML tag you want to get inserted (e.g. i will automatically install <i></i> around your text and title is the id of the field into which you want the tags to go.

OR

onClick="insertHTML.openSCWindow('components/com_abstracts/js/specialchar.php'); return false" from the main window to open your popup where the argument passed is the URL to the file to appear in your popup. Then from the popup simply add:
onClick="insertHTML.storeCaret('chi','title','sChar'); return false" to your link.
Here, chi is the special character I want to be inserted (will insert as &chi, title is the ID of the field into which the insertion should be made and sChar is just to ensure the type variable gets set in the storeCarat function.

A long post, but it might be helpful to someone. Cheers, ian.

--- (long) code follows ---

var insertHTML = {
buildUpdate: function(id) {
if(self.opener) {
var element = self.opener.document.getElementById(id);
} else {
var element = document.getElementById(id);
}
return element;
},

openSCWindow: function(url) {
//opens up the special characters popup window

var newwindow = '';

if (!newwindow.closed && newwindow.location) {
newwindow.location.href = url;
} else {
newwindow=window.open(url,'specialchars','height=200,width=210');
if (!newwindow.opener) newwindow.opener = self;
}
if (window.focus) {
newwindow.focus()
}
return false;
},

storeCaret: function(selec,id,type) {
if (isMozilla) {
// Firefox
oField = insertHTML.buildUpdate(id);
objectValue = oField.value;
objectValueStart = objectValue.substring( 0 , oField.selectionStart );
objectValueEnd = objectValue.substring( oField.selectionEnd , oField.textLength );
objectSelected = objectValue.substring( oField.selectionStart ,oField.selectionEnd );

if (type) {
// special character
oField.value = objectValueStart + "&" + selec + ";" + objectSelected + objectValueEnd;
} else {
oField.value = objectValueStart + "<" + selec + ">" + objectSelected + "</" + selec + ">" + objectValueEnd;
}
oField.focus();
if (type) {
// special character
oField.setSelectionRange(objectValueStart.length + selec.length + 2,objectValueStart.length + selec.length + 1);
} else {
oField.setSelectionRange(objectValueStart.length + selec.length + 2,objectValueStart.length + selec.length + 2);
}
//close the popup if open
if (self.opener) {
window.close(this);
}
} else {
oField = insertHTML.buildUpdate(id);
if(self.opener) {
var str = opener.document.selection.createRange().text;
} else {
var str = document.selection.createRange().text;
}
if (str.length>0) {
// if we have selected some text,
if(self.opener) {
var sel = opener.document.selection.createRange();
} else {
var sel = document.selection.createRange();
}
if (type) {
// special character
sel.text = "&" + selec + ";";
} else {
sel.text = "<" + selec + ">" + str + "</" + selec + ">";
}
sel.collapse();
sel.select();
} else {
oField.focus(oField.caretPos);
oField.focus(oField.value.length);
if(self.opener) {
oField.caretPos = opener.document.selection.createRange().duplicate();
} else {
oField.caretPos = document.selection.createRange().duplicate();
}
var bidon = "%~%"; // needed to catch the cursor position with IE
var orig = oField.value;
oField.caretPos.text = bidon;
var i = oField.value.search(bidon);
if (type) {
// special character
oField.value = orig.substr(0,i) + "&" + selec + ";" + orig.substr(i, oField.value.length);
} else {
oField.value = orig.substr(0,i) + "<" + selec + "></" + selec + ">" + orig.substr(i, oField.value.length);
}
var r = 0;
for(n = 0; n < i; n++) {
if(regexp.test(oField.value.substr(n,2)) == true) {
r++;
}
};
if (type) {
// special character
pos = i + 1 + selec.length - r;
} else {
pos = i + 2 + selec.length - r;
}
// re-format the textarea & move the cursor to the correct position
var r = oField.createTextRange();
r.moveStart('character', pos);
r.collapse();
r.select();
//close the popup if open
if (self.opener) {
window.close(this);
}
}
}
},
}