Wysiwyg For Begginers! - Dev Articles

Dev Articles Community Forums Sponsor:

August 14th, 2002, 03:10 AM

Ben Rowe

Guest

Posts: n/a
Time spent in forums:
Reputation Power:

Wysiwyg For Begginers!

Ok, we have all read the article from mytch about the WYSIWYG editor. Everyone keeps on posting the same questions about it. SO what ive done, ive taked the to most common questions and put it in this thread! Also if you didnt realise, we have a search option, in the forum, and if you type in wysiwyg, you get half a million threads back!

Ok, the first question.

Help! Toggle mode doesnt work!

This is because you have a form, that is above the wysiwyg editor. If you want to use <form> tags on the same page, they must be above or below the editor.
Like these examples.

<form>
....
</form>

{wysiwyg editor}

OR

{wysiwyg editor}

<form>
....
</form>

NOT

<form>
{wysiwyg editor}
</form>

2nd Question.

How do i save the data into a database or a file?

Easy! make sure you havent renamed anything in the editor.

and paste this code BELOW the editor.

<form action="print_script.php" method="post">
<script language="JavaScript">
function getCode()
{
var src = iView.document.body.innerHTML;
document.all.strValue.value = src;
}
</script>
<input type="hidden" name="strValue">
<input type="button" onClick="getCode();" value="update">
<input type="submit" name="submit" value="upload to DB">
</form>

THEN on the print_script.php page, all you have to do is

echo $_POST['strValue'];

or insert it into a database or what ever

now that we have that cleared up. I can rest in peace.

August 14th, 2002, 03:55 AM

w0lverine

Contributing User

Join Date: Aug 2002

Location: Paris, France

Posts: 32

Time spent in forums: < 1 sec
Reputation Power: 7

Miss some points but still good to make it clear

__________________
who needs to know who i am ?

August 14th, 2002, 08:06 PM

Ben Rowe

Guest

Posts: n/a
Time spent in forums:
Reputation Power:

I just covered the two most asked questions

August 14th, 2002, 08:17 PM

fakker

The calm b4 the storm

Join Date: Jul 2002

Location: Manchester, UK

Posts: 404

Time spent in forums: < 1 sec
Reputation Power: 7

maybe you could also add about the paragraph spacing...?
when you press the "return" key, it adds a </p> rather than a <BR> which looks nicer

I have not tried this, but I think if you add a <div> tag at the beginning of the iView window code, it will add a <br> rather than a <p> .... thus making only a single space rather than a double line space??

__________________
Matt 'Fakker' Facer

mattfacer.com

August 14th, 2002, 08:31 PM

w0lverine

Contributing User

Join Date: Aug 2002

Location: Paris, France

Posts: 32

Time spent in forums: < 1 sec
Reputation Power: 7

Yes it works, but tends to disapear when u insert a table or something that will close the <div> tag

The best way is to learn to do shift+enter

August 14th, 2002, 08:44 PM

Ben Rowe

Guest

Posts: n/a
Time spent in forums:
Reputation Power:

like in most windows wysiwyg editors, if you hit enter, it adds a <p> tag and if you hit shift+enter it ads a <br> tag.

August 14th, 2002, 09:03 PM

fakker

The calm b4 the storm

Join Date: Jul 2002

Location: Manchester, UK

Posts: 404

Time spent in forums: < 1 sec
Reputation Power: 7

yeah, we know that, but our client "Joe Bloggs" doesnt know that!!
surely we can automate this to only add a <BR>?

August 16th, 2002, 11:19 PM

Joe4JC

The name's Joe. Yours?

Join Date: Aug 2002

Location: Lurking in the shadows...

Posts: 147

Time spent in forums: < 1 sec
Reputation Power: 7

Hey, if anybody wants them, I have a bunch of good tips for using the editor!

Example: Wanna know how to have a form at the top of the editor AND a submit button at the bottom?

Cheers,
Joe of 4Life

__________________
Check out 4Life today!

August 16th, 2002, 11:56 PM

Ben Rowe

Guest

Posts: n/a
Time spent in forums:
Reputation Power:

Joe4JC, if you wanted to do something like that you would need to use javascript

