Just recently, I discovered the “hidden magic” of the Rich Text Editor works and wanted to look into it more.
This mechanism that is used is the document.designMode property on a full webpage, you gain access to to write to it as if it is a full scale word document… (https://developer.mozilla.org/en-US/docs/Web/API/Document/designMode). Now this is going to allow you to send in commands using the Document.execCommand (https://developer.mozilla.org/en-US/docs/Web/API/Document/execCommand) for things such as Justification, Font Size, Font Type, Cut, Copy and Paste (more about that in my next post).
Nicely enough, this also is compatible in all versions of the Desktop variety (Chrome, Edge, Firefox (aka Gecko), IE, Opera and Safari, but doesn’t appear to be readily available in the mobile environments except for Android WebView and Android Chrome.
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<html> <head> <title>My Document Editor</title> <script> function makeEdit(){ document.designMode = "on"; } </script> </head> <body onload="makeEdit();"> </body> </html> |
Unfortunately, this only works for entire documents. If you want to force a specific element to be editable, such as within the current document, you will have to use the element.contentEditable (https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/contentEditable) this can enable a div element to become editable and then you can start dumping details into it.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<html> <head> <title>My Document Editor</title> <script> function makeEdit(){ var DIV = document.getElementById("editable"); DIV.contentEditable = "true"; } </script> </head> <body onload="makeEdit();"> <h1>This is just a test of the designMode Control</h1> <div id="editable"> Hello </div> </body> </html> |
This particular method has less functionality within the the desktop bracket, but has more availability within the mobile environments. So long story short, looking at the specific version of the browser, and how you want to use it, you might need to create an IFrame within your application that will absorb the text and then process it, or if it is a later version of a browser, or perhaps a mobile implementation, use an DIV element and process it as such.
Until next time, Happy Coding and may you be blessed!