Formatting for Textarea text.. like this one!

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
User avatar
arpowers
Forum Commoner
Posts: 76
Joined: Sun Oct 14, 2007 10:05 pm
Location: san diego, ca

Formatting for Textarea text.. like this one!

Post by arpowers »

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
User avatar
Josh1billion
Forum Contributor
Posts: 316
Joined: Tue Sep 11, 2007 3:25 pm

Post by Josh1billion »

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:

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();
	}
}
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:

Code: Select all

<a href="javascript:emoticon(':)')"><img src="smily.png"></a>
And that's exactly how phpBB does it.
User avatar
Kieran Huggins
DevNet Master
Posts: 3635
Joined: Wed Dec 06, 2006 4:14 pm
Location: Toronto, Canada
Contact:

Post by Kieran Huggins »

there's a UNIX tool called "diff" that may be of interest.
User avatar
arpowers
Forum Commoner
Posts: 76
Joined: Sun Oct 14, 2007 10:05 pm
Location: san diego, ca

Post by arpowers »

Thanks for the replies!
The js explanation is great! How much time do you think it would take to create something (writing js is my weakpoint)....

I also checked out 'diff', how would you implement something like that with php/mysql?

best
User avatar
RobertGonzalez
Site Administrator
Posts: 14293
Joined: Tue Sep 09, 2003 6:04 pm
Location: Fremont, CA, USA

Post by RobertGonzalez »

You could always use something like FCKEditor or TinyMCE, which have done all the development work for you already.
User avatar
RobertGonzalez
Site Administrator
Posts: 14293
Joined: Tue Sep 09, 2003 6:04 pm
Location: Fremont, CA, USA

Post by RobertGonzalez »

PS Moved to Client Side.
User avatar
arpowers
Forum Commoner
Posts: 76
Joined: Sun Oct 14, 2007 10:05 pm
Location: san diego, ca

Post by arpowers »

cool, I checked out the open source editors... they look good... :)

Any ideas on tracking changes?

ways of comparing text with php?

:):)
User avatar
RobertGonzalez
Site Administrator
Posts: 14293
Joined: Tue Sep 09, 2003 6:04 pm
Location: Fremont, CA, USA

Post by RobertGonzalez »

Store every change as a new row in the database and use the most recent row for your display. Then string compare them later.
User avatar
arpowers
Forum Commoner
Posts: 76
Joined: Sun Oct 14, 2007 10:05 pm
Location: san diego, ca

Post by arpowers »

Great... and thanks

But what is the best way of comparing strings?

Don't those functions just return a bool?

I suppose it could be possible to go word by word, but then a removed word would throw things off.... hmmm..

interesting problem.8O

Any further suggestions or ideas. :)

Thanks !
Post Reply