Easy editor Implementation in form

Title Description Lorem <b>ipsum</b> dolor sit amet, consectetur adipisicing elit. Ab, perferendis ut consequuntur corrupti maxime possimus atque quod doloribus, blanditiis amet cum vitae obcaecati nihil, sed nesciunt nemo recusandae in repellendus. Save article     After you hit save data will show in below

You can change the entire look and feel, can able to add button / event / can do anything with it. Read documentation here or more example here

HTML:

<form action="" id="myform" class="demo-form">
    <label for="title">Title</label>
    <input type="text" id="title" placeholder="Enter title">

    <label for="description">Description</label>
    <textarea name="description" id="description" rows="10" placeholder="Enter article body"></textarea>

    <button type="submit" class="btn">Save article</button>
</form>

CSS:

<link rel="stylesheet" href="path_to/easyeditor.css">

JS:

<script src="path_to/jquery.min.js"></script>
<script src="path_to/jquery.easyeditor.js"></script>

<script>
    jQuery(document).ready(function($) {
        new EasyEditor('#description', {
            css: ({
                minHeight: '300px',
                maxHeight: '500px'
            }),
            onLoaded: function(){
                console.log('Easy Editor Loaded!');
            },
            buttons : ['bold', 'italic', 'link', 'code', 'x', 'source']
        });

        $('your_submit_button').click(function(event) {
            event.preventDefault();

            var data = {
                title: $('#title').val(),
                description: $('#description').val()
            };

            console.log(data);
        });

    });
</script>