├── LICENSE ├── README.md ├── bower.json ├── demo ├── css │ ├── default.min.css │ ├── medium-editor.css │ └── style.css ├── index.html ├── js │ └── medium-editor.min.js └── screenshot.png ├── dist └── medium-button.min.js ├── package.json └── src └── medium-button.js /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2015 Patrick Stillhart 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | 23 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | # MediumButton 5 | 6 | MediumButton extends MediumEditor with your custom buttons. 7 | 8 | You can still use the default ones, MediumButton just gives you the ability to add custom buttons. 9 | 10 | > I need your support to further develop this package. :) 11 | 12 | [Demo](http://stillhart.biz/project/MediumButton/) 13 | 14 | ## Installation 15 | 16 | ### Manual 17 | - Download the [latest MediumEditor release](https://github.com/daviferreira/medium-editor/releases) 18 | - Download the [latest MediumButton release](https://github.com/arcs-/medium-button/releases) 19 | 20 | 21 | ### npm 22 | 23 | ``` 24 | npm install --save-dev medium-button 25 | ``` 26 | ### Bower 27 | ``` 28 | bower install --save medium-button 29 | ``` 30 | 31 | ## Usage 32 | 33 | Follow the steps on the [MediumEditor Page](https://github.com/daviferreira/medium-editor) 34 | Then you can then setup your custom buttons. 35 | 36 | ### Include script 37 | Copy and reference the scripts (located in the dist folder): 38 | 39 | ```html 40 | 41 | ``` 42 | 43 | ### HTML buttons 44 | 45 | This creates a buttons which make text bold. 46 | 47 | ```javascript 48 | 'b': new MediumButton({ 49 | label:'B', // Button Label: HTML and Font-Awesome is possible 50 | start:'', // Beginning of the selection 51 | end:'' // End of the selection 52 | }) 53 | ``` 54 | 55 | ### JavaScript buttons 56 | 57 | ```javascript 58 | // This creates a buttons which makes a popup 59 | 'pop': new MediumButton({label:'Hello', action: function(html, mark){alert('hello');return html}}) 60 | 61 | // Explanation 62 | label: 'Hello', // Button Label -> same as in HTML button 63 | // Action can be any javascript function 64 | action: function(html, mark, parent){ 65 | // HTML(String) is the selected Text 66 | alert('hello') // MARK(Boolean) true if marked 67 | console.log(parent) // PARENT(node) the elements parent ndoe 68 | 69 | 70 | return html // don't forget return the new HTML! 71 | } 72 | ``` 73 | 74 | (you can combine the two) 75 | 76 | ### Add them to MediumEditor 77 | 78 | ```javascript 79 | // Remember the name for the button infront of each 80 | // add it to your 'toolbar buttons' just like a normal button 81 | toolbar: { 82 | buttons: ['b', 'h2', 'JS', 'warning', 'pop'] 83 | }, 84 | 85 | // add the code for the button as an extensions 86 | // seperatet with a " , " 87 | extensions: { 88 | 'b': new MediumButton({label:'BOLD', start:'', end:''}), 89 | // ... 90 | } 91 | ``` 92 | 93 | and you're done. 94 | 95 | ## Example 96 | 97 | ```javascript 98 | var editor = new MediumEditor('.editor', { 99 | toolbar: { 100 | buttons: ['b', 'h2', 'warning', 'pop'] 101 | }, 102 | extensions: { 103 | // compact 104 | 'b': new MediumButton({label:'BOLD', start:'', end:''}), 105 | 'h2': new MediumButton({label:'h2', start:'
',
136 | end: '
',
137 | action: function(html, mark, parent){
138 | if(mark) return '' + hljs.highlight('javascript', html.substring(3, html.length - 4).replace(/<\/p>/g, "\n").replace(//g, ">")).value; 139 | return html.split('-->')[0].split(' 20 |
31 | 32 | 33 |My father's family name being Pirrip, and my Christian name Philip, my infant tongue could make of both names nothing longer or more explicit than Pip. So, I called myself Pip, and came to be called Pip.
45 |I give Pirrip as my father's family name, on the authority of his tombstone and my sister,Mrs. Joe Gargery, who married the blacksmith. As I never saw my father or my mother, and never saw any likeness of either of them (for their days were long 46 | before the days of photographs), my first fancies regarding what they were like were unreasonably derived from their tombstones. The shape of the letters on my father's, gave me an odd idea that he was a square, stout, dark man, with curly black 47 | hair. From the character and turn of the inscription, Also Georgiana Wife of the Above, I drew a childish conclusion that my mother was freckled and sickly. To five little stone lozenges, each about a foot and a half long, which were arranged in a 48 | neat row beside their grave, and were sacred to the memory of five little brothers of mine, who gave up trying to get a living, exceedingly early in that universal struggle,I am indebted for a belief I religiously entertained that they had all been 49 | born on their backs with their hands in their trousers-pockets, and had never taken them out in this state of existence.
50 |Ours was the marsh country, down by the river, within, as the river wound, twenty miles of the sea. My first most vivid and broad impression of the identity of things seems to me to have been gained on a memorable raw afternoon towards evening. At 51 | such a time I found out for certain that this bleak place overgrown with nettles was the churchyard; and that Philip Pirrip, late of this parish, and also Georgiana wife of the above, were dead and buried; and that Alexander, Bartholomew, Abraham, 52 | Tobias, and Roger, infant children of the aforesaid, were also dead and buried; and that the dark flat wilderness beyond the churchyard, intersected with dikes and mounds and gates, with scattered cattle feeding on it, was the marshes; and that the 53 | low leaden line beyond was the river; and that the distant savage lair from which the wind was rushing was the sea; and that the small bundle of shivers growing afraid of it all and beginning to cry, was Pip.
54 |