Rich TextBox Editor HTML/JavaScript

Here, I am going to create a new rich text box editor and get and set rich textbox contents.

I have used a couple of different textbox editors available online like Froala Editor, NicEdit, TinyMCE etc but found issues during implementation at the end, as I was looking for Image inbuilt editor where I could keep image binary at the end on a server and later use it, not on a third party server.

Most of the editors use the image from their server to upload the image or they keep/read your image from the local path in user's app folder from local machine the same way MS Word does.

So, I found CKEditor which is pretty simple and easy to implement. It supports direct copy paste from MS Word along with other tools.

I am using HTML and JavaScript only for this implementation.

 
External Reference
  1. <script src="https://cdn.ckeditor.com/4.9.2/standard/ckeditor.js"></script>  

HTML Code

  1. <textarea name="editor1"></textarea><br/> //Write data  
  2. <textarea name="editor2"></textarea><br />//Set Data  
  3. <input type="button" id="getData" name="getData" value="Get and Set Data" onclick="getData()" />  

Javascript

  1. <script>  
  2.     CKEDITOR.replace('editor1');  
  3.     CKEDITOR.replace('editor2');  
  4.   
  5.     function getData() {  
  6.         //Get data written in first Editor   
  7.         var editor_data = CKEDITOR.instances['editor1'].getData();  
  8.         //Set data in Second Editor which is written in first Editor  
  9.         CKEDITOR.instances['editor2'].setData(editor_data);  
  10.     }  
  11. </script>  
Thanks !!