Click to See Complete Forum and Search --> : Help with HTML editor


jrthor2
07-09-2003, 11:00 AM
I got this html editor working, except that when you press the link button to insert a link, the link is not getting inserted. For example, when you put in http://www.zluth.org and you look at the code in the iframe that I am editing, the href="". f I put a / at the end of my link, the href="/". I have attached the code, I am not a javascript person.

Thanks.

Jonathan
07-09-2003, 01:59 PM
Can you please post the code, I can't determine the code because it is really weird in my text editor

jrthor2
07-09-2003, 02:02 PM
var idEdit = '';
var backgroundColor = "#d4d0c8";

function fncCommand(strCommand, strOption) {
if (isNormal(idEdit)) {
if (strOption == 'removeFormat') {
strCommand = strOption;
strOption = null;
}
if (strOption == null)
document.frames(idEdit).document.execCommand(strCommand);
else
document.frames(idEdit).document.execCommand(strCommand,'',strOption);
document.frames(idEdit).focus();
} else {
alert('Please switch to Normal Mode.')
}
document.frames(idEdit).focus()
}

function fncFormatBlock(sTag) {
if (isNormal(idEdit)) {
var objLink = fnGetElement(sTag, document.frames(idEdit).document.selection.createRange().parentElement())
if (objLink != null) {
fncCommand('formatblock','<p>');
} else {
fncCommand('formatblock','<' + sTag + '>');
}
} else {
alert('Please switch to normal mode.')
}
}

function fncCreateLink() {
if (document.frames(idEdit).document.selection.type == "Text") {
if (isNormal(idEdit)) {
var objLink = fnGetElement("A", document.frames(idEdit).document.selection.createRange().parentElement())
var strLink = prompt("Where do you want to link to?", objLink ? makeRel(objLink.href) : "http:\/\/")
if ((strLink != null) && (strLink != "http://")) fncCommand("CreateLink", strLink)
} else {
alert('Please switch to Normal Mode.')
}
} else {
document.frames(idEdit).focus()
}
}

function fnGetElement(strTag, objStart) {
while ((objStart != null) && (objStart.tagName != strTag))
objStart = objStart.parentElement;
return objStart;
}

function fncInit(iframeID) {
with (document.frames(iframeID).document) {
write("<html><head><link rel=\"stylesheet\" type=\"text/css\" href=\"designmode.css\"></head><body>" + eval(iframeID) + "</body></html>");
designMode='On'
}
}

function fncSwapModes() {
with (document.frames(idEdit).document) {
if (isNormal(idEdit)) {
body.innerText = makeRel(body.innerHTML)
body.style.backgroundColor = backgroundColor.toLowerCase( )
} else {
body.innerHTML = body.innerText
body.style.backgroundColor = "white"
}
}
document.frames(idEdit).focus()
}

function fncPreview(strSize) {
if (idEdit != '') {
document.all("idPreview").style.fontSize = strSize
if (isNormal(idEdit)) {
document.all("idPreview").innerHTML = document.frames(idEdit).document.body.innerHTML;
} else {
document.all("idPreview").innerHTML = document.frames(idEdit).document.body.innerText;
}
}
}

function saveToForm(formField, iframeID) {
if (isNormal(iframeID)) {
eval(formField + " = makeRel(document.frames('" + iframeID + "').document.body.innerHTML);")
} else {
eval(formField + " = makeRel(document.frames('" + iframeID + "').document.body.innerText);")
}
}

function isNormal(iframeID) {
if (document.frames(iframeID).document.body.style.backgroundColor == backgroundColor.toLowerCase( )) return false;
return true;
}

function setFocus(iframeID) {
idEdit = iframeID
}

