Jump to content

Wysiwyg Editor

ecluley

By ecluley
in JavaScript

Recommended Posts

ecluley Newbie

ecluley

Posted
Posted

Hi,I have a small problem and was wondering if anyone could give me some advice about it.I am building a WYSIWYG text editor using JavaScript and a bit of ASP. I have built the basic functions but am having problems adding a way of inserting an image. I have read many examples which bring up a prompt box and the user types in the image location and it inserts it but I was wanting something a little more sophisticated with thumbnails of all available images coming up in a div layer. When the layer comes up it displays fine but upon clicking to insert an image absolutly nothing happens. I get the feeling that the iframe i'm inserting into is no longer focused but am unable to work out how to do this.I think the problem maybe coming in whith my insert image function:

function image(imagePath){  document.getElementById("rte").contentWindow.document.focus();  document.getElementById('rte').execCommand('InsertImage', false, imagePath);  }

or my div layer:

Insert Image<input onmouseover="this.style.cursor='pointer';" onmouseout="this.style.cursor='default';" type="button" onclick="displayImagePicker('true');" ID="pic" value=""><input type = "text" id="imgpath"><div id="imagePicker" class="imagePicker">Choose an image to insert...<br><table><tr><% dim imagePath, formatedPathfor i = 1 to 10	imagePath = "http://www.umbrellamembers.co.uk/users/" & usr & "/"	imagePath = imagePath & "img" & i & ".jpg"	formatedPath = "<td><button onclick=" & chr(34) & "image('" & imagePath & "');" & chr(34) & " width = 50 src = '" & imagePath & "'></td>"	Response.write(formatedPath)next%></tr></table><input type="button" onclick="displayImagePicker('false');" ID="closeImagePicker" value="Cancel"><br></div>

My full code is as follows and includes a few other things which mostly work fine.

