https://github.com/samdark/codemirror-buttons
CodeMirror buttons addon
https://github.com/samdark/codemirror-buttons
buttons codemirror ui
Last synced: about 2 months ago
JSON representation
CodeMirror buttons addon
- Host: GitHub
- URL: https://github.com/samdark/codemirror-buttons
- Owner: samdark
- License: other
- Created: 2016-01-02T16:57:36.000Z (over 9 years ago)
- Default Branch: master
- Last Pushed: 2019-05-23T15:41:51.000Z (about 6 years ago)
- Last Synced: 2025-03-27T12:38:25.337Z (2 months ago)
- Topics: buttons, codemirror, ui
- Language: JavaScript
- Size: 9.77 KB
- Stars: 31
- Watchers: 5
- Forks: 13
- Open Issues: 0
-
Metadata Files:
- Readme: readme.md
- Funding: .github/FUNDING.yml
- License: LICENSE.md
Awesome Lists containing this project
README
CodeMirror buttons addon
========================
Adds a panel with buttons specified via config.
## Usage
Include scripts needed into webpage.
```html
```
Initialize CodeMirror specifying buttons as an array in `buttons` config property.
```javascript
var editor = CodeMirror.fromTextArea(document.getElementById('text'), {
mode: 'gfm',
buttons: [
{
hotkey: 'Ctrl-B',
class: 'bold',
label: 'B',
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',
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',
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:
```javascript
{
el: function(cm) {
return document.getElementById('mybutton');
}
}
```
Optionally use stylesheet included to make buttons look a bit better:
```html
```