This tutorial explains How to Create a Figure and Optional FigCaption 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.

An HTML figure annotates an illustration, diagram, photo, code listing, etc., making it self-contained. The figure surrounds the figure content. The HTML figcaption element is like the title of the figure content. It can be something like "Fig. 2.5 The special image". When designing a webpage the figcaption is optional. However, it can be just above or just below the figure content. The figcaption is a child of the figure element.

Marking up content, applies to a element as a unit, and not to a fragment. A single image (tag) element for example, is a unit. As another example, a single pre element with content, is still a single unit.

For the client (user) to mark up content as a figure, and giving an optional figure caption, the single unit element has to be selected first (with the mouse pointer or using the shift and arrow key). In the case of an image, a single click on the image for selection, might do. After selecting the single unit element, click the Figure button, in the menu bar. A JavaScript prompt dialog box will appear, asking the user for the string of the figure-caption. If the cancel button is clicked at this dialog box, no figure caption will be associated with the figure; and the single unit element will be marked up as a figure, without any caption.

If the caption string is typed into the prompt dialog box, and the OK button clicked, then a JavaScript Confirmation dialog box will appear, asking the user if he/she would want the caption to appear just above the single unit element. If the user clicks cancel, then the caption will appear just below the single unit element. If the user clicks OK, then the caption will appear just above the single unit element. The single unit element and the caption form the complete figure.

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 marked up figcaption text, can be corrected 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 ten 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 tenth part of a 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 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 Element for Figure and optional FigCaption

The button element code is:

                <button type="button" onclick='createFigure()' title='Select only single content, then click here.'>Figure</button> 

Read through the code, if that is not already done. The tool-tip for the button is 'Select only single content, then click here.' . This is the value of its title attribute. When the Figure command (button) is clicked, the createFigure() function is called.

JavaScript Coding for Marking Up

The createFigure() function definition is:

                function createFigure() {
                    let selection = window.getSelection();
                    let range = selection.getRangeAt(0);    
                    let newParent = document.createElement('figure');
                                        
                    range.surroundContents(newParent);
                    range.collapse();
                    
                    let figCap = window.prompt("Enter figure caption (it is optional):");
                    if (figCap != null) {
                        let bol = window.confirm("Do you want figure caption Above content ?");
                        if (bol == true) {
                            let inH = newParent.innerHTML;
                            let replacement = "<figcaption>" + figCap + "</figcaption>" + "<";
                            let result = inH.replace("<", replacement);
                            newParent.innerHTML = result;
                        }
                        else {
                            let inH = newParent.innerHTML;
                            let replacement = ">" + "<figcaption>" + figCap + "</figcaption>";
                            let result = inH.replace(">", replacement);
                            newParent.innerHTML = result;
                        }
                    }
                }

Remember that the user has to select the single unit element first, before clicking the Figure button.

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 figure node object in memory. The statement after surrounds the selected single unit element with the start figure tag (<figure>) and the end figure tag (</figure>), and produces the effect on screen, without any reloading. The selected unit code element remains selected. The line that follows, removes the highlight of the selection that indicates that the element is selected.

There after is the statement for the prompt dialog box. This statement will open the prompt dialog box. If the cancel button of the prompt dialog box is clicked, the rest of the code below, in the function definition will not be executed. If a string is typed into the text field of the dialog box, and the OK button clicked, then the rest of the code below the statement will be executed. The string typed is the text for the figure-caption.

The rest of the code is in two segments. The first code segment is to have the figcaption element just above the single unit element; and the second segment is to have the figcaption element just below the single unit element. The figcaption element code is within the figure start and end tags.

Note: the figcaption element does not appear on the screen with any styling. It is the responsibility of the web-developer (programmer) to style the figcaption element text, as he/she deems fit, in the CSS style sheet.

Conclusion

A single unit element has to be selected first by the client (end user), then the Figure button is clicked.

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 figure element to surround the selected single unit element is created in memory. Then the surrounding is done, and made effective at the screen, without any reloading. The selected single unit element remains selected on screen. The highlight of the selection that indicates that the single unit element is selected, is removed.

There is code to optionally place the figcaption just above or just below the single unit element.

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

Chrys