Examples / Compatibility

<!-- Include Summernote CSS files -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/summernote/0.5.1/summernote.css" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/summernote/0.5.1/summernote-bs3.css" rel="stylesheet">

<!-- Include Summernote JS file -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/summernote/0.5.1/summernote.min.js"></script>

<form id="summernoteForm" method="post" class="form-horizontal">
    <div class="form-group">
        <label class="col-md-3 control-label">Post title</label>
        <div class="col-md-5">
            <input type="text" class="form-control" name="title" />
        </div>
    </div>

    <div class="form-group">
        <label class="col-md-3 control-label">Post content</label>
        <div class="col-md-9">
            <textarea class="form-control" name="content" style="height: 400px;"></textarea>
        </div>
    </div>
</form>

$(document).ready(function() {
    function validateEditor() {
        // Revalidate the content when its value is changed by Summernote
        $('#summernoteForm').bootstrapValidator('revalidateField', 'content');
    };

    $('#summernoteForm')
        .bootstrapValidator({
            excluded: [':disabled'],
            feedbackIcons: {
                valid: 'glyphicon glyphicon-ok',
                invalid: 'glyphicon glyphicon-remove',
                validating: 'glyphicon glyphicon-refresh'
            },
            fields: {
                title: {
                    validators: {
                        notEmpty: {
                            message: 'The title is required and cannot be empty'
                        }
                    }
                },
                content: {
                    validators: {
                        callback: {
                            message: 'The content is required and cannot be empty',
                            callback: function(value, validator) {
                                var code = $('[name="content"]').code();
                                // <p><br></p> is code generated by Summernote for empty content
                                return (code !== '' && code !== '<p><br></p>');
                            }
                        }
                    }
                }
            }
        })
        .find('[name="content"]')
            .summernote({
                height: 400,
                onkeyup: function() {
                    validateEditor();
                },
                onpaste: function() {
                    validateEditor();
                }
            });
});