Create Form Input with Text Formatting Options giving HTML OUTPUT

Question

I want to create a Form Input in a Web Page and have Custom Text Formatting Options like Bold, Italic and Adding HyperLink.

Pretty much similar to how asking a question in StackOverflow. The primary purpose is to get the html output of what user enters in the form. For example, if user selects Bold Button and types something, i should get that part as

<b>Bold Content</b>

Need suggestions on how to achieve this.

Thanks

Answer 1

There are various ways to approach this, I'm going to tackle 2 fairly simple ones

The first thing to note is that you want to wrap your editor in a container element with the contenteditable attribute, then have an array variable, containing text strings and "events" of styling strings, encoded in whichever way you prefer (maybe strings starting with :, like ":bold").

What you don't want to do is directly store the html, but rather the states that can then be translated into html code.

Whenever the user writes, you'd capture the keystrokes (and prevent them from default behaviour) to add to the last text string (or add a new one in case the last was an event), and if the keystroke is, say, a backspace, then if the last item is an event, you remove all events on the tail of the array ( so [ "this ", ":bold", "is ", ":no-bold", ":italic", "text", ":no-italic", ":bold" ], which you'd later turn to "this is text ", would turn into [ "this", ":bold", "is", ":no-bold", ":italic", "tex" ])

Now you can do 2 major things.

Firstly, you can add a span for each text character, and assign the various classes based on the event styles so that each character has its own element:

<span class="">t</span><span class="">h</span>...<span class="bold">i</span><span class="bold">s</span><span class="bold"> </span><span class="italic">t</span>...

This is very slow for the browser to render, but will work quite well.

The other thing you can do, is evolving the previous example by working on each text string rather than each character, so you'd start a span for every transition from text to event in the array, assuming you're iterating over it, and add classes corresponding to the various types until you get a transition from event to text, in which case you insert the text, and close it before another event occurs, and simply repeat:

<span class="">this </span><span class="bold">is </span><span class="italic">text</span>

Much more concise and quite easy to get to. Alternatively you can add a <b> tag for every :bold event, a </b> for every :no-bold and similar. This is however highly discouraged. If you're missing it: in css you can have font-weight to describe boldness and other properties for italic and other styles

Answer 2

TinyMCE gives you all these features (and more) straight out of the box.