summernote

HTML

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css">
<script src="http://yourjavascript.com/10487222222/summernote.js"></script>
<textarea class="summernote">
    <p>Seasons <b>coming up</b></p>
</textarea>

CSS

<style type="text/css"> .note-editor {
    position: relative;
    border: 1px solid #a9a9a9
}

.note-editor .note-dropzone {
    position: absolute;
    z-index: 1;
    display: none;
    color: #87cefa;
    background-color: white;
    border: 2px dashed #87cefa;
    opacity: .95;
    pointer-event: none
}

.note-editor .note-dropzone .note-dropzone-message {
    display: table-cell;
    font-size: 28px;
    font-weight: bold;
    text-align: center;
    vertical-align: middle
}

.note-editor .note-dropzone.hover {
    color: #098ddf;
    border: 2px dashed #098ddf
}

.note-editor.dragover .note-dropzone {
    display: table
}

.note-editor .note-toolbar {
    background-color: #f5f5f5;
    border-bottom: 1px solid #a9a9a9
}

.note-editor.fullscreen {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1050;
    width: 100%
}

.note-editor.fullscreen .note-editable {
    background-color: white
}

.note-editor.fullscreen .note-resizebar {
    display: none
}

.note-editor.codeview .note-editable {
    display: none
}

.note-editor.codeview .note-codable {
    display: block
}

.note-editor .note-statusbar {
    background-color: #f5f5f5
}

.note-editor .note-statusbar .note-resizebar {
    width: 100%;
    height: 8px;
    cursor: ns-resize;
    border-top: 1px solid #a9a9a9
}

.note-editor .note-statusbar .note-resizebar .note-icon-bar {
    width: 20px;
    margin: 1px auto;
    border-top: 1px solid #a9a9a9
}

.note-editor .note-editable {
    padding: 10px;
    overflow: auto;
    outline: 0
}

.note-editor .note-editable[contenteditable="false"] {
    background-color: #e5e5e5
}

.note-editor .note-codable {
    display: none;
    width: 100%;
    padding: 10px;
    margin-bottom: 0;
    font-family: Menlo, Monaco, monospace, sans-serif;
    font-size: 14px;
    color: #ccc;
    background-color: #222;
    border: 0;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    border-radius: 0;
    box-shadow: none;
    -webkit-box-sizing:...

JavaScript

$(document).ready(function() {
       $('.summernote').on('focus', function() {
           $('.summernote').off('focus');
           $('.summernote').summernote({
               focus: true,
               toolbar: [
                   ['insert', ['table']],
               ],
           });
       });
        $.fn.extend({
            placeCursorAtEnd: function() {
                // Places the cursor at the end of a contenteditable container (should also work for textarea / input)
                if (this.length === 0) {
                    throw new Error("Cannot manipulate an element if there is no element!");
                }
                var el = this[0];
                var range = document.createRange();
                var sel = window.getSelection();
                var childLength = el.childNodes.length;
                if (childLength > 0) {
                    var lastNode = el.childNodes[childLength - 1];
                    var lastNodeChildren = lastNode.childNodes.length;
                    range.setStart(lastNode, lastNodeChildren);
                    range.collapse(true);
                    sel.removeAllRanges();
                    sel.addRange(range);
                }
                return this;
            }
        });
   });