function makeRel(sContent) {
var loc = new String (document.location);
var re = new RegExp(loc.substr(0, loc.lastIndexOf('/')+1), 'gi');
var stemp = sContent.replace(re, '')
re = loc.match(/http?:\/\/([^/]+)/gi)
stemp = stemp.replace(re, '')
stemp = stemp.replace(/ dir=ltr style=\"MARGIN-RIGHT: 0px\"/, '')
return stemp
}

document.write (' <map name="designMode">\n');
document.write (' <area alt="Bold" href="javascript:fncCommand(\'bold\');void(0);" shape="rect" coords="2, 0, 25, 26">\n');
document.write (' <area alt="Italic" href="javascript:fncCommand(\'italic\');void(0);" shape="rect" coords="26, 0, 50, 26">\n');
document.write (' <area alt="Underline" href="javascript:fncCommand(\'underline\');void(0);" shape="rect" coords="51, 0, 76, 26">\n');
document.write (' <area alt="Heading" href="javascript:fncFormatBlock(\'H1\');void(0);" shape="rect" coords="77, 0, 101, 26">\n');
document.write (' <area alt="Left Justify" href="javascript:fncCommand(\'justifyleft\');void(0);" shape="rect" coords="102, 0, 127, 26">\n');
document.write (' <area alt="Center" href="javascript:fncCommand(\'justifycenter\');void(0);" shape="rect" coords="128, 0, 151, 26">\n');
document.write (' <area alt="Right Justify" href="javascript:fncCommand(\'justifyright\');void(0);" shape="rect" coords="152, 0, 176, 26">\n');
document.write (' <area alt="Numbered List" href="javascript:fncCommand(\'insertorderedlist\');void(0);" shape="rect" coords="180, 0, 204, 26">\n');
document.write (' <area alt="Bullet List" href="javascript:fncCommand(\'insertunorderedlist\');void(0);" shape="rect" coords="205, 0, 226, 26">\n');
document.write (' <area alt="Outdent" href="javascript:fncCommand(\'outdent\');void(0);" shape="rect" coords="227, 0, 250, 26">\n');
document.write (' <area alt="Indent" href="javascript:fncCommand(\'indent\');void(0);" shape="rect" coords="251, 0, 273, 26">\n');
document.write (' <area alt="Create Link" href="javascript:fncCreateLink();void(0);" shape="rect" coords="278, 0, 303, 26">\n');
document.write (' <area alt="Switch Modes" href="javascript:fncSwapModes();void(0);" shape="rect" coords="307, 0, 334, 26">\n');
document.write (' </map>\n');

Jonathan
07-09-2003, 02:09 PM
Is this the line?

write("<html><head><link rel=\"stylesheet\" type=\"text/css\" href=\"designmode.css\"></head><body>" + eval(iframeID) + "</body></html>");

Jonathan
07-09-2003, 02:11 PM
It so... try this, just a shot..

write("<html><head><link rel='stylesheet' type='text/css' href='designmode.css'></head><body>" + eval(iframeID) + "</body></html>");

jrthor2
07-09-2003, 02:12 PM
I did not write the code. I belive that is the line for the iframe?? Line 39 has this in it

var strLink = prompt("Where do you want to link to?", objLink ? makeRel(objLink.href) : "http:\/\/")

which I thought dealt with the link.

P.S. you're suggestion did not work :-(

Jonathan
07-09-2003, 02:17 PM
Javascirpt starts counting at "0" so you will have to go one line down

jrthor2
07-09-2003, 02:18 PM
?? Not quite sure what you mean. what should i try next??

Jonathan
07-09-2003, 02:22 PM
If you planned it like this:

var something = new Array("something","somthing")

then... called for it later

something[1]
something[2]

it wouldn't work... because Arrays' are written like this (the above array contains invisibill numbers):

var something = new Array [2]
something[0]
something2[1]

etc... but let me look at the code... I found it.

jrthor2
07-09-2003, 02:24 PM
Ok, I'll wait for your fix. I don't know too much about javascript.

Thanks

Jonathan
07-09-2003, 02:25 PM
what is the link to the download of your editor

jrthor2
07-09-2003, 02:34 PM
I think I found out what it is doing, but not sure why, it seems squirrly to me.

If I enter a link outside of my site (www.google.com), it keeps the http:// in the href, but if I link to a page within my site, I need to link to it using /directoy/page, instead of using http://www.zluth.org/link.

seems wierd to me for it to work that way, but that is what is happening.

Here is where I got this script:

http://home.att.net/~codeLibrary/HTML/html_edit.htm

Jonathan
07-09-2003, 02:42 PM
If you do it in plain html then there should be no problem... if you just link to the site using this:

<a href="/blah/blah/blah.html">blah</a>

in order to link to outside sites you need to use the http://, or else it will think that is in your site...


Did you create that site? the one you linked to the first post?

jrthor2
07-09-2003, 02:46 PM
if you are talking about the www.zluth.org site, yes, I created that site. I posted another question about this same application where I have an iframe to add bible verses to a database and it works fine, but when I try to use the iframe to edit my content, it displays the content but I cannot edit it. I can highlight text and change the format of it, but cannot add anything to my post. Any ideas on that?

Jonathan
07-09-2003, 02:54 PM
SQL is just about as much as I know about SQL, the letters that make the word :)

