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: '<php>',
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: '<->',
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">