Formatting for Textarea text.. like this one!
Moderator: General Moderators
Formatting for Textarea text.. like this one!
Hey everybody,
I'm trying to develop a custom 'wiki' type functionality for a project. I have a couple questions...
I know on a lot of forums, email services, etc.. there is a text formatting bar. What is the easiest way of implementing this for wiki editing?
Also I'm curious what the best way to track changes made to text over time?
Thanks Guys..
Andrew
I'm trying to develop a custom 'wiki' type functionality for a project. I have a couple questions...
I know on a lot of forums, email services, etc.. there is a text formatting bar. What is the easiest way of implementing this for wiki editing?
Also I'm curious what the best way to track changes made to text over time?
Thanks Guys..
Andrew
- Josh1billion
- Forum Contributor
- Posts: 316
- Joined: Tue Sep 11, 2007 3:25 pm
You should use Javascript for that type of bar. Have each button on the formatting bar link to specific Javascript functions, and then have that function insert the text into the textarea. For example, here's the Javascript function which for phpBB which inserts a smily face (:)) into the textarea:
On line 2, notice "message" is the name of the textarea. So if you wanted to have a clickable ":)" image that inserts the text ": )" (without the space inbetween), you would have this HTML wherever you want that clickable image to be:
And that's exactly how phpBB does it.
Code: Select all
function emoticon(text) {
var txtarea = document.post.message;
text = ' ' + text + ' ';
if (txtarea.createTextRange && txtarea.caretPos) {
var caretPos = txtarea.caretPos;
caretPos.text = caretPos.text.charAt(caretPos.text.length - 1) == ' ' ? caretPos.text + text + ' ' : caretPos.text + text;
txtarea.focus();
} else {
txtarea.value += text;
txtarea.focus();
}
}Code: Select all
<a href="javascript:emoticon(':)')"><img src="smily.png"></a>- Kieran Huggins
- DevNet Master
- Posts: 3635
- Joined: Wed Dec 06, 2006 4:14 pm
- Location: Toronto, Canada
- Contact:
- RobertGonzalez
- Site Administrator
- Posts: 14293
- Joined: Tue Sep 09, 2003 6:04 pm
- Location: Fremont, CA, USA
- RobertGonzalez
- Site Administrator
- Posts: 14293
- Joined: Tue Sep 09, 2003 6:04 pm
- Location: Fremont, CA, USA
- RobertGonzalez
- Site Administrator
- Posts: 14293
- Joined: Tue Sep 09, 2003 6:04 pm
- Location: Fremont, CA, USA