This tutorial explains how to bold text, italicize text, underline text, give computer language code text a special format, and how to give text one of the six HTML headers. The HTML container for all the text typed, is a div element with the "contenteditable='true' " attribute. This div element and an associated textarea element, are part of an HTML form. When the submit button is clicked, JavaScript copies all the modified content with HTML tags added, from the contenteditable div, into the textarea element, and then sends the name of the textarea element and the textarea content, to the web-server.

For the five features addressed in this tutorial, the text has to be selected first (with the mouse pointer or using the shift and arrow key) by the client, before it can be marked-up.

There are still many commercial HTML form word processing out there, that do not do spelling check. Well, with this tutorial, such spelling check can be done automatically. The spelling of the selected text to be marked up, can be corrected before or after the text is marked-up . All the major browsers today, allow correction of spelling in the contenteditable div, by the client, automatically. The web-developer does not have to write any program to check spelling.

All the knowledge given in this seven part series is free, for anybody to read.

The project is done in a minimal webpage, assuming that, that is the webpage that will be displayed at the client's browser. This is the second part of a seven part free tutorial series. At the seventh part of the series, the reader can download the complete code of the project, for use for his/her personal or commercial website. The reader is free to modify the complete code before employing into his/her website.

The author bears no responsibility for any problem that the complete code can encounter, when applying the complete code.

The reader should have read the previous part of the series before coming here, as this is a continuation.

The textarea and contenteditable div Code

The HTML code for the textarea and contenteditable div elements is:

            <textarea id='article' name='article' hidden></textarea>
            <div contenteditable='true' id='wordProcessor' style='height:300px; overflow:scroll; border:solid 1px black'></div>

The reader should read through the code if he/she has not already done so. Currently both elements are empty. The client types and edits (do word processing) into the contenteditable div, and not in the textarea element. When the submit button is clicked, JavaScript copies all the modified content with HTML tags added, from the contenteditable div, into the textarea element, and then sends the name of the text-area element and the textarea content, to the web-server.

The textarea element is always hidden from the client, in the whole typing and editing (word processing) activity.

The div for Buttons and select Elements

Just above the textarea and contenteditable div code, is an ordinary div element. This div is present in the complete code, but not shown above. The content of this div consists of the button and select elements to be clicked to have the markup.

Each button has a tool-tip which gives instruction to the end user (client) on what to do.

Button for Bold

The button element code for Bold is:

    <button type="button" onclick='boldText()' title='Select text, then click here.'>Bold</button>

The tool-tip for the client (end user) is 'Select text, then click here.' . It is the value of the title attribute. When this button is clicked, the JavaScript function, boldText() is called.

Button for Italic

The button element code for Italic is:

    <button type="button" onclick='italicizeText()' title='Select text, then click here.'>Italic</button>

The tool-tip for the client (end user) is 'Select text, then click here.' . It is the value of the title attribute. When this button is clicked, the JavaScript function, italicizeText() is called.

Button for Underline

The button element code for Underline is:

    <button type="button" onclick='underlineText()' title='Select text, then click here.'>Underline</button>

The tool-tip for the client is 'Select text, then click here.' . It is the value of the title attribute. When this button is clicked, the JavaScript function, underlineText() is called.

Button for Computer Language Code

When all the computer language code of interest is selected, and then this button is clicked, the code appears in a special format. The button element code for computer language code is:

    <button type='button' onclick='preText()' title='Select text, then click here.'>Code</button>

The tool-tip for the client is 'Select text, then click here.' . It is the value of the title attribute. When this button is clicked, the JavaScript function, preText() is called.

Select Element for the Six HTML Headers

Instead of a button, there is the select element for the six HTML headers. The select element code is:

                <select name="header" id="header" title='Select text, then choose here.'>
                    <option value='' onclick="headerText('h1')">Header1 - H1</option>
                    <option value='' onclick="headerText('h2')">Header2 - H2</option>
                    <option value='' onclick="headerText('h3')">Header3 - H3</option>
                    <option value='' onclick="headerText('h4')">Header4 - H4</option>
                    <option value='' onclick="headerText('h5')">Header5 - H5</option>
                    <option value='' onclick="headerText('h6')">Header6 - H6</option>
                </select> 

