Adding HTML tags to form field contents using buttons?

[Pixelateur]

Hi,

I am creating a Content Management System, whereby the client can edit text in form fields which will subsequently appear on the client's website. The system works fine so far, except that I don't really want the client/user to have to enter every single HTML tag himself. How can I create buttons like "BOLD", "ITALICS", etc. that will do the job instead? I have seen this in action many times, especially on message boards etc. Any pointers?

[vgarcia]

Use the calibre-bbcode gem if you want BBCode functionality, or Redcloth if you want to let them edit textile.

If you're talking about creating some kind of toolbar, you can integrate something like FCKeditor into your app which will just send HTML when the form submits (though you should have some kind of alternate for browsers that don't support fckeditor or have JS turned off).

[Pixelateur]

Wow, thanks for your feedback! Yes, I do want to add some kind of toolbar at the top of each form field in my CMS, so the FCKeditor looks pretty good to me. You say that some browsers don't support FCKeditor? Why is that? And what broswers would that be?

[vgarcia]

Wow, thanks for your feedback! Yes, I do want to add some kind of toolbar at the top of each form field in my CMS, so the FCKeditor looks pretty good to me. You say that some browsers don't support FCKeditor? Why is that? And what broswers would that be?

Mostly older browsers. Any browser from the last year or two should work with it, but you never know what people are running these days. It also relies a ton on Javascript so have a fallback ready

[Pixelateur]

I like the FCKeditor thingy... But it doesn't work in Safari on my machine, which is bad because I'm using Safari a lot during development...

[Luke Redpath]

Give TinyMCE a try - I think its much better than FCKEditor.

[Pixelateur]

Hey Luke,
I agree. TinyMCE works great in Safari and is easier to implement than FCKeditor. For some reason, all the buttons are aligned vertically rather than horizontally in my application. I am currently trying to fix this...

[kyko]

I have developed a couple CMS's before and have had so much trouble in finding a good js editor that actually works and isn't too buggy and is pretty much cross browser. Safari doesn't support as much DOM JS as other browsers and that is why you have issues there. But i have recently found the Dojo editor to be a perfect solution to my needs. it is very un-buggy simple to add to a rails app and the basic fuctionality works in Safari as well as many other browsers.
http://blog.innerewut.de/articles/tag/wysiwyg
http://dojotoolkit.org/docs/rich_text.html

Edit: just FYI: I have tried FCKEditor with no luck and would not recommend it at all--just trying to save you a headache.

[Pixelateur]

I didn't like FCKEditor either, because it is not supported by Safari which is even announced on their website. TinyMCE, however, works great in Safari (except that you can't allocate styles to bits of text) and was a lot easier to implement as well. So I'd recommend everybody to go for TinyMCE.