<form>
<input>
<input>
<input>
</form>
editor
<form>
<input>
<input>
<input>
</form>
you would need some javascript to grap the data from the top form and place it in hidden inputs down the bottom, when the submit button is pressed

#10

August 17th, 2002, 01:04 AM

Joe4JC

The name's Joe. Yours?

Join Date: Aug 2002

Location: Lurking in the shadows...

Posts: 147

Time spent in forums: < 1 sec
Reputation Power: 7

Not exactly. I was gonna give this code out with my tips, but I'll give it here. Anyhow, the editor is made for IE right? Well, why not use "special" IE-only code?!

Here it is:

Code:

<form name="myform">
</form>
.......editor stuff.........
# Now for "special" IE code...
<button onclick="document.myform.submit()">Submit</button>

And there you have it - a submit button!

I have plenty of other useful tips, so don't be afraid to ask!

Cheers,
Joe of 4Life

#11

August 17th, 2002, 01:22 AM

Ben Rowe

Guest

Posts: n/a
Time spent in forums:
Reputation Power:

you can also have 2 submit buttons, say if you have a list of radio buttons, say for email addresses, you can have a delete submit button, to delete the selected emails, and have another submit button, that will send a email to the selected email address.

all you have to do is on in one button, is tell to use a different action in the form tag, something like

<input type="submit" value="Email" onSubmit="document.all.form_name.action='something else.php';">

#12

August 21st, 2002, 07:21 AM

sietze

Junior Member

Join Date: Aug 2002

Posts: 2

Time spent in forums: < 1 sec
Reputation Power: 0

Joe, I'm glad to hear you have so many wonderful tips for improving the WYSIWYG editor, but I'd be much happier if you would also share them with us, or tell us where we can find them.

I'd be especially interested in any hints or suggestions on how to include the possibility to add and edit tables.

thanks and cheers

Sietze

#13

August 21st, 2002, 05:05 PM

Joe4JC

The name's Joe. Yours?

Join Date: Aug 2002

Location: Lurking in the shadows...

Posts: 147

Time spent in forums: < 1 sec
Reputation Power: 7

Ok...tip #1: To instert any kind of HTML, including tables, use:

Code:

iframe.focus();
var sel = iframe.document.selection;
var theFrame = sel.createRange();
theFrame.pasteHTML("<html_tags_here />");

Insert that into your <script></script> tag. iframe = the name of your IFrame.

Tip #2 (note: this is untested):
Copy button:

Code:

<script>
....
function docopy(iframe)
{
  iframe.focus();
  iframe.document.execCommand('copy', false, null);
  iframe.focus();
}
</script>
<img id="copybtn" alt="Copy" class="butClass" src="copy.gif" onMouseOver="selOn(this)" onMouseOut="selOff(this)" onMouseDown="selDown(this)" onMouseUp="selUp(this)" onClick="docopy()">

Note: by replacing the word 'copy', you can also use cut, delete, paste, indent, outdent, selectall, undo, and redo. For a full list, click here.

Tip #3:
Don't like the tags that the editor uses? Switch to HTML mode and change them to whatever you want!

More tips coming soon!

Cheers,
Joe of 4Life

Last edited by Joe4JC : August 21st, 2002 at 05:08 PM.

#14

September 27th, 2005, 10:40 AM

mich4el

Registered User

Join Date: Sep 2005

Posts: 2

Time spent in forums: 29 m 40 sec
Reputation Power: 0

Hey everyone!

I was wondering how would you implement the "File Open" behaviour to this WYSIWYG editor?

(I know, thanks to you, that one can easily save the details to a database, or a file. How about opening the contents of a file?)

Let's consider more about the file.

Think the situation, where the FILE already exists, and you just would like to add something to it.

