In my last post I talked about how to make a document or element editable and mentioned about Document.execCommand. Now, I am going to continue the conversation.
The document.execCommand (https://developer.mozilla.org/en-US/docs/Web/API/Document/execCommand) allows you to have the browser apply specific commands to the document that is marked as document.designMode = “on”; and it is also very important to note that many, if not most commands, need to be tested against the browser prior to be used.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
<html> <head> <title>My Document Editor</title> <script> function makeEdit(){ document.designMode = "on"; } function RunCommand(Command){ document.execCommand(Command); } </script> </head> <body onload="makeEdit();"> <h1>This is just a test of the designMode Control</h1> <input type=button Value="Left" onClick="RunCommand('justifyLeft')" /> <input type=button Value="Center" onClick="RunCommand('justifyCenter')" /> <input type=button Value="Right" onClick="RunCommand('justifyRight')" /> <input type=button Value="Number" onClick="RunCommand('insertOrderedList')" /> <input type=button Value="Bullet" onClick="RunCommand('insertUnorderedList')" /> <div id="editable"> Hello </div> </body> </html> |
Now, if you are looking to handle Rich Text Editing (RTE) within a DIV element, then this actually doesn’t change a bit (I was actually surprised by this… the browser assumes that the insertion point is all that is needed to handle the commands and will process through it appropriately… if you look at the difference (I highlighted only the difference between this and the previous code for the next code section), the only difference is what is editable.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
<html> <head> <title>My Document Editor</title> <script> function makeEdit(){ var DIV = document.getElementById("editable"); DIV.contentEditable = "true"; } function RunCommand(Command){ document.execCommand(Command); } </script> </head> <body onload="makeEdit();"> <h1>This is just a test of the designMode Control</h1> <input type=button Value="Left" onClick="RunCommand('justifyLeft')" /> <input type=button Value="Center" onClick="RunCommand('justifyCenter')" /> <input type=button Value="Right" onClick="RunCommand('justifyRight')" /> <input type=button Value="Number" onClick="RunCommand('insertOrderedList')" /> <input type=button Value="Bullet" onClick="RunCommand('insertUnorderedList')" /> <div id="editable"> Hello </div> </body> </html> |
Anyway, this does open up a whole list of doors for me, with just a quick look at the User Agent string, and then determining which commands are available and which are not, it becomes very easy to make my own RTE editor, both as an mobile and desktop version. At some point, I am probably going to build out a full setup and walk you through that, but for now, Monty Shokeen made a simple walk through last year called Create a WYSIWYG Editor With the contentEditable Attribute, and I did like how well he designed it. The only thing I might do differently is parse through the User Agent and give more/less commands based upon what the end user is showing.
Until next time, Happy Coding and may you be blessed!