Paste plain text into contenteditable.

Override system paste action and use a javascript prompt to paste plain text instead of styled text.

by sarathsprakash

HTML

<div contenteditable="true"  placeholder="Write a Reply"></div>

CSS

[contenteditable=true]:empty:before {
    content: attr(placeholder);
}

JavaScript

/*$('[contenteditable]').bind('resize', function (e) {
    var txt = $(this);
    if (txt.outerHeight() == 22 || txt.text().trim().length <= 0) console.log("hello");
});

$('[contenteditable]').on('keydown', function (e) {
    if (e.keyCode == 13 && !e.shiftKey) {
        $(this).trigger('resize');
        e.preventDefault();
    }
});*/



(function ($) {
    var minh =0;
    var minw=0;
    $.fn.editable = function (options) {
        var me = $(this);
        var settings = $.extend({
            minheight: 30,
            minwidth: 500,
            placeholder: "Write a Reply",
            maxheight: null,
            maxwidth: 500,
        }, options);
        return me.each(function () {
            var it = $(this);
            minh=settings.minheight;
            it.attr('contenteditable',true);
            if (this.tagName.toLowerCase() == "div") {
                if (settings.placeholder) it.text(settings.placeholder);
                if (settings.minheight) it.css('min-height', settings.minheight);

                if (settings.maxheight) it.css('max-height', settings.maxheight);
                if (settings.minwidth) it.css('min-width', settings.minwidth);

                if (settings.maxheight) it.css('max-width', settings.maxwidth);

            }
        });
    };
    
 $('[contenteditable=true]').bind('resize', function (e) {
    console.log("hello");
});

$('[contenteditable=true]').on('keydown', function (e) {
    var txt = $(this);
     console.log(txt.height());
    if (txt.height() <= minh && txt.text().trim().length <= 0)
      txt.trigger('resize');
    if (e.keyCode == 13 && !e.shiftKey) {
        e.preventDefault();
    }
    
});
})(jQuery);

$("div").editable();