This tutorial explains How to Create Description List Markups in HTML Form Word Processor with Spelling Check. 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.

All the text for the Description Term (DT) and Description Definition (DD) elements are typed ordinarily, vertically downwards.

To have a Description List (DL) or its children: Description Term (DT) and Description Definition (DD) marked-up in the word processor, select first each text for DD markup (with the mouse pointer or using the shift and arrow key); then drop down the correct select element; and then choose the Description Definition option. The effect should appear on the screen, with indentation to the right. Apart from the indentation, the DD text is not styled. It is the responsibility of the web-developer (programmer) to style the DD element text, as he/she deems fit, in the CSS style sheet.

Next, select each text for DT markup (with the mouse pointer or using the shift and arrow key); then drop down the same correct select element; and then choose the Description Term option. Apart from that the cursor (I bar) will appear at the right end of the DT text, there is no styling (and no indentation) of the DT text. It is the responsibility of the web-developer (programmer) to style the DT element text, as he/she deems fit, in the CSS style sheet.

Next, select all the DD and DT texts together, presuming already marked-up (with the mouse pointer or using the shift and arrow key); then drop down the same correct select element; and then choose the Description List option. That should be all.

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 DD and DT text can be corrected before or after markup. 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 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 eighth part of a ten part free tutorial series. At the last 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 buttons 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.

Select Element for DD, DT and DL

Instead of a button, there is the select element to produce DD, DT and DL. The select element code is:

                <select name="dl" id="dl" title='Select text, then click here.'>
                    <option value='' onclick="createDD()">Description Definition</option>
                    <option value='' onclick="createDT()">Description Term</option>
                    <option value='' onclick="createDL()">Description List</option>
                </select> 

Read through the code, if that is not already done. The tool-tip for the whole select structure is 'Select text, then click here.' . This is the value of its title attribute. The three option commands are Description Definition, Description Term and Description List. When the Description Definition command is clicked, the createDD() function is called. When the Description Term command is clicked, the createDT() function is called. When the Description List command is clicked, the createDL() function is called.

JavaScript Coding for Marking Up

Description Definition

Each of the text intended for DD mark-up has to be selected first, by the client, then the Description Definition select option is clicked, before the selected text becomes marked-up . The JavaScript function for that is:

                function createDD() {
                    let selection = window.getSelection();
                    let range = selection.getRangeAt(0);
                    let ddElement = document.createElement('dd');
                    range.surroundContents(ddElement);
                    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 DD node object in memory. The line after surrounds the selected text with the start DD tag (<dd>) and the end DD tag (</dd>), 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.

Description Term

Each of the text intended for DT mark-up has to be selected first, by the client, then the Description Term select option is clicked, before the selected text becomes marked-up. The JavaScript function for that is:

                function createDT() {
                    let selection = window.getSelection();
                    let range = selection.getRangeAt(0);
                    let dtElement = document.createElement('dt');
                    range.surroundContents(dtElement);
                    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 DT node object in memory. The line after surrounds the selected text with the start DT tag (<dt>) and the end DT tag (</dt>), 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.

Description List

The client has to select all the DD and DT texts together, presuming already marked-up; then the Description List select option is clicked, before the selected text becomes marked-up. The JavaScript function for that is:

                function createDL() {
                    let selection = window.getSelection();
                    let range = selection.getRangeAt(0);
                    let dlElement = document.createElement('dl');
                    range.surroundContents(dlElement);
                    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 DL node object in memory. The line after surrounds the selected text with the start DL tag (<dl>) and the end DL tag (</dl>), 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.

Conclusion

Text has to be selected first by the client (end user), then the appropriate select option is clicked, before the selected text becomes marked-up.

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 this tutorial series.

Chrys