tom-s / mediumbutton

MediumButton extends your Medium Editor with the possibility add buttons.

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

<script src="js/medium-editor.js"></script>
<script src="js/MediumButton.min.js"></script>

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': new MediumButton({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': new MediumButton({label:'<b>Hello</b>', action: function(html, mark){alert('hello'); return html;}})

label: '<b>Hello</b>',          //Button Label -> same as in HTML button 
                                //Action can be an javascript function
action: function(html, mark){   //HTML(String) is the selected Text
           alert('hello');   //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':  new MediumButton({label:'BOLD', start:'<b>', end:'</b>'}),
        // ...
  }     
 

and you're done.

Example

Remember to add a " , " between the buttons

var editor = new MediumEditor('.editor', {
    buttons: ['b', 'h2', 'warning', 'pop'],
    extensions: {
        // compact
        'b':  new MediumButton({label:'BOLD', start:'<b>', end:'</b>'}),
        'h2': new MediumButton({label:'h2', start:'<h2>', end:'</h2>'}),

       // expanded
       'warning': new MediumButton({
          label: '<i class="fa fa-exclamation-triangle"></i>',
          start: '<div class="warning">',
          end:   '</div>'
       }),
	   
	// with JavaScript
       'pop': new MediumButton({
          label:'POP', 
          action: function(html, mark){
                    alert('hello :)'); 
                    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': new MediumButton({
  label: '<i>JavaScript</i>',
  start: '<pre><code>',
  end: '</code></pre>',
  action: function(html, mark){
            if(mark) return '<!--'+html+'-->' + hljs.highlight('javascript', html.substring(3, html.length - 4).replace(/<\/p><p>/g, "\n").replace(/</g, "<").replace(/>/g, ">")).value;
            return html.split('-->')[0].split('<!--').join('');
          }
})