I have a question for you... how did you make the tab like title for your voting, and how did you make the voting..

I will continue to look at the post... I will try and figure it out

jrthor2
07-09-2003, 03:01 PM
I got the Voting Poll code from here, it's asp code:

http://www.smashco.com/dev.asp#vb

my tab code looks like this (for the newsletter signup section):

<TABLE cellSpacing=0 cellPadding=0 width="120" border=0>
<TBODY>

<TD noWrap bgColor=330099 height=15 rowSpan=2> <FONT face=verdana
color=white size=-2>&nbsp;&nbsp;<b>Newletter Sign-Up</b></FONT></TD>
<TD height="15" vAlign=top><IMG height=15 alt=""
src="/images/tr14x15_1.gif" width=14></TD>
</TR>
</TABLE>
<table width="158" border="1" cellpadding="2" cellspacing="0" bordercolor="330099" bgcolor="d7d7ff">
<tr>

<td>
<form action="http://www.zluth.org/Maillist/newsletter_signup_thanks.asp" Method="Post">
<table width="100%" border="0" cellpadding="0" cellspacing="0" align="center">
<tr>
<td>
<table width="100%" border="0" cellpadding="2" cellspacing="1" align="center">
<tr>
<td bgcolor="d7d7ff"><p> <font face="Verdana" size="1" color="330099">E-Mail Address:<br>
<input type="text" name="Email" size="15" maxlength="255" style="color : #000000; background : #FFFFFF; border-top : 1px solid; border-bottom : 1px solid; border-left : 1px solid; border-right : 1px solid; font-family : Verdana,tahoma,Arial; font-size : 10px;">
<br>
First Name:<br>
<input type="text" name="Name_First" size="15" maxlength="255" style="color : #000000; background : #FFFFFF; border-top : 1px solid; border-bottom : 1px solid; border-left : 1px solid; border-right : 1px solid; font-family : Verdana,tahoma,Arial; font-size : 10px;">
<br>
Last Name:<br>
<input type="text" name="Name_Last" size="15" maxlength="255" style="color : #000000; background : #FFFFFF; border-top : 1px solid; border-bottom : 1px solid; border-left : 1px solid; border-right : 1px solid; font-family : Verdana,tahoma,Arial; font-size : 10px;">
<br>
<input type="radio" name="Join_Quit" value="Join" checked>
Subscribe<br>
<input type="radio" name="Join_Quit" value="Quit">
Unsubscribe <br>
<input type="submit" size="20" value="Go" style="color: #330099; background-color: #d7d7ff; border-top : 1px solid; border-bottom : 1px solid; border-left : 1px solid; border-right : 1px solid; font-family : Verdana,tahoma,Arial; font-size : 10px; font-weight: bold;">
</font></p>
</td>
</tr>
</table>
</td>
</tr>
</table>
</form>
</td>
</tr>
</table>

Jonathan
07-09-2003, 03:18 PM
Sorry, I have tried everything... but is just isn't working... I will let you know if I find anything out..

jrthor2
07-10-2003, 07:34 AM
Can anyone help with this problem? I can post/attach all of my code if the need be.

jrthor2
07-10-2003, 11:50 AM
I got it figured out. In my designmode.js file, I created a new funtion:

function fncInit2(iframeID) {
with (document.frames(iframeID).document) {
designMode='On'
}
}

instead of using this function:

