PDA

View Full Version : Select image from layer, insert into iframe

Dominick
11-18-2003, 08:12 PM
Hello and thanks so much in advance for your help.

I am trying to create a rich text/HTML editor for late model IE only. I have most of the particulars worked out but I'm having trouble with adding emoticons into the editable area, which is an iframe.

Here's the background:

1) compose.html contains the editor and related javascript.

2) smileys.html is the source file for a layer that shows the emoticons available for adding to the message. This file contains a function that should add the selected emoticon to the edit field when it is clicked.

3) smileyspop.html is the source file for a popup that shows the emoticons available for adding to the message. This also has a function that should add the selected emoticon to the edit field when it is clicked.

My problem is that when trying to add an image via the layer, I get an error. When trying to add via the popup, it is successful.

I think my problem lies in the way I am referring to the editing field in the function, and it's probably a simple fix, but I'm lost.

Any advice would be greatly appreciated.

Here's a link to a demo. (http://www.geocities.com/dominickpagano/editor/compose.html)


=========================================

compose.html code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html><head><title>Text Editor</title></head>
<body><br><div align="center">
<iframe id="testFrame" style="position: absolute; visibility: hidden; width: 0px; height: 0px;"></iframe>
<script language="javascript" type="text/javascript">
<!--
var viewMode = 1; // WYSIWYG
var rng;

//Function to format text in the text box
function FormatText(command, option) {
if (command == "addsmiley") {
parent.command = command;
buttonElement = document.getElementById(command);
document.getElementById("smileypalette").style.left = getOffsetLeft(buttonElement) + "px";
document.getElementById("smileypalette").style.top = (getOffsetTop(buttonElement) + buttonElement.offsetHeight) + "px";
if (document.getElementById("smileypalette").style.visibility == "hidden")
document.getElementById("smileypalette").style.visibility="visible";
else {document.getElementById("smileypalette").style.visibility="hidden";}}}

//Function to add image
function AddImage() {
imagePath = prompt('Enter Image URL:', 'http://');
if ((imagePath != null) && (imagePath != "")) {
document.getElementById("edit").contentWindow.focus()
document.getElementById("edit").contentWindow.document.execCommand('InsertImage', false, imagePath);}

document.getElementById("edit").contentWindow.focus()}

// Begin function to open pop up window for smileys
function insertSmiley() {
var rndURL = (1000*Math.random());
var url = "smileyspop.html";
h=90;
w=240;
window.open(url,'smiley','width='+w+',height='+h+',top='+(screen.height-h)/2 +',left='+(screen.width-w)/2+',location=0,directories=0,status=no,menubar=no,scrollbars=no,resizable=no');}
// End function to open pop up window for smileys

function getOffsetTop(elm) {
var mOffsetTop = elm.offsetTop;
var mOffsetParent = elm.offsetParent;

while(mOffsetParent){
mOffsetTop += mOffsetParent.offsetTop;
mOffsetParent = mOffsetParent.offsetParent;}

return mOffsetTop;}

function getOffsetLeft(elm) {
var mOffsetLeft = elm.offsetLeft;
var mOffsetParent = elm.offsetParent;

while(mOffsetParent) {
mOffsetLeft += mOffsetParent.offsetLeft;
mOffsetParent = mOffsetParent.offsetParent;}

return mOffsetLeft;}

function Start() {
//write html
writeRTE();}

function writeRTE() {
document.writeln('<form name="c_compose">');
document.writeln('<table border="0" cellpadding="2" cellspacing="0" width="675">');
document.writeln('<tr id="toolbar">');

// new insert smiley
document.writeln('<td><div id="addsmiley"><a href="#" style="font-family: verdana, geneva, arial, helvetica, sans-serif; font-size: 11px; font-weight:bold; color: #003366;" title="Insert Smiley." onClick="FormatText(\'addsmiley\', \'\')">Insert Smiley via Layer</a></td>');

document.writeln('<td><a href="#" style="font-family: verdana, geneva, arial, helvetica, sans-serif; font-size: 11px; font-weight:bold; color: #003366;" title="Insert Smiley." onClick="insertSmiley();">Insert Smiley via Popup</a></td></tr></table>');

document.writeln('<iframe id="edit" name="editArea" style="height:220px; width=678px; padding:0;"></iframe>');

document.writeln('<iframe id="colorpalette" height="120px;" width="165px;" src="palette.html" style="visibility:hidden; position: absolute; left: 0px; top: 0px;"></iframe>');

document.writeln('<iframe src="smileys.html" name="smileypalette" id="smileypalette" style="visibility:hidden; position: absolute; left: 0px; top: 0px; height:161px; width:115px;"></iframe>');

setTimeout("enableDesignMode()", 10);

document.writeln('</form>');}

function enableDesignMode() {
frames.edit.document.designMode = "On";}
// -->
</script>

<script language="javascript" type="text/javascript">
<!--
Start();
//-->
</script>
</div></body></html>


=========================================

smileys.html code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html><head><title>Add a Smiley</title>

<script language="javascript" type="text/javascript">
function AddSmiley(imagePath){
imagePath = imagePath
document.getElementById("edit").contentWindow.focus()
document.getElementById("edit").contentWindow.document.execCommand('InsertImage', false, imagePath);}
// -->
</script>

</head>

<body bgcolor="#eeeeee" topmargin="0" leftmargin="0">
<table border="0" cellpadding="4" cellspacing="1" width="100%">
<tr bgcolor="#ffffff">
<td align="center"><img src="smiley_01.gif" width="17" height="17" border="0" alt="[:)]" OnClick="AddSmiley('smiley_01.gif')" style="cursor: pointer; cursor: hand;"></td>
<td align="center"><img src="smiley_02.gif" width="17" height="17" border="0" alt="[:oops:]" OnClick="AddSmiley('smiley_02.gif')" style="cursor: pointer; cursor: hand;"></td>
<td align="center"><img src="smiley_03.gif" width="17" height="17" border="0" alt="[;)]" OnClick="AddSmiley('smiley_03.gif')" style="cursor: pointer; cursor: hand;"></td>
</tr>
</table>
</body></html>


=========================================

smileyspop.html code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html><head><title>Add a Smiley</title>
<script language="javascript" type="text/javascript">
<!--
function AddSmiley(imagePath){
imagePath = imagePath
window.opener.document.getElementById("edit").contentWindow.focus()
window.opener.document.getElementById("edit").contentWindow.document.execCommand('InsertImage', false, imagePath);
window.close();
}
// -->
</script>
</head>

<body bgcolor="#eeeeee" topmargin="0" leftmargin="0">
<table border="0" cellpadding="4" cellspacing="1" width="100%">
<tr bgcolor="#ffffff">
<td align="center"><img src="smiley_01.gif" width="17" height="17" border="0" alt="[:)]" OnClick="AddSmiley('smiley_01.gif')" style="cursor: pointer; cursor: hand;"></td>
<td align="center"><img src="smiley_02.gif" width="17" height="17" border="0" alt="[:oops:]" OnClick="AddSmiley('smiley_02.gif')" style="cursor: pointer; cursor: hand;"></td>
<td align="center"><img src="smiley_03.gif" width="17" height="17" border="0" alt="[;)]" OnClick="AddSmiley('smiley_03.gif')" style="cursor: pointer; cursor: hand;"></td></tr>
</table>
</body>
</html>
adios
11-18-2003, 08:20 PM
Just a quick guess...

function AddSmiley(imagePath){
imagePath = imagePath
parent.document.getElementById("edit").contentWindow.focus()
parent.document.getElementById("edit").contentWindow.document.execCommand('InsertImage', false, imagePath);}


:confused:
Dominick
11-18-2003, 08:30 PM
WOW! Thanks for the fast reply adios.

I did refer to "parent" at one point, but that didn't work either, so I suppose there were other issues with my function at that time.

This did the trick - thanks so much.

Dominick
adios
11-18-2003, 08:37 PM
You're welcome. Wish I could take credit for it. ;)

Firebird JS console:

Error:document.getElementById("edit") has no properties

(old NS way of telling you there's no object of that description)