MediumButton
MediumButton extends your Medium Editor with the possibility to add more buttons.
You can still use the default buttons, MediumButton will just give you the ability to add more and custom buttons
Basic usage
Demo: http://stillhart.biz/project/MediumButton/
Installation
- Download the latest MediumEditor release
- Download the latest MediumButton release
The next step is to reference the scripts
Usage
Follow the steps on the MediumEditor Page
Then you can then setup your custom buttons
HTML buttons
// This creates a buttons which make text bold'b': label:'<b>B</b>' start:'<b>' end:'</b>' label: '<b>B</b>' // Button Label: HTML and Font-Awesome is possible start: '<b>' // Beginning of the selection end: '</b>' // End of the selection
JavaScript buttons
// This creates a buttons which makes a popup'pop': label:'<b>Hello</b>' {; return html;} label: '<b>Hello</b>' //Button Label -> same as in HTML button //Action can be an javascript function{ //HTML(String) is the selected Text ; //MARK(Boolean) is already marked return html;} //never forget return new HTML! }
Add them to MediumEditor
// Remember the indicator befor each Button // 'pop': new MediumButto... // add this to your 'buttons' just like a normal button buttons: 'pop' 'b' 'h2' 'warning' // add the code for the button as an extensions // seperatet with a " , " extensions: 'b': label:'BOLD' start:'<b>' end:'</b>' // ...
and you're done.
Example
Remember to add a " , " between the buttons
var editor = '.editor' buttons: 'b' 'h2' 'warning' 'pop' extensions: // compact 'b': label:'BOLD' start:'<b>' end:'</b>' 'h2': label:'h2' start:'<h2>' end:'</h2>' // expanded 'warning': label: '<i class="fa fa-exclamation-triangle"></i>' start: '<div class="warning">' end: '</div>' // with JavaScript 'pop': label:'POP' { ; return html; } ;
Syntax highlighting
Syntax highlighting is possible but not that easy(for now). You need to add an other Script like Prism or highlight.js. Here is an example for JavaScript with highlight.js.
'JS': label: '<i>JavaScript</i>' start: '<pre><code>' end: '</code></pre>' { ifmark return '<!--'+html+'-->' + hljsvalue; return html0; }