•
•
•
•
What is DaniWeb IT Discussion Community?
You're currently browsing the JavaScript / DHTML / AJAX section within the Web Development category of DaniWeb, a massive community of 403,388 software developers, web developers, Internet marketers, and tech gurus who are all enthusiastic about making contacts, networking, and learning from each other. In fact, there are 4,574 IT professionals currently interacting right now! Registration is free, only takes a minute and lets you enjoy all of the interactive features of the site.
Please support our JavaScript / DHTML / AJAX advertiser: Lunarpages Web Hosting
Views: 1961 | Replies: 5 | Solved
 |
•
•
Join Date: Mar 2007
Location: georgia
Posts: 55
Reputation: 
Rep Power: 2
Solved Threads: 4
Junior Poster in Training
i have searched the web for awhile on this...
i wrote a script that will format certain words as the user types
i have already written the javascript to remove the formatting when the form is submitted.
does anyone have a simple solution?
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?
Last edited by hunkychop : Mar 11th, 2008 at 5:56 pm. Reason: typo
toast
•
•
Join Date: Mar 2008
Posts: 8
Reputation:
Rep Power: 0
Solved Threads: 2
Newbie Poster
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.
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.
•
•
Join Date: Mar 2007
Location: georgia
Posts: 55
Reputation:
Rep Power: 2
Solved Threads: 4
Junior Poster in Training
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
so... could i change the textarea to a scrolling div and run this in my javascript?
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(){var textdiv = document.getElementById('textdiv');
textdiv.designMode = 'On';
//call function that fills in preset txt here
textdiv.innerHTML="preset txt or txt from db";
}
function getTxt(){var textdiv = document.getElementById('textdiv');
document.write(textdiv.innerHTML);
}
</script> toast
•
•
Join Date: Mar 2008
Posts: 8
Reputation:
Rep Power: 0
Solved Threads: 2
Newbie Poster
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.
•
•
Join Date: Mar 2007
Location: georgia
Posts: 55
Reputation:
Rep Power: 2
Solved Threads: 4
Junior Poster in Training
Re: textarea with formatting 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--------------------------
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
this is what my script does>
METHOD--------------------------
>gets a div by id and converts all of the normal text in it into elements>i still need to write the special function for when the user presses the backspace key, but that shouldnt be to hard>(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 cursoronkeydown, 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 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
toast
•
•
Join Date: Aug 2008
Posts: 1
Reputation:
Rep Power: 0
Solved Threads: 0
Newbie Poster
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
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
|
•
•
•
•
•
•
•
•
DaniWeb JavaScript / DHTML / AJAX Marketplace
•
•
•
•
Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)
Linear Mode
Similar Threads
- Formatting blob fields (PHP)
- formatting textarea text (PHP)
- Regular expressions and formatting (PHP)
- PHP MySQL problem (PHP)
- mysql_num_rows(): supplied argument is not a valid MySQL result resource (PHP)
- Struggling with Captcha (PHP)
- Textarea to HTML (PHP)
- cannot get the sendmail to actualy send an email with the form selections (PHP)
Other Threads in the JavaScript / DHTML / AJAX Forum
- Previous Thread: How to Disable (View Source) and (Ctrl+C) from a site?
- Next Thread: Reload with drop-down and text fields