Read through the code, if that is not already done. The six headers are identified as h1, h2, h3, h4, h5, and h6; with h1 being the biggest markup size and h6 being the smallest markup size. The tool-tip for the whole select structure is 'Select text, then choose here.'. It is the value of the title attribute. When an option is clicked (after dropdown), the JavaScript headerText() function is called, with the appropriate argument passed.

JavaScript Coding for Marking Up

Bold Markup

A portion of text has to be selected first by the client, then the Bold button is clicked, before the selected text becomes bold. The JavaScript function for that is:

                function boldText() {
                    let selection = window.getSelection();
                    let range = selection.getRangeAt(0);
                    let newParent = document.createElement('b');
                    range.surroundContents(newParent);
                    range.collapse();
                }

The first line in the code obtains a JavaScript memory object that represents the selection. The next line obtains the range object from the selection object. A range is the starting and ending points of a string of HTML code. The next line creates a bold node object in memory. The line after surrounds the selected text with the start bold tag (<b>) and the end bold tag (</b>), and produces the effect on screen, without any reloading. The selected text remains selected. The last line removes the highlight of the selection that indicates that the text is selected.

Italic Markup

A portion of text has to be selected first by the client, then the Italic button is clicked, before the selected text becomes italicized. The JavaScript function for that is:

                function italicizeText() {
                    let selection = window.getSelection();
                    let range = selection.getRangeAt(0);
                    let newParent = document.createElement('i');
                    range.surroundContents(newParent);
                    range.collapse();
                }

The first line in the code obtains a JavaScript memory object that represents the selection. The next line obtains the range object from the selection object. A range is the starting and ending points of a string of HTML code. The next line creates an italic node object in memory. The line after surrounds the selected text with the start italic tag (<i>) and the end italic tag (</i>), and produces the effect on screen, without any reloading. The selected text remains selected. The last line removes the highlight of the selection that indicates that the text is selected.

Underline Markup

A portion of text has to be selected first, then the Underline button is clicked, before the selected text becomes underlined. The JavaScript function for that is:

                function underlineText() {
                    let selection = window.getSelection();
                    let range = selection.getRangeAt(0);
                    let newParent = document.createElement('u');
                    range.surroundContents(newParent);
                    range.collapse();
                }

The explanation is similar to that for italic, except for the creation of the memory element that needs 'u'; and the surrounding start and end tags are <u> and </u>.

Computer Language code Markup

A portion of text (typically more than one line) has to be selected first by the client, then the Code button is clicked, before the selected text becomes specially formatted. The JavaScript function for that is:

                function preText() {
                    let selection = window.getSelection();
                    let range = selection.getRangeAt(0); 
                    let newParent = document.createElement('pre');
                    range.surroundContents(newParent);
                    range.collapse();                   
                }

The explanation is similar to that for italic, except for the creation of the memory element that needs 'pre', and the surrounding start and end tags are <pre> and </pre>. The HTML pre element is used here to give the special appearance (format).

Header markup

A portion of text has to be selected first, then the particular option element is clicked from the select drop-dawn menu, before the selected text becomes a formatted heading. The JavaScript function for that is:

                function headerText(hd) {
                    let selection = window.getSelection();
                    let range = selection.getRangeAt(0); 
                    let newParent = document.createElement(hd);
                    range.surroundContents(newParent);
                    range.collapse();                   
                }

This function receives an argument, which is either 'h1' or 'h2' or 'h3' or 'h4' or 'h5' or 'h6'. The rest of the explanation is similar to that for italic above, except for the creation of the memory element that needs the argument, hd, and the surrounding start and end tags are <h1> and </h1> or the other variants.

Conclusion

A portion of text has to be selected first by the client (end user), then the button or select option is clicked, before the selected text becomes formatted.

In the corresponding called JavaScript function, the selection memory object is made. Then the range object from the selection object is obtained. A range is the starting and ending points of a string of HTML code. Then a node for the element to surround the selected text is created in memory. Then the surrounding is done, and made effective at the screen, without any reloading. The selected text remains selected on screen. Lastly, the highlight of the selection that indicates that the text is selected, is removed.

The complete code for the project, to be downloaded free, is at the end of the tutorial series.

Chrys