Introduction

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 the user's app folder from a 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');
  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 !!