Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How do I make a rich text input box field like StackOverflow has?

I am working on a site that depends on user generated content, and it would be very nice to also have a way to let the users enter rich text.

How do they accomplish the rich text like they do on this site to post questions?

I understand that I can make arbitrary signs above the text area and when something is highlighted and one of the control buttons is pressed, make some jQuery call to see what is highlighted, and wrap that in some html tags like for bold text for example...and then just add the text into my database with the HTML. Is that how these kinds of rich-text things are done?

Thanks!!

like image 350
GeekedOut Avatar asked Oct 24 '11 01:10

GeekedOut


People also ask

How do I make a text box rich in HTML?

In the Content Type Builder page, add the Rich Text Editor (RTE) field to it. In the Edit Properties section of the RTE field, under Editor Version, select Latest. Under the Editor Type, select Custom, and choose the formatting options you want to include in the RTE field.

How do you implement rich text?

Create a rich text fieldSelect Click to Add, and then select Long Text from the list. Double click the field header and enter a meaningful name for the new field. Save your changes.

What is the input type when creating text boxes?

HTML text box input refers to a single-line text field in a form. You can create one with an input element with a type attribute specified as “text” or no type attribute specified. Note that the type attribute does not need to be specified since the default type of an input element is “text”.

Does rich text support HTML?

The rich text editor is available in several circumstances: Long Text field - the Enable HTML field option is enabled on a long text field which is added to a layout.


2 Answers

StackOverflow uses Markdown to format user text. Check out PageDown for an editor / preview example.

Other options that produce HTML are TinyMCE and CKEditor.

like image 137
Phil Avatar answered Oct 24 '22 10:10

Phil


Check out TinyMCE. It's a great rich text input library.

http://www.tinymce.com/

like image 38
Brent Avatar answered Oct 24 '22 10:10

Brent