This tutorial explains How to Create Markups for Unordered and Ordered Lists with Spelling Check in HTML Form Word Processor. The HTML container for all the words 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.

The section of text that needs bullets, have to be selected first by the end user (client). This section of text selected, has to consist of text lines without blank lines in-between, otherwise there will be issues. After selecting, the Unordered List button or Ordered List button has to be clicked, for the appropriate type of bullets.

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 a word in a bulleted text line, can be corrected before or after the bullet is made. 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 fourth 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 Unordered List

The button element code for unordered list is:

    <button type='button' onclick='ul()' title='Select text, then click here.'>Unordered List</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, ul() is called.

Button for Ordered List

The button code for Ordered List is:

    <button type='button' onclick='ol()' title='Select text, then click here.'>Ordered List</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, ol() is called.

JavaScript Coding for Unordered and Ordered List

Unordered List

The section of text that needs bullets, has to be selected first by the end user (client). This section of text selected, has to consist of text lines without blank lines in-between, otherwise there will be issues. After selecting, the Unordered List button is clicked. The JavaScript function for what follows is:

                function ul() {
                    let selection = window.getSelection();
                    let range = selection.getRangeAt(0);
                    let fragment = range.extractContents();
                    let nodeCollection = fragment.children;
                    
                    let ulElement = document.createElement('ul');
                    
                    for (let i=0; i<nodeCollection.length; i++) {
                        if (nodeCollection[i].tagName.toUpperCase() == 'BR')
                            continue;
                        else {
                            let liElement = document.createElement('li');
                            liElement.textContent = nodeCollection[i].textContent;
                            ulElement.appendChild(liElement);
                        }
                    }
                    
                    range.deleteContents();
                    range.insertNode(ulElement);    
                    range.collapse(); 
                }

The first statement in the function, obtains a JavaScript memory object that represents the selection. The next statement obtains the range object from the selection object. A range is the starting and ending points of a string of HTML code. The statement that follows creates a fragment object from the range object. The next statement creates a collection of all the nodes in the fragment object, still in memory.

The statement after creates a ul node object, still in memory. The for-loop compound statement attaches all the text lines, excluding the <br> elements, as children li nodes to the ul node, still in memory.

The statement that follows deletes all the selected content on screen in the contenteditable div. The statement after, replaces (inserts) the erased selected content, with the created ul node with its li text line children nodes. The replacement, which is now a bulleted list, remains selected. The last statement removes the highlight of the selection that indicates that the text is selected.

Ordered List

The section of text that needs bullets, has to be selected first by the end user (client). This section of text selected, has to consist of text lines without blank lines in-between, otherwise there will be issues. After selecting, the Ordered List button is clicked. The JavaScript function for what follows is:

                function ol() {
                    let selection = window.getSelection();
                    let range = selection.getRangeAt(0);
                    let fragment = range.extractContents();
                    let nodeCollection = fragment.children;
                    
                    let olElement = document.createElement('ol');
                    
                    for (let i=0; i<nodeCollection.length; i++) {
                        if (nodeCollection[i].tagName.toUpperCase() == 'BR')
                            continue;
                        else {
                            let liElement = document.createElement('li');
                            liElement.textContent = nodeCollection[i].textContent;
                            olElement.appendChild(liElement);
                        }
                    }
                    
                    range.deleteContents();
                    range.insertNode(olElement);    
                    range.collapse(); 
                }

The first statement in the function, obtains a JavaScript memory object that represents the selection. The next statement obtains the range object from the selection object. A range is the starting and ending points of a string of HTML code. The statement that follows creates a fragment object from the range object. The next statement creates a collection of all the nodes in the fragment object, still in memory.

The statement after creates an ol node object, still in memory. The for-loop compound statement attaches all the text lines, excluding the <br> elements, as children li nodes to the ol node, still in memory.

The statement that follows deletes all the selected content on screen in the contenteditable div. The statement after, replaces (inserts) the erased selected content, with the created ol node with its li text line children nodes. The replacement, which is now a bulleted (numbered) list, remains selected. The last statement removes the highlight of the selection that indicates that the text is selected.

Conclusion

In order to markup an unordered or ordered content, the section of text that needs bullets, has to be selected first by the end user (client). This section of text selected, has to consist of text lines without blank lines in-between, otherwise there will be issues.

A selection object is then created in memory. From the selection object, all the nodes of the selection are collected in an array. From the array, a ul or ol node is formed (with li children nodes). This created ul or ol node, and replaces the selection on the screen.

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

Chrys