demo/button-example.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>MediumEditor - Button Example</title>
    <link rel="stylesheet" href="css/demo.css">
    <link href="https://netdna.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.css" rel="stylesheet">
    <link rel="stylesheet" href="../dist/css/medium-editor.css">
    <link rel="stylesheet" href="../dist/css/themes/bootstrap.css">
</head>
<body>
    <div id="container">
        <h1>Medium Editor</h1>
        <div class="editable">
            <h2>Font Awesome</h2>
            <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>
    <p style="text-align: center;"><small><a style="color: #333;" target="_blank" href="http://www.goodreads.com/reader/475-great-expectations">Source</a></small></p>
    <script src="../dist/js/medium-editor.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/rangy/1.3.0/rangy-core.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/rangy/1.3.0/rangy-classapplier.min.js"></script>

    <script>
        rangy.init();

        var HighlighterButton = MediumEditor.extensions.button.extend({
            name: 'highlighter',
            tagNames: ['mark'],
            contentDefault: '<b>H</b>',
            contentFA: '<i class="fa fa-paint-brush"></i>',
            aria: 'Highlight',
            action: 'highlight',

            init: function () {
                MediumEditor.extensions.button.prototype.init.call(this);

                this.classApplier = rangy.createClassApplier('highlight', {
                    elementTagName: 'mark',
                    normalize: true
                });
            },

            handleClick: function (event) {
                this.classApplier.toggleSelection();

                // Ensure the editor knows about an html change so watchers are notified
                // ie: <textarea> elements depend on the editableInput event to stay synchronized
                this.base.checkContentChanged();
            }
        });
        var editor = new MediumEditor('.editable', {
                toolbar: {
                    buttons: ['bold', 'italic', 'underline', 'highlighter']
                },
                buttonLabels: 'fontawesome',
                extensions: {
                    'highlighter': new HighlighterButton()
                }
            });
    </script>
</body>
</html>