Code Monkey home page Code Monkey logo

codemirror-buttons's Introduction

CodeMirror buttons addon

Adds a panel with buttons specified via config.

Usage

Include scripts needed into webpage.

<script src="bower_components/codemirror/lib/codemirror.js"></script>
<script src="bower_components/codemirror/addon/display/panel.js"></script>
<script src="bower_components/codemirror-buttons/buttons.js"></script>

Initialize CodeMirror specifying buttons as an array in buttons config property.

var editor = CodeMirror.fromTextArea(document.getElementById('text'), {
	mode: 'gfm',
	buttons: [
        {
            hotkey: 'Ctrl-B',
            class: 'bold',
            label: '<strong>B</strong>',
            callback: function (cm) {
                var selection = cm.getSelection();
                cm.replaceSelection('**' + selection + '**');
                if (!selection) {
                    var cursorPos = cm.getCursor();
                    cm.setCursor(cursorPos.line, cursorPos.ch - 2);
                }
            }
        },
        {
            hotkey: 'Ctrl-I',
            class: 'italic',
            label: '<i>I</i>',
            callback: function (cm) {
                var selection = cm.getSelection();
                cm.replaceSelection('*' + selection + '*');
                if (!selection) {
                    var cursorPos = cm.getCursor();
                    cm.setCursor(cursorPos.line, cursorPos.ch - 1);
                }
            }
        },
        {
            class: 'inline-code',
            label: 'code',
            callback: function (cm) {
                var selection = cm.getSelection();
                cm.replaceSelection("`" + selection + "`");
                if (!selection) {
                    var cursorPos = cm.getCursor();
                    cm.setCursor(cursorPos.line, cursorPos.ch - 1);
                }
            }
        },
        {
            class: 'block-php',
            label: '&lt;php&gt;',
            callback: function (cm) {
                var selection = cm.getSelection();
                cm.replaceSelection("```php\n<?php\n" + selection + "\n```\n");
                if (!selection) {
                    var cursorPos = cm.getCursor();
                    cm.setCursor(cursorPos.line - 2, 0);
                }
            }
        },
        {
            class: 'block-code',
            label: '&lt;-&gt;',
            callback: function (cm) {
                var selection = cm.getSelection();
                cm.replaceSelection("```\n" + selection + "\n```\n");
                if (!selection) {
                    var cursorPos = cm.getCursor();
                    cm.setCursor(cursorPos.line - 2, 0);
                }
            }
        },
        {
            class: 'quote',
            label: '>',
            callback: function (cm) {
                cm.replaceSelection("> " + cm.getSelection());
            }
        },
        {
            class: 'ul',
            label: 'ul',
            callback: function (cm) {
                cm.replaceSelection("- " + cm.getSelection());
            }
        },
        {
            class: 'ol',
            label: 'ol',
            callback: function (cm) {
                cm.replaceSelection("1. " + cm.getSelection());
            }
        },
        {
            class: 'a',
            label: 'a',
            callback: function (cm) {
                var selection = cm.getSelection();
                var text = '';
                var link = '';

                if (selection.match(/^https?:\/\//)) {
                    link = selection;
                } else {
                    text = selection;
                }
                cm.replaceSelection('[' + text + '](' + link + ')');

                var cursorPos = cm.getCursor();
                if (!selection) {
                    cm.setCursor(cursorPos.line, cursorPos.ch - 3);
                } else if (link) {
                    cm.setCursor(cursorPos.line, cursorPos.ch - (3 + link.length));
                } else {
                    cm.setCursor(cursorPos.line, cursorPos.ch - 1);
                }
            }
        }
    ],
});

Altrnatively, instead of setting individual options, you can supply either DOM node or a callback returning DOM node using el key:

{
    el: function(cm) {
        return document.getElementById('mybutton');
    }
}

Optionally use stylesheet included to make buttons look a bit better:

<link rel="stylesheet" href="bower_components/codemirror-buttons/buttons.css">

codemirror-buttons's People

Contributors

ddashwood avatar mihai-vlc avatar samdark avatar

Watchers

 avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.