(I guess I have to specify that I'm not using a database. Only flat files.)

You would like to load up the old content to this editor, and add the new info after the olds, yeah right?

You probably would. But how would you do it?

Your replies are highly appreciated,
Greetings, mich4el

#15

December 2nd, 2005, 04:08 PM

Techno-Freak

Registered User

Join Date: Oct 2005

Posts: 28

Time spent in forums: 6 h 5 m 43 sec
Reputation Power: 0

You can use ActiveX to save and open files in javascript, this also works in VBscript link

Read (This is done line by line)

Code:

<HTML>
<HEAD>
<SCRIPT LANGUAGE = "Javascript">
function readFile(file)
{
     var fso, f, l, ForReading = "1";
     fso = new ActiveXObject("Scripting.FileSystemObject")
     f = fso.OpenTextFile(file, ForReading)
     while (!f.AtEndOfStream)
     {
          alert(f.ReadLine())
     }
}
<SCRIPT>
<BODY>
YOUR CODE HERE
</BODY>
</HTML>

and Saving:

Code:

<HTML>
<HEAD>
<SCRIPT LANGUAGE = "Javascript">
function saveFile(file, text)
{
     var  f, fi, l, ForReading = "1", ForWriting = "2";
     f = fso.OpenTextFile(file, ForReading, true)
     fi = fso.OpenTextFile(file, ForWriting, true)
     fi.Write(text)
     fi.close()
     f.close()
}
<SCRIPT>
<BODY>
YOUR CODE HERE
</BODY>
</HTML>

#16

December 2nd, 2005, 04:15 PM

Techno-Freak

Registered User

Join Date: Oct 2005

Posts: 28

Time spent in forums: 6 h 5 m 43 sec
Reputation Power: 0

Heres an easier way of understanding it:

Script:

Code:

<script>
var fso = new ActiveXObject("Scripting.FileSystemObject")
function dltFile(file)
{
   fso.DeleteFile(file)
}
function saveFile(file, text)
{
     var  f, fi, l, ForReading = "1", ForWriting = "2";
     f = fso.OpenTextFile(file, ForReading, true)
     fi = fso.OpenTextFile(file, ForWriting, true)
     fi.Write(text)
     fi.close()
     f.close()
}
function readFile(file)
{
     var f, l, ForReading = "1";
     f = fso.OpenTextFile(file, ForReading)
     while (!f.AtEndOfStream)
     {
          start(f.ReadLine())
     }
}
function start(line)
{
     document.form.text.value += line + "\n"
}
</script>

Body:

Code:

<form name = form>
<textarea name = text style = "height: 500px; width: 500px;">
</textarea>
<br>
<input type = button value = "Open" onClick = "readFile('C:\\Test.txt')">
<br>
<input type = button value = "Save" onClick = "saveFile('C:\\Test.txt', document.form.text.value)">
<br>
<input type = button value = "Delete" onClick = "dltFile('C:\\Test.txt')">
</form>

#17

December 4th, 2005, 10:31 AM

Techno-Freak

Registered User

Join Date: Oct 2005

Posts: 28

Time spent in forums: 6 h 5 m 43 sec
Reputation Power: 0

Quote:

Originally Posted by Techno-Freak

Heres an easier way of understanding it:

Script:

Code:

<script>
var fso = new ActiveXObject("Scripting.FileSystemObject")
function dltFile(file)
{
   fso.DeleteFile(file)
}
function saveFile(file, text)
{
     var  f, fi, l, ForReading = "1", ForWriting = "2";
     f = fso.OpenTextFile(file, ForReading, true)
     fi = fso.OpenTextFile(file, ForWriting, true)
     fi.Write(text)
     fi.close()
     f.close()
}
function readFile(file)
{
     var f, l, ForReading = "1";
     f = fso.OpenTextFile(file, ForReading)
     while (!f.AtEndOfStream)
     {
          start(f.ReadLine())
     }
}
function start(line)
{
     document.form.text.value += line + "\n"
}
</script>

Body:

Code:

<form name = form>
<textarea name = text style = "height: 500px; width: 500px;">
</textarea>
<br>
<input type = button value = "Open" onClick = "readFile('C:\\Test.txt')">
<br>
<input type = button value = "Save" onClick = "saveFile('C:\\Test.txt', document.form.text.value)">
<br>
<input type = button value = "Delete" onClick = "dltFile('C:\\Test.txt')">
</form>

to make it work better, you need to replace thos funny Y signs (the ones with two strikethroughs) with backslashes, and make a file open, and save dialog to make these work with any file, heres a link to more functions you can do with fso (the file system object) LINK