Question

How does StackOverflow create its tag system. How can it format the html in a text area?

I just don’t know where to begin. If someone could guide me, then I can know what direction to take so I can write some code that someone can check.

Like this:

EDIT:
Basically, when I press space, how do i add a new element/div to the inside of the div?

Answer 1

What I would do is:

• Create a master DIV with a border (like here the border 1px solid #000)
• After, inside this DIV, I will create another DIV (float: left;), another DIV (float: right) and an input inside the right div.

When you write inside the input and let’s say you select HTML, it creates a span in the left DIV and reduces the width of the right div to match the remaining size. Of course, inside your span there’s the text HTML with the delete sign.

You could do it easily using jQuery.

Example:

<div id="master_div">
    <div id="categories">

    </div>
    <div id="input">
        <input type="text" value="" />
    </div>
</div>

And you write some jQuery / JS