JSFiddle - React, Tailwind, and code Playground

by kidino

HTML

<script src="http://tinymce.cachefly.net/4.0/tinymce.min.js"></script>
<div id="tinymce_holder"></div>
<div class="paper">
    <div class="edit">e</div>
</div>
<div id="info"></div>

CSS

#tinymce_holder {
    height: 71px;
}
.paper {
    height: 10cm;
    width: 10cm;
    border: 1px solid #ccc;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    overflow: hidden;
}
.edit {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    padding: 1cm;
}

JavaScript

tinymce.init({
    selector: "div.edit",
    theme: "modern",
    add_unload_trigger: false,
    schema: "html5",
    inline: true,
    toolbar: "undo redo",
    fixed_toolbar_container: "#tinymce_holder",
    statusbar: false,
    setup: function (ed) {
        ed.on('keyup', function (e) {
            $('#info').html('page height:' + $('.paper').css('height') + ' edit height:' + $('.edit').css('height'));

            if ($('.edit').css('height') > $('.paper').css('height')) {
                alert('nextpage');
            }
        });
    }
});