textarea with formatting

[hunkychop]

i have searched the web for awhile on this...

i wrote a script that will format certain words as the user types
(ex. when the user types MTrak the text is replaced with <b>MTrak</b>)

i need to know how to view the formatting in a text box, not the tags. i dont want a full WYSIWYG editor because the end result of the script will be something like editing scripts in dreamweaver (functions are a different text color that regular text, etc.)
i have already written the javascript to remove the formatting when the form is submitted.

does anyone have a simple solution?

[nagoon97]

It can NOT be done with textarea.
I'm not sure what you meant by "full WYSIWYG editor" but you do need to use some of the technics being used in a WYSIWYG editor to do what you are trying to do.
If you plan to write an IE only application, the solution can be simple, check out the "contenteditable" property.
If you wish to write an application with more cross browser support, check out the "designMode" property.

[hunkychop]

i am aware that i need to use wysiwyg techniques, but all of the sources i have found online come preset with font drop downs, change text size, insert hyperlink etc. i just want the script i wrote to color the text to help the user visably when they are modifiing the content of the textarea (midi xml and text).
it definitely needs to be cross-browser compatible

the end result of the script will be something like editing scripts in dreamweaver (functions are a different text color that regular text, etc.)

so... could i change the textarea to a scrolling div and run this in my javascript?

<script type="javascript">
function writeEditor(){
[INDENT]var textdiv = document.getElementById('textdiv');[/INDENT]
[INDENT]textdiv.designMode = 'On';[/INDENT]
[INDENT]
//call function that fills in preset txt here
textdiv.innerHTML="preset txt or txt from db";[/INDENT]
}
function getTxt(){
[INDENT]var textdiv = document.getElementById('textdiv');[/INDENT]
[INDENT]document.write(textdiv.innerHTML);[/INDENT]
}
</script>

[nagoon97]

If you decided to use designMode, things get a little more complicated because the property can only be used for a document. So, you will have to set up an iframe with the property on. However, if you use the contentEditable property, you can pretty much just use your code AS-IS.

[hunkychop]

thanks for the help. since i see that there is no cross-browser compatible function for this, i went to the keyboard and started writting a cross browser script. i have finished most of it and so far everything works. when i am finished, ill post it here for other people. what i have done so far, however, is costly processing wise and if someone has a better method for this, i would appreciate it.

this is what my script does>
METHOD--------------------------
>gets a div by id and converts all of the normal text in it into elements
>(wraps specialy formatted and uniquely ID'd div tags around them)
>whenever a character is clicked, a text box with transparent backround, the width of one character, and no border is inserted
>(the only thing the user can see is the cursor
onkeydown, it converts the text to elements, like before, and inserts the text before the textbox
>whenever they click on another character, it removes the textbox and re-inserts the textbox to where they clicked.
>whenever the user clicks somewhere randomly inside of the div, it finds the line that i has been clicked on and inserts the textbox at the end of the line
>i havent done this yet
>whenever someone highlights text, the text is removed and replaced with a textbox that contains the text.

>everytime the text in the div is changed, it updates a hidden input field's value that has the same id/name as the div so that when a form is submitted, the text in the div is included
>before updating the data in the hidden field, the div tags around the element are removed leaving only the html and text tags
>there is an option to remove all html tags that the user did not type (tags from the color text function)
>there is another option that will make any html entered by the user change to html entities, like the html textarea

>i still need to write the special function for when the user presses the backspace key, but that shouldnt be to hard

i also made a drop down that turns on/off automatic coloring of keywords that are defined in a config variable. the script also has an option for getting data from a file by ajax and using it

still, if anyone has a more efficent cross browser method, post it

[zasyatkin]

Hey guys,

I came across this post when I was looking for the same thing, a cross-browser compatible WYSIWYG editor which support lots of formatting options. Luckily, I was able to find a great one which is open-source and completely written in JavaScript so I wanted to share it with you all. Its called openWYSIWYG and it can be found at http://www.openwebware.com/.

Dmitriy