0

I'm trying to have a textarea input field just like when you post a new StackOverflow question. You can have line spaces, you can bold text, you can insert link etc.

However, when you push some kind of button, all of that gets translated into a long HTML string (e.g., spaces become <p> or <br>, bold becomes <strong>, link becomes <a>). Is there a way to do this with some kind of JS plug in?

james
  • 3,989
  • 8
  • 47
  • 102
  • check this link http://stackoverflow.com/questions/17247970/html-editor-like-stackoverflow – repzero Oct 22 '16 at 00:35
  • What you're asking for is called a WYSIWYG editor. It stands for What You See Is What You Get. There is a good list of available WYSIWYG editors here: https://github.com/cheeaun/mooeditable/wiki/Javascript-WYSIWYG-editors – jjenzz Oct 22 '16 at 00:38

4 Answers4

1

What you describe is a What You See Is What You Get (WYSIWYG) editor.

Google "WYSIWYG editor library"

Examples:

https://prosemirror.net/

https://www.tinymce.com/

Dimitris Karagiannis
  • 8,942
  • 8
  • 38
  • 63
1

If I have understood what you are asking, you will need to learn regular expressions. Everything is the context is based on text replacement. Example: because textarea does not display hyperlinks, buttons, i can do somethings like in stackoverflow. For hyperlink, i can write something link [# http://facebook.com] or [link]http://facebook.com [link];

later, I extract the http://facebook.com and wrap it between <a></a> elements.

Mr Lister
  • 45,515
  • 15
  • 108
  • 150
youssouf
  • 381
  • 2
  • 11
1

This question has been answered here Rendering HTML inside textarea

What you need is WYSIWYG (What you see is what you get) editor. There are a lot of them.

You can check out these:

Ckeditor The best web editor for everyone

TinyMCE Full featured web editing

They are very easy to use.

Community
  • 1
  • 1
Abk
  • 2,137
  • 1
  • 23
  • 33
0

What everybody above said is true, you want to be looking at a WISYWG editor.

If by chance you are using Bootstrap, you may want to look at Summernote.

I have no affiliation with them, but I used it for one of my projects and was very pleased.

marcamillion
  • 32,933
  • 55
  • 189
  • 380