www.xbdev.net
xbdev - software development
Saturday June 12, 2021
home | about | contact | Donations

     
 

HTML5 and Javascript

Example based approach ....

 

WYSIWYG Javascript/HTML Editor

Writing and editing documents in your browser, no libraries or plugins!



The editor is really elegant and quiet amazing - just goes to show what you can do .... The reason it's so short and compact (couple of hundred lines), is because it uses the 'execCommand' to perform formatting operations. You don't need to worry about searching for cursor locations, or tracking focus/unfocused elements, it does it all for you!! Damm! Isn't that great.

You can see a live version of the implementation below - shows the editor, live output and the generated html. At the bottom of the page, you can run/edit or test the code to experiment with the features.
Have fun!!


WYSWYG Editor

Text output:

HTML output:


  

Click on the tab to select the option, edit the scripts in the output underneath (edit and play around with the implementation):





Possible extra features to add:
* Add the option to change the font size
* Add button to set the color of selected words
* Add code syntax highlighting (e.g., see References, PrismJS)
* Add undo/redo option (already supported by the commandExec, just got to add the extra few lines)



References

* Misc Javascript Tutorials [Link]
* Online Editor/Compiler [Link]
* Beautiful Code Highlighting [Link]





 

 
 Visitor: 9534626
{ 229.27.38.75 }
Copyright (c) 2002-2020 xbdev.net - All rights reserved.
Designated articles, tutorials and software are the property of their respective owners.