function fncInit(iframeID) {
with (document.frames(iframeID).document) {
write("<html><head><link rel=\"stylesheet\" type=\"text/css\" href=\"designmode.css\"></head><body>" + eval(iframeID) + "</body></html>");
designMode='On'
}
}

All is working fine now.

Jonathan
07-10-2003, 11:55 AM
Thats good... sorry I couldn't help

jrthor2
07-10-2003, 11:58 AM
No problem, did you get my code i posted for those tabs? What do you think of my site (www.zluth.org)?

Jonathan
07-10-2003, 12:04 PM
I got an error...

Line 147
document.all.sponsorAdDiv.style is null or not an object.

And how did you get the links to not shrink (including the text) when you resize the browser?

jrthor2
07-10-2003, 12:09 PM
that error has to do with a script I have on my page, that is not included in the code I posted. You will have to get rid of that code, sorry, I just copied everything and pasted it.

Which links? On the nav bar on the left? If so, I just created a cascading style sheet and set up my links (hover, visited, etc) as the same font/size, etc. Not much to that

Jonathan
07-10-2003, 12:10 PM
No it was with the news I think... The scrolling news...

Jonathan
07-10-2003, 12:11 PM
Are you using microsoft access for your guestbook?

jrthor2
07-10-2003, 12:13 PM
you mean the links in the news? Same think, they are using a style in my stylesheet.

Yes, I am using Access for my guestbook.

Jonathan
07-10-2003, 12:15 PM
Oh, what is the css. I think there may be another part constructed within the javascript that is linked to the links

darn, I can't do that now... :)
dont have ms access

jrthor2
07-10-2003, 12:18 PM
here is the sytle in my stylesheet for the news:

.news { font-size: 10px;}
a.newslink { font-family: Arial, Helvetica, sans-serif; color: #330099; font-size: 10px; text-decoration: none}
a.newslink:hover { font-family: Arial, Helvetica, sans-serif; font-size: 10px; color: 990033; text-decoration: underline}
a.newslink:visited { font-family: Arial, Helvetica, sans-serif; font-size: 10px; color: 990033; text-decoration: none}

Yeah, we had that problem earlier too until our hosting company added asp/Access to our plan. Unfortunately, the News section is still using cgi and text files for the backend, but I might look at putting everything into an Access database when I have the time.

jrthor2
07-10-2003, 12:19 PM
Actually, after looking at the script for the news, this is what the fonts/sizes are:

v_font='arial,helvetica,sans-serif';
v_fontSize='12px';
v_fontSizeNS4='12px';
v_fontWeight='normal';
v_fontColor='#330099';
v_textDecoration='none';
v_fontColorHover='#990033';// | won't work
v_textDecorationHover='underline';// | in Netscape4
v_bgColor='#d7d7ff';//set [='transparent'] for transparent

Jonathan
07-10-2003, 12:21 PM
What is link 148?

jrthor2
07-10-2003, 12:25 PM
Where is that at??

Jonathan
07-10-2003, 12:26 PM
I mean line... sorry

jrthor2
07-10-2003, 12:29 PM
What is on line 148? Line 148 of what code?

Jonathan
07-10-2003, 12:33 PM
Can you e-mail me at Creatormaster@aol.com and copy and past the entire code so that i can figure it out? If not, then would you post the js. code that is around line 148...

jrthor2
07-10-2003, 12:34 PM
Which js code? the code for the scrolling news?

Jonathan
07-10-2003, 12:35 PM
no... do you have any numbered lines for your front page or your index.html

jrthor2
07-10-2003, 12:40 PM
Well, if you mean you are copying my code from the "view Source" of my site, line 148 looks like it is:

if(!ns && !ie && !w3) return;

Is that the line you are talking about?

Jonathan
07-10-2003, 12:52 PM
I am not sure... it just says this...

Line 147
document.all.sponsorAdDiv.style is null or not an object.

jrthor2
07-10-2003, 12:59 PM
I think I might know why you are getting this error (after reading it a little closer). You need to have this style right above that code:

<style type="text/css">
<!--
sponsorAdDiv {position:absolute; height:1; width:1; top:0; left:0;}
-->
</style>

Jonathan
07-10-2003, 02:05 PM
yeah, maybe