JavaScript editor

[Jona]

Yah, it's me.. I'm making a JavaScript JavaScript Editor and Debugger, but I need a little heads-up. I've attached what I've done so far on editTest.html, the rest I got from Yahoo. You see, it is, after all, possible to put HTML into a Textarea. I'm just looking for a way to find the word "for" and change it to blue in the textarea. I've got it working with anything that has http:// and .com on it, but I want to do the same with "for" and also other JavaScript functions and stuff like that. You know, syntax highlighting, that's what I'm talking about. Well, here's the .zip file, I hope you can grasp my idea. :)

[Jona]

Yah, that's what I meant. Rendered, okay, so it's not possible to get HTML to render in the Textarea, but it is possible to create a <DIV> and hide the textarea inside the <DIV> and use the <DIV> which becomes editable to render HTML in an edittable "textarea."

Anyways, I figured you, Pyro, Nedals, AdamBrill, or Charles could help out...

[Jona]

Oh, I get it now! Haha! Thanks. That makes sense. So about the first question, though.... any ideas? I can make selected text any color I want, but it's certain patterns of text (words) that I want to color. This would probably have to run a function onkeyup, right?

[Jona]

I know how to search (using RegExps) for the word, "for" but what I want to do is make that word's color blue. How would I do that? How would I make a block of text blue? I tried a few things but nothing worked.

[Nedals]

Jona, I think Dave has this post well in hand.

Dave, that is a very cute editor but what about the.......:D

[pyro]

Jona -

You may be interested in this link: http://msdn.microsoft.com/workshop/author/dhtml/reference/commandids.asp as it gives as it gives a list of the command identifiers for the execCommand method... Also, when I was working on an HTML editor, I used a contenteditable iframe for the WYSI(not)WYG part, and a textarea for the code view. If interested I could dig it up for you to look at. (even though it is not complete...;))

[Jona]

Ok, Dave, perhaps I took too quick of a look at it. I'll study your page better.

Pyro, yes, I'm interested. Thanks for the link.

[Jona]

Pyro!

I went to that link and downloaded about a billion pages with tutorials and information on the execCommand, not to mention that I've found a way to use HTML Applications to save and open files!! I knew it was possible because I've created a shortcut to Notepad on the Windows Desktop with a JavaScript using the WSH (Windows Scripting Host) and the FileObject, but I never thought that HTAs were allowed to edit files! This is great! I'm so glad you gave me that link! It's so hard to navigate through Microsoft's site because it's so big, I've looked through there before and got all the info I wanted.... at the time. They even have further development information. That's neat.

I'm going to go and study, so I may not be on here for about a year or so... LOL :D

[pyro]

Hey Jona...Have fun. document.execCommand is a necessity if you try to make a HTML editor, etc...

[Jona]

You're not kidding. I've been studying (for about 2 hours) Dave's "stupid" editor... I don't know where y'all learned all that, but I really wish I had the money to take classes. But since I don't, I'll have to figure out execCommand() on my own, I guess... that's the way I've done almost everything I know.

Dave, if you could find the time, maybe you could break-down your editor for me. Thanks, I really appreciate y'all, and this forum.

[Jona]

Thanks, Dave. I already downloaded all that info. I was just asking about your script. I know I'll figure it out eventually, but your functions just look simpler than theirs. But thanks anyways.

[Jona]

First let's take this:

function findText(box, txt) {
document.forms[0].selColor.selectedIndex = 0;
document.forms[0].selFont.selectedIndex = 0;
if (selPosn == null) {
selText = document.body.createTextRange();
selText.select();
}
selText = document.selection.createRange();
if (selPosn != null) {
selText.moveToBookmark(selPosn);
selText.move("character", +1);
}
var fnd = selText.findText(txt);
if (fnd) {
selPosn = selText.getBookmark();
selText.select();
} else {
selPosn = null;
alert("'"+txt+"' not found.");
}
}

This function finds text. Tell me if I get anything wrong.

Line 1: function findText(box, txt) {
Starts the function with two variables box and txt which are set later on the form elements.

Line 2 & 3: document.forms[0].selColor.selectedIndex = 0;
document.forms[0].selFont.selectedIndex = 0;
Sets both select boxes to the first option. Question: why?

Line 4: if (selPosn == null) {
Check if selPosn is empty. This is a global variable and each time the function is run, it is checked.

Line 5: selText = document.body.createTextRange();
Creates a text range to hold data? I don't quite get this line...

Line 6: selText.select();
Highlights the text range, correct?

[Jona]

Thanks, that makes it make a lot more sense. Even though you're right about it being hard to read, I always code with the least lines possible, so I still get it. Thanks, man! If I need more help, I know exactly where to ask! :)