demo/relative-toolbar.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>medium editor | demo</title>
    <link rel="stylesheet" href="css/demo.css">
    <link href="http://netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.css" rel="stylesheet">
    <link rel="stylesheet" href="../dist/css/medium-editor.css">
    <link rel="stylesheet" href="../dist/css/themes/default.css">
</head>
<body>
    <a href="https://github.com/yabwe/medium-editor" class="github-link"><img style="z-index: 100;position: absolute; top: 0; right: 0; border: 0;" src="https://s3.amazonaws.com/github/ribbons/forkme_right_gray_6d6d6d.png" alt="Fork me on GitHub"></a>
    <div id="container">
        <h1>Medium Editor</h1>
        <div class="editable">
            <h3>Relative Toolbar Container</h3>
            <p>My father’s family name being <a href="https://en.wikipedia.org/wiki/Pip_(Great_Expectations)">Pirrip</a>, and my Christian name Philip, my infant tongue could make of both names nothing longer or more explicit than Pip. So, I called myself Pip, and came to be called Pip.</p>

            <p>I give Pirrip as my father’s family name, on the authority of his tombstone and my sister,—Mrs. Joe Gargery, who married the blacksmith. As I never saw my father or my mother, and never saw any likeness of either of them (for their days were long before the days of photographs), my first fancies regarding what they were like were unreasonably derived from their tombstones...</p>
        </div>
    </div>
    <hr>
    <div id="someRelativeDiv" style="height: 80px; border: 1px solid red;"></div>
    <script src="../dist/js/medium-editor.js"></script>
    <script>
        var editor = new MediumEditor('.editable', {
                toolbar: {
                    buttons: ['bold', 'italic', 'underline', 'strikethrough', 'quote', 'anchor', 'image', 'justifyLeft', 'justifyCenter', 'justifyRight', 'justifyFull', 'superscript', 'subscript', 'orderedlist', 'unorderedlist', 'pre', 'outdent', 'indent', 'h2', 'h3'],
                    relativeContainer: document.getElementById('someRelativeDiv')
                }
            });
    </script>
</body>
</html>