Although document.execCommand was never fully developed, it is still implemented in most web browsers. When used with contentEditable and textarea you can embed a more robust document editor into web pages.
RichTX is a Javascript library, richtx.js, that can be used, like say, a fancy textarea that you might use when more advanced text formatting is wanted.
The following compares coding an HTML textarea and a RichTX:
<!-- textarea -->
<textarea id="TA" wrap="on" spellcheck="false"></textarea>
<!-- RichTX -->
<div id="RTX1"></div>
'wrap' and 'spellcheck' are set to 'on' and 'false' by default for the RichTX object.
To create, a RichTX object it must be instantiated and displayed.
Example (Javascript):
/* Instantiate RichTX object
Each RichTX object consists of a DIV which will contain
an overlapping contextEditable area and a textarea. */
const Rtx1 = new RichTX("RTX1", "CE1", "TA1");
/* Values to initialize a RichTX object:
1. ID of the DIV used for the RichTX
2. ID of the RichTX contentEditable
3. ID of the RichTX textarea */
Rtx1.displayAtTarget();
/* This method is required to activate aRichTX object at
the DIV that was set up. */By default BOLD (ctrl-B), ITALIC (ctrl-I), and UNDERLINE (ctrl-U) are available with no further code needed.
RichTX provides several methods, variables, and a function for developers to build-in many more text formatting features.
RichTX_obj.displayAtTarget();
Example usage:
Rtx1.displayAtTarget();As shown above, this method displays the instantiated RichTX object onto the page. Also two object ID become available for the developer:
- RichTX.CEobj
- RichTX.TAobj
Use these whenever the object ID is needed for the contentEditable or textarea in the RichTX object. For example to set up a Ctrl-S (Save) for a specific RichTX:
Rtx2.CEobj.addEventListener('keydown', function(event) {
if ((event.ctrlKey || event.metaKey) && event.key === 's') {
event.preventDefault();
txt = Rtx2.getText();
// code to save txt ...
}
});
RichTX_obj.switchView();
Example usage:
<input type="button" onclick="Rtx1.switchView();" value="Switch" />Toggles the contentEditable view and the HTML view.
RichTX_obj.setText(text);
Example usage:
function rtx1Load() {
// normally text fetched from a server file
text = `
This is text that would be fetched from
an async call to read a server file.`;
Rtx1.setText(text); // then put it into the RichTX object
}RichTX_obj.getText();
Example usage:
text = Rtx1.getText();
// text now has encoded URI components
// and is ready to be written to your file or database
RTXexec is a wrapper for a document.execCommand() function. Required values are a command, and for some commands a value is needed. Commands are always strings. Values can be a string or a number.
Example:
RTXexec("Indent"); // starts indented text
RTXexec("fontName", "Arial"); // start Arial font
RTXexec("fontSize", 3); // change font size (1-7)Note that the RichRTX instance object is not required because the document.execCommand scopes the entire document. The command is applied at the text insertion point of the contentEditable area in focus which is part of each RichRTX instance.
Changes the document background color. In styleWithCss mode, it affects the background color of the containing block instead. This requires a value string to be passed in as a value argument.
Toggles bold on/off for the selection or at the insertion point.
Makes the content document either read-only or editable. This requires a boolean true/false as the value argument.
Creates an hyperlink from the selection, but only if there is a selection. Requires a URI string as a value argument for the hyperlink's href. The URI must contain at least a single character, which may be whitespace.
Adds a <small> tag around the selection or at the insertion point.
Changes the font name for the selection or at the insertion point. This requires a font name string (like "Arial") as a value argument.
Changes the font size for the selection or at the insertion point. This requires an integer from 1 - 7 as a value argument.
Changes a font color for the selection or at the insertion point. This requires a hexadecimal color value string as a value argument.
Adds an HTML block-level element around the line containing the current selection, replacing the block element containing the line if one exists Requires a tag-name string as a value argument. Virtually all block-level elements can be used.
Adds a heading element around a selection or insertion point line. Requires the tag-name string as a value argument (i.e., "H1", "H6"). (Not supported by Safari.)
Changes the background color for the selection or at the insertion point. Requires a color value string as a value argument. useCSS must be true for this to function.
Adds a <big> tag around the selection or at the insertion point.
Indents the line containing the selection or insertion point. In Firefox, if the selection spans multiple lines at different levels of indentation, only the least indented lines in the selection will be indented.
Controls whether the Enter key inserts a <br> element,
or splits the current block element into two.
Inserts a <hr> element at the insertion point, or replaces the selection with it.
Inserts an HTML string at the insertion point (deletes selection). Requires a valid HTML string as a value argument.
Use insertHTML for this. The code could look something like this:
let val = prompt("Enter URL of Image");
if (url) RTXexec("insertHTML", `<img src='${url}' width="" height="" />`);Creates a numbered ordered list for the selection or at the insertion point.
Creates a bulleted unordered list for the selection or at the insertion point.
Inserts a paragraph around the selection or the current line.
Inserts the given plain text at the insertion point (deletes selection).
Toggles italics on/off for the selection or at the insertion point.
Centers the selection or insertion point.
Justifies the selection or insertion point.
Justifies the selection or insertion point to the left.
Right-justifies the selection or the insertion point.
Outdents the line containing the selection or insertion point.
Redoes the previous undo command.
Removes all formatting from the current selection.
Selects all of the content of the editable region.
Toggles strikethrough on/off for the selection or at the insertion point.
Toggles subscript on/off for the selection or at the insertion point.
Toggles superscript on/off for the selection or at the insertion point.
Toggles underline on/off for the selection or at the insertion point.
Undoes the last executed command.
Removes the anchor element from a selected hyperlink.
CSS can be applied to adjust height, width, colors, etc. Apply CSS to both the contentEditable div and the textarea. Note the height and width must be the same for both.
Example:
<div id="RTX1"></div><br>
<script>
const Rtx1 = new RichTX("RTX1", "CE1", "TA1");
Rtx1.displayAtTarget(); #CE1 {
padding: 5px;
width: 95%; /* same as #TA1 */
height: 250px; /* same as #TA1 */
border: 1px solid navy;
overflow: auto;
}
#TA1 {
height: 250px; /* same as #CE1 */
width: 95%; /* same as #CE1 */
background: #111;
color: lightgreen;
font: normal 10pt monospace;
}