tiny-editor | Creating a WYSIWYG Rich Text Editor with Pure JavaScript

tiny-editor is a WYSIWYG rich text editor implemented with pure JavaScript and Font Awesome iconic font.

tiny-editor is a WYSIWYG rich text editor implemented with pure JavaScript and Font Awesome iconic font. <div class="ui_meta">
 <table>
 <tr class="meta_head"><td>Author</td><td>Links</td><td>Made with</td><td>Last update</td></tr>
 <tr><td>"fvilers"</td><td><a href=""https://github.com/fvilers/tiny-editor"" target="_blank">Office Home</a></td><td>"JavaScript</td><td>Sep 18, 2020</td></tr>
 </table>
 </div> <h2>How to create a web editor using tiny-editor?</h2> 1.Install the tiny-editor <pre class="EnlighterJSRAW" data-enlighter-language="null"># NPM $ npm install tiny-editor --save</pre> 2.Import bundle.js in html <pre class="EnlighterJSRAW" data-enlighter-language="null"><script src="/dist/bundle.js"></script></pre> 3.Import Font Awesome <pre class="EnlighterJSRAW" data-enlighter-language="null"><link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous"></pre> 4.Create a div container and add <span style="color: #ff0000;">data-tiny-editor</span> attribute for it. tiny-editor will be displayed in this div <pre class="EnlighterJSRAW" data-enlighter-language="null"><div data-tiny-editor> <p> Default Text Here </p> </div></pre> 5.You can use <span style="color: #ff0000;">data</span> attribute to set tiny-editor <pre class="EnlighterJSRAW" data-enlighter-language="null"><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></pre>

AuthorLinksMade withLast update
fvilersOffice HomeJavaScriptSep 18, 2020

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>

Leave a Reply

Your email address will not be published. Required fields are marked *