Summernote jquery custom event callback

Question

I am trying to get jquery custom event style callbacks to work with Summernote. The process is outlined here: https://summernote.org/deep-dive/#callbacks but thus far I can't get it to work i.e. the console doesn't say test. I followed the documentation but still don't understand why it isn't working.

<script>
    $(document).ready(function () {
        $('#content').summernote({
            minHeight: 225,
            toolbar: [['style', ['style']], ['font', ['bold', 'italic', 'underline', 'clear']], ['para', ['ul', 'ol', 'paragraph']], ['insert', ['link', 'picture']], ['view', ['fullscreen', 'codeview', 'help']]]
        });
        $('#content').on('summernote.init', function () {
            console.log('test');
        });
    });
</script>

<div class="form-group">
    <label for="content" class="control-label">Content</label>
    <textarea name="content" cols="40" rows="10" id="content" class="form-control automate-wysiwyg" ></textarea>
</div>

Answer 1

You are listening your event listener after summernote has been initiated, change the order and register the event handler before the call to summernote(...