In this tutorial, We will learn how to add custom jquery validation for upload images in summernotes. Summernote WYSIWYG editor is a simple and fast bootstrap editor. 




Example:

<!DOCTYPE html>
<html>
    <head>
        <title>Summernote image size limit validation</title>
        <script type="text/javascript" src="https://code.jquery.com/jquery-1.9.1.min.js"></script> 
        <link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" />
        <script type="text/javascript" src="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
        <link rel="stylesheet" href="https://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css" />

        <!-- include summernote css/js-->
        <link href="http://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.4/summernote.css" rel="stylesheet">
        <script src="http://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.4/summernote.js"></script>
    </head>
    <body>
        <div class="container">
            <h2>Summernote</h2>
            <div id="summernote">Hello Summernote</div>
        </div>
    </body>
    <script type="text/javascript">
        $(document).ready(function () {
            $('#summernote').summernote({
                height: 300,
                callbacks: {
                    onImageUpload: function (image) {
                        var sizeKB = image[0]['size'] / 1000;
                        var tmp_pr = 0;
                        if (sizeKB > 200) {
                            tmp_pr = 1;
                            alert("pls, select less then 200kb image.");
                        }
                        if (image[0]['type'] != 'image/jpeg' && image[0]['type'] != 'image/png') {
                            tmp_pr = 1;
                            alert("pls, select png or jpg image.");
                        }
                        if (tmp_pr == 0) {
                            var file = image[0];
                            var reader = new FileReader();
                            reader.onloadend = function () {
                                var image = $('<img>').attr('src', reader.result);
                                $('#editor').summernote("insertNode", image[0]);
                            }
                            reader.readAsDataURL(file);
                        }
                    }
                }
            });
        });
    </script>
</html>


Thanks, May this example help you...