medium-editor-auto-style-extension

AutoStyleExtension for Medium Editor

AutoStyleExtension for Medium Editor allows auto-styling of words. The auto-styling is defined by a configuration object, which gets passed to the constructur.

In detail:

1. Words and the CSS style to be applied to these words,
2. whether case matching is to be performed,
3. whether words only are matched, or substrings, too.

Try out the live example.

Installation

npm install medium-editor-auto-style-extension

Usage (via NPM)

index.js

MediumEditor = require('medium-editor');
AutoStyleExtension = require('medium-editor-auto-style-extension');

Usage (vi Header)

index.html

<script type="text/javascript" src="<path>/medium-editor.js"></script>
<script type="text/javascript" src="<path>/auto-style.js"></script>

<div class="editable"></div>

var editor = new MediumEditor('.editable', {
        extensions: {
            'auto-highlight': new AutoStyleExtension({
                config: [{
                    matchcase: false,
                    wordsonly: false,
                    styles: [{
                        style: 'background-color:yellow;',
                        words: ['yellow']
                    }, {
                        style: 'background-color:gray;',
                        words: ['gray', 'grey']
                    }]
                }, {
                    matchcase: true,
                    wordsonly: true,
                    styles: [{
                        style: 'color:red;',
                        words: ['RED']
                    }, {
                        style: 'background-color:orange;',
                        words: ['oraNGE']
                    }]
                }]}
            )
        }
    });

Contributers

This implementation based on the inbuild AutoLink plugin of Medium Editor.

License

MIT