TinyMCE with Image insert and BootstrapValidator

by phuyem

HTML

<script src="//tinymce.cachefly.net/4.1/tinymce.min.js"></script>
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/jquery.bootstrapvalidator/0.5.1/css/bootstrapValidator.min.css">
<script src="http://cdn.jsdelivr.net/jquery.bootstrapvalidator/0.5.1/js/bootstrapValidator.min.js"></script>
<form id="tinyMCEForm" method="post" class="form-horizontal">
    <div class="form-group">
        <label class="col-md-3 control-label">Hobbies</label>
        <div class="col-md-9">
            <textarea class="form-control" name="hobbies" style="height: 200px;"></textarea>
        </div>
    </div>
    <div class="form-group">
        <div class="col-md-5 col-md-offset-3">
            <button type="submit" name="myBtn" class="btn btn-default">Validate</button>
        </div>
    </div>
</form>

CSS

#tinyMCEForm {
    margin: 2.5% 2.5%;
}

JavaScript

$(document).ready(function () {
    tinymce.init({
        selector: 'textarea',
        setup: function (editor) {
            editor.on('keyup', function (e) {
                console.debug('Editor contents was modified. Contents: ' + editor.getContent({
                    format: 'text'
                }));
                $('#tinyMCEForm').bootstrapValidator('revalidateField', 'hobbies');
            });
        }
    });
    $('#tinyMCEForm')
        .bootstrapValidator({
        excluded: [':disabled'],
        feedbackIcons: {
            valid: 'glyphicon glyphicon-ok',
            invalid: 'glyphicon glyphicon-remove',
            validating: 'glyphicon glyphicon-refresh'
        },
        fields: {
            hobbies: {
                validators: {
                    callback: {
                        message: 'The hobbies must be between 5 and 200 characters long',
                        callback: function (value, validator, $field) {
                            // Get the plain text without HTML
                            var text = tinyMCE.activeEditor.getContent({
                                format: 'text'
                            });

                            return text.length <= 200 && text.length >= 5;
                        }
                    }
                }
            }
        }
    })
        .on('success.form.bv', function (e) {
        e.preventDefault();
    });
});