MediumButton

MediumButton extends MediumEditor with your custom buttons.

You can still use the default ones, MediumButton just gives you the ability to add custom buttons.

I need your support to further develop this package. :)

Demo

Installation

Manual

• Download the latest MediumEditor release
• Download the latest MediumButton release

npm

npm install --save-dev medium-button

Bower

bower install --save medium-button

Usage

Follow the steps on the MediumEditor Page Then you can then setup your custom buttons.

Include script

Copy and reference the scripts (located in the dist folder):

<scriptsrc="js/medium-button.min.js"></script>

HTML buttons

This creates a buttons which make text bold.

'b': newMediumButton({label:'<b>B</b>',// Button Label: HTML and Font-Awesome is possiblestart:'<b>',// Beginning of the selectionend:'</b>'// End of the selection})

JavaScript buttons

// This creates a buttons which makes a popup'pop': newMediumButton({label:'<b>Hello</b>',action: function(html,mark){alert('hello');returnhtml}})// Explanation
label: '<b>Hello</b>',// Button Label -> same as in HTML button// Action can be any javascript functionaction: function(html,mark,parent){// HTML(String) is the selected Textalert('hello')// MARK(Boolean) true if markedconsole.log(parent)// PARENT(node) the elements parent ndoereturnhtml// don't forget return the new HTML!}

(you can combine the two)

Add them to MediumEditor

// Remember the name for the button infront of each// add it to your 'toolbar buttons' just like a normal button
toolbar: {buttons: ['b','h2','JS','warning','pop']},// add the code for the button as an extensions// seperatet with a " , "extensions: {'b': newMediumButton({label:'BOLD',start:'<b>',end:'</b>'}),// ...}

and you're done.

Example

vareditor=newMediumEditor('.editor',{toolbar: {buttons: ['b','h2','warning','pop']},extensions: {// compact'b': newMediumButton({label:'BOLD',start:'<b>',end:'</b>'}),'h2': newMediumButton({label:'h2',start:'<h2>',end:'</h2>'}),// expanded'warning': newMediumButton({label: '<i class="fa fa-exclamation-triangle"></i>',start: '<div class="warning">',end: '</div>'}),// with JavaScript'pop': newMediumButton({label:'POP',action: function(html,mark,parent){alert('hello :)')returnhtml}})}})

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': newMediumButton({label: '<i>JavaScript</i>',start: '<pre><code>',end: '</code></pre>',action: function(html,mark,parent){if(mark)return'<!--'+html+'-->'+hljs.highlight('javascript',html.substring(3,html.length-4).replace(/<\/p><p>/g,"\n").replace(/</g,"<").replace(/>/g,">")).value;returnhtml.split('-->')[0].split('<!--').join('');}})