<html><head><script src="201a.js" type="text/javascript"></script><script src="imagePicker.js" type="text/javascript"></script><style>#btnB{  font-weight: bolder;}#btnI{  font-style: italic;}#btnU{  text-decoration: underline;}.imagePicker{	visibility:hidden;	display:none;	position:absolute;	background:#FFF;	border:solid 1px #CCC;	padding:4px;	z-index:999;	filter:	progid:DXImageTransform.Microsoft.Shadow(color=#D0D0D0,direction=135);}</style><script type="text/javascript">  var obj;function Init(){  obj = document.getElementById("rte");  obj.contentWindow.document.designMode = "On";  //obj.contentWindow.document.contentEditable = "True";}function RTEDo(name){  obj.contentWindow.document.execCommand(name, false, null);  document.getElementById("rte").focus();}function RTEtext(name){  obj.contentWindow.document.execCommand("fontname" , false, name);  document.getElementById("rte").focus();}function image(imagePath){  document.getElementById("rte").contentWindow.document.focus();  document.getElementById('rte').execCommand('InsertImage', false, imagePath);  }function RTEconvert() {   var iframe_window = window.frames["rte"];  var iframe_body_html = iframe_window.document.getElementsByTagName("body")[0].innerHTML;  document.getElementById("text").value = iframe_body_html; } function displayImagePicker(val){	var display = val	if(display=="true"){				var vis = "visible"		var disp = "block"	}else{		var vis = "hidden"		var disp = "none"	}		document.getElementById('imagePicker').style.visibility=vis		document.getElementById('imagePicker').style.display=disp}</script></head><body onLoad="Init();"><p><!--#include file="header.asp"--></p><table cellspacing = 0><tr bgcolor="#990000" valign="center"><td valign="centre" halign="center"><input type="image" src="bold.gif" name="btnBold" value="B" id="btnB" onClick="RTEDo('bold');" /><input type="image" src="italic.gif" name="btnItalic" id="btnI" value="I" onClick="RTEDo('italic');" /><input type="image" src="underline.gif" name="btnUnderline" id="btnU" value="U" onClick="RTEDo('underline');" /><select><option onclick="RTEtext('times');">Times New Roman</option><option onclick="RTEtext('Tahoma');">Tahoma</option><option onclick="RTEtext('Arial');">Arial</option><option onclick="RTEtext('Verdana');">Verdana</option></select>Colour<input type="hidden" ID="input_field_1" value=""><input onmouseover="this.style.cursor='pointer';" onmouseout="this.style.cursor='default';" type="text" onclick="showColorGrid2('input_field_1','sample_1');" ID="sample_1" size="1" value=""><div id="colorpicker201" class="colorpicker201"></div>Insert Image<input onmouseover="this.style.cursor='pointer';" onmouseout="this.style.cursor='default';" type="button" onclick="displayImagePicker('true');" ID="pic" value=""><input type = "text" id="imgpath"><div id="imagePicker" class="imagePicker">Choose an image to insert...<br><table><tr><% dim imagePath, formatedPathfor i = 1 to 10	imagePath = "http://www.umbrellamembers.co.uk/users/" & usr & "/"	imagePath = imagePath & "img" & i & ".jpg"	formatedPath = "<td><button onclick=" & chr(34) & "image('" & imagePath & "');" & chr(34) & " width = 50 src = '" & imagePath & "'></td>"	Response.write(formatedPath)next%></tr></table><input type="button" onclick="displayImagePicker('false');" ID="closeImagePicker" value="Cancel"><br></div><input type="image" src="left.gif" name="btnLeft" value="L.." id="btnLeft" onClick="RTEDo('justifyleft');" /><input type="image" src="center.gif" name="btnCenter" value=".C." id="btnCenter" onClick="RTEDo('justifycenter');" /><input type="image" src="right.gif" name="btnRigth" value="..R" id="btnRight" onClick="RTEDo('justifyright');" /><input type="image" src="indent.gif" name="btnCenter" value=".C." id="btnIndent" onClick="RTEDo('indent');" /><input type="image" src="outdent.gif" name="btnRigth" value="..R" id="btnOutdent" onClick="RTEDo('outdent');" /><input type="image" src="cut.gif" name="btnCut" value="Cut" id="btnCut" onClick="RTEDo('cut');" /><input type="image" src="copy.gif" name="btnCopy" value="Copy" id="btnCopy" onClick="RTEDo('copy');" /><input type="image" src="paste.gif" name="btnPaste" value="Paste" id="btnPaste" onClick="RTEDo('paste');" /></td></tr><tr bgcolor="#ff9900" valign="center"><td align="center"><form method="POST" action="processHTML.asp" onsubmit = "RTEconvert();"><table bgcolor = "#ffffff"><tr><td width="700px"><iframe width="100%" name="rte" id="rte"></iframe></td></tr></table><input type="hidden" id="text" name="text"><input type ="submit" value = "Submit"></form></td></tr></table><% end if %></body>

Wonder if anyone has any advice or links to good tutorials about how to do this?ThanksEwen

Link to comment
Share on other sites
justsomeguy w3schools Guru

justsomeguy

Posted
Posted

"image" might be a reserved word. Change your function name to something else. You're focusing the RTE element differently in the image function then you are elsewhere, make sure it's actually receiving focus. You might want to use a lowercase insertimage for the command, I'm not sure if that's case sensitive or not.

Link to comment
Share on other sites
ecluley Newbie

ecluley

Posted
  • Author
Posted

Thanks for your quick response.I did originally think that that maybe the problem but had at first tried a different name for the function- RTEinsertImage. I tried changing everything back to this but the same problem.When i click the button to bring up the DIV for the image selector the iframe becomes unfocused. I then click back in the iframe, returning the cursor to the correct place but when I click to actually insert the image the iframe unfocused and nothing else happens.The focus functions I have are different but this was simply because I was testing different ways to see if it made a difference. What is the correct code for focusing my iframe? every tutorial and website says something different and I just can't really get any focus commands to work at all.Hope you can help, I am getting very dishartened with this roject- possibly bit off a little more than I can chew!Thanks againEwen

Link to comment
Share on other sites
ecluley Newbie

ecluley

Posted
  • Author
Posted

ah dear, i am a bell end!I found the problem, i simply wasn't referencing the iframe correctly- by referencing the actual frame rather than the document within i think?!I used document.getElementById("rte").execCommand(insertimage, false, imagePath)rather thandocument.getElementById('rte').contentWindow.document.execCommand(insertimage, false, imagePath)Thanks for the suggestions, made me look over my code and a few tutorials.I am a total javascript noob :)ta

Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.

Go to topic listing
×
×
  • Create New...