1/* 2 * 3 * Plugin name: headerbuttons 4 * 5 */ 6(function() { 7CKEDITOR.plugins.add( 'headerbuttons', { 8 lang: 'en,de', 9 icons: 'SH,HH,LH,P', 10 hidpi: true, 11 init: function( editor ) { 12 editor.addCommand( 'same_header', { 13 exec: function( editor ) { 14 var lastH = getLastHeader(editor); 15 16 var style = new CKEDITOR.style( { element: lastH } ); 17 editor.applyStyle(style); 18 } 19 }); 20 editor.addCommand( 'lower_header', { 21 exec: function( editor ) { 22 var lastH = getLastHeader(editor), 23 lowerH; 24 25 if (lastH == 'h6') { 26 lowerH = 'h6'; 27 } else { 28 var lower = Number(lastH.substring(1,2)) + 1; 29 lowerH = 'h' + lower; 30 } 31 32 var style = new CKEDITOR.style( { element: lowerH } ); 33 editor.applyStyle(style); 34 } 35 }); 36 editor.addCommand( 'higher_header', { 37 exec: function( editor ) { 38 var lastH = getLastHeader(editor), 39 higherH; 40 41 if (lastH == 'h1') { 42 higherH = 'h1'; 43 } else { 44 var higher = Number(lastH.substring(1,2)) - 1; 45 higherH = 'h' + higher; 46 } 47 48 var style = new CKEDITOR.style( { element: higherH } ); 49 editor.applyStyle(style); 50 } 51 }); 52 editor.addCommand( 'none_header', { 53 exec: function( editor ) { 54 var style = new CKEDITOR.style( { element: 'p' } ); 55 editor.applyStyle(style); 56 } 57 }); 58 59 editor.ui.addButton('same_header', { 60 label: editor.lang.headerbuttons.same, 61 command: 'same_header', 62 toolbar: 'header_buttons', 63 icon: 'SH' 64 }); 65 editor.ui.addButton('lower_header', { 66 label: editor.lang.headerbuttons.lower, 67 command: 'lower_header', 68 toolbar: 'header_buttons', 69 icon: 'LH' 70 }); 71 editor.ui.addButton('higher_header', { 72 label: editor.lang.headerbuttons.higher, 73 command: 'higher_header', 74 toolbar: 'header_buttons', 75 icon: 'HH' 76 }); 77 editor.ui.addButton('none_header', { 78 label: editor.lang.headerbuttons.remove, 79 command: 'none_header', 80 toolbar: 'header_buttons', 81 icon: 'P' 82 }); 83 } 84}); 85})(); 86 87function getLastHeader( editor ) { 88 //list of header types 89 var headers = ['h1','h2','h3','h4','h5','h6']; 90 91 // First we need to find where our cursor is 92 var selection = editor.getSelection(); 93 var range = selection.getRanges()[0]; 94 95 //get previous node 96 var prevNode = range.getPreviousNode(); 97 //go through each previous node 98 while (prevNode) { 99 var nodeType; 100 if (typeof prevNode.getName === 'undefined') { 101 nodeType = prevNode.$.parentNode.localName; 102 } else { 103 nodeType = prevNode.getName(); 104 if (headers.indexOf(nodeType) != -1) { 105 return nodeType; 106 } 107 } 108 109 prevNode = prevNode.getPreviousSourceNode(); 110 } 111 112 //return h1 by default 113 return 'h1'; 114} 115