Rich TextBox Editor HTML/JavaScript

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

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

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

HTML Code

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

Javascript

<script>
    CKEDITOR.replace('editor1');
    CKEDITOR.replace('editor2');

    function getData() {
        //Get data written in first Editor
        var editor_data = CKEDITOR.instances['editor1'].getData();
        //Set data in Second Editor which is written in first Editor
        CKEDITOR.instances['editor2'].setData(editor_data);
    }
</script>

Thanks !!