wysiwyg.js is a tiny 3kb wysiwyg editor plugin written in js (no dependencies).
How to create a web editor using wysiwyg.js?
1.Import wysiwyg.js and wysiwyg.css in your html page
<link rel="stylesheet" href="wysiwyg.css"> <script src="wysiwyg.js"></script>
2.Create a div container with id= wysiwyg
<div id="wysiwyg" data-height="100vh" data-width="100%"></div>
Then a web editor will be displayed.
![tiny-editor is a WYSIWYG rich text editor implemented with pure JavaScript and Font Awesome iconic font. [meta author="fvilers" office_home="https://github.com/fvilers/tiny-editor" language="JavaScript "][/meta] How to create a web editor using tiny-editor? 1.Install the tiny-editor # NPM $ npm install tiny-editor --save 2.Import bundle.js in html <script src="/dist/bundle.js"></script> 3.Import Font Awesome <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous"> 4.Create a div container and add data-tiny-editor attribute for it. tiny-editor will be displayed in this div <div data-tiny-editor> <p> Default Text Here </p> </div> 5.You can use data attribute to set tiny-editor <div data-tiny-editor data-bold="no" data-formatblock="no" data-italic="no" data-underline="no" data-fontname="no" data-forecolor="no" data-justifyleft="no" data-justifycenter="no" data-justifyright="no" data-insertorderedlist="no" data-insertunorderedlist="no" data-outdent="no" data-indent="no" data-remove-format="no"> <p> Default Text Here </p> </div>](https://www.uicodex.com/wp-content/uploads/2020/09/tiny-editor-Creating-a-WYSIWYG-Rich-Text-Editor-with-Pure-JavaScript.png)
