This tutorial explains How to Create Markups for the Insertion of Hyperlinks and Images in an HTML Form Word Processor that also does Spelling Check. 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.

For the insertion of hyperlink and image, the end user (client) has to place the cursor at a position for the insertion. Click the Insert Hyperlink Button. Then two JavaScript prompt windows will appear one after the other. For the insertion of the hyperlink, the first prompt window will ask for the name (short description) of the hyperlink, and the next one will ask for the URL of the hyperlink. For the insertion of the image, the first prompt window will ask for the URL of the hyperlink, and the next one will ask for the alternative name of the image. This alt (alternative name) for the image is optional. The client is not obliged to give it.

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 hyperlink name (short description), can be corrected after the hyperlink has been inserted. 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 third 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 Hyperlink Insertion

The button element code for inserting hyperlink is:

    <button type='button' onclick='createHyperlink()' title='Place cursor at intended position, then click here.'>Insert Hyperlink</button>

The tool-tip for the client (end user) is 'Place cursor at intended position, then click here.' . It is the value of the title attribute. When this button is clicked, the JavaScript function, createHyperlink() is called.

Button for Image Insertion

The button code for inserting image is:

    <button type='button' onclick='insertImage()' title='Place cursor at intended position, then click here.'>Insert Image</button>

The tool-tip for the client (end user) is 'Place cursor at intended position, then click here.' . It is the value of the title attribute. When this button is clicked, the JavaScript function, insertImage() is called.

JavaScript Coding for the Insertions

Hyperlink Insertion

The client has to place the cursor first, at the position where the hyperlink is to be inserted, and then click the Insert Hyperlink button. The JavaScript function for what follows is:

                function createHyperlink() {
                    let linkContent = window.prompt("Enter content (name) of hyperlink:");
                    let url = window.prompt("Enter URL of hyperlink (e.g. https//www.examplee.com/file.ext):");

                    let selection = window.getSelection();
                    let range = selection.getRangeAt(0);
                    let newParent = document.createElement('a');
                    
                    newParent.href = url;
                    newParent.innerHTML = linkContent;
                    range.insertNode(newParent);    
                    range.collapse();    
                }

The first statement in the function, prompts the end user (client) for the name of the hyperlink. This name is held in the variable, linkContent. The second statement in the function, prompts the end user (client) for the URL of the hyperlink. This URL is held in the variable, url.

The next statement in the code obtains a JavaScript memory object that represents the selection. The selection here is just a point and not a sequence of characters. 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 next statement creates an 'a' node object in memory. 'a' means anchor element, which is the same as hyperlink.

The statement after attaches the url as a child node to the anchor element still in memory. The statement that follows attaches the name of the hyperlink as another child node to the anchor element still in memory. The statement after, inserts the node in memory into the contenteditable div, making it visible at the screen. The name of the hyperlink remains selected. The last statement removes the highlight of the selection that indicates that the text is selected.

Image Insertion

The client has to place the cursor first, at the position where the image is to be inserted, and then click the Insert Image button. The JavaScript function for what follows is:

                function insertImage() {
                    let url = window.prompt("Enter URL of image (e.g. https//www.examplee.com/imageName.ext):");
                    let alt = window.prompt("Enter alternative optional short description of image:");

                    let selection = window.getSelection();
                    //let range = document.createRange();
                    let range = selection.getRangeAt(0);
                    let newParent = document.createElement('img');
                    
                    newParent.src = url;
                    newParent.alt = alt;
                    range.insertNode(newParent);    
                    range.collapse();   
                }

The first statement in the function, prompts the end user (client) for the URL of the image file. This URL is held in the variable, url. The second statement in the function, prompts the end user (client) for the alt of the image. "alt" means Alternative Text. In case the image could not be downloaded, the alternative text will appear where the image should have appeared. The alt is held in the variable, alt.

The next statement in the code obtains a JavaScript memory object that represents the selection. The selection here is just a point and not a sequence of characters. 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 next statement creates an 'img' node object in memory. 'img' means image.

The statement after attaches the url as a child node, to the image element still in memory. The statement that follows attaches the alt of the image as another child node to the image element still in memory. The statement after, inserts the node in memory into the contenteditable div, making it visible at the screen. The image remains selected. The last statement removes the highlight of the selection that indicates that the image is selected.

Conclusion

The hyperlink or image is inserted in the contenteditable div in a similar way to which the basic HTML text elements are marked up for formatting, as explained in the previous parts of the series. However, in the case of hyperlink or image, the selection is just one point. And instead of surrounding the selected text with the start and end tags for formatting, the created node is inserted.

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

Chrys