├── .gitignore ├── resources ├── screenshot.png ├── redactoriconbuttons.css ├── redactoriconbuttons.js ├── lib │ └── svg4everybody.min.js └── icons │ └── redactor-i.svg ├── composer.json ├── releases.json ├── _examples └── redactoriconbuttons.php ├── config.php ├── readme.md └── RedactorIconButtonsPlugin.php /.gitignore: -------------------------------------------------------------------------------- 1 | *.DS_Store 2 | *Thumbs.db 3 | composer.lock 4 | -------------------------------------------------------------------------------- /resources/screenshot.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/carlcs/craft-redactoriconbuttons/HEAD/resources/screenshot.png -------------------------------------------------------------------------------- /resources/redactoriconbuttons.css: -------------------------------------------------------------------------------- 1 | .re-button-icon { 2 | width: 15px; 3 | height: 15px; 4 | margin: -1px; 5 | fill: #29323d; 6 | vertical-align: top; 7 | } 8 | -------------------------------------------------------------------------------- /composer.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "carlcs/craft-redactoriconbuttons", 3 | "description": "Redactor Icon Buttons plugin for Craft CMS", 4 | "type": "craft-plugin", 5 | "require": { 6 | "composer/installers": "~1.0", 7 | "php": ">=5.4.0" 8 | } 9 | } 10 | -------------------------------------------------------------------------------- /releases.json: -------------------------------------------------------------------------------- 1 | [ 2 | { 3 | "version": "1.0.1", 4 | "downloadUrl": "https://github.com/carlcs/craft-redactoriconbuttons/archive/v1.0.1.zip", 5 | "date": "2016-07-12T12:00:00+01:00", 6 | "notes": [ 7 | "[Improved] To use a different icon-set you can now upload a SVG sprite named icons.svg into craft/config/redactoriconbuttons/ and Redactor Icon Buttons picks it up automatically." 8 | ] 9 | }, 10 | { 11 | "version": "1.0.0", 12 | "downloadUrl": "https://github.com/carlcs/craft-redactoriconbuttons/archive/v1.0.0.zip", 13 | "date": "2016-07-11T09:00:00+01:00", 14 | "notes": [ 15 | "First release" 16 | ] 17 | } 18 | ] 19 | -------------------------------------------------------------------------------- /_examples/redactoriconbuttons.php: -------------------------------------------------------------------------------- 1 | [ 11 | 'html' => 'settings', 12 | 'format' => 'format_size', 13 | 'bold' => 'format_bold', 14 | 'italic' => 'format_italic', 15 | 'lists' => 'format_list_bulleted', 16 | 'table' => 'border_all', 17 | 'image' => 'crop_original', 18 | 'video' => 'ondemand_video', 19 | 'file' => 'attach_file', 20 | 'link' => 'insert_link', 21 | 'horizontalrule' => 'remove', 22 | 'fullscreen' => 'fullscreen', 23 | ], 24 | 25 | // Adds external spritemap support for IE9+ and Edge 12. 26 | 'ieShim' => true, 27 | ]; 28 | -------------------------------------------------------------------------------- /resources/redactoriconbuttons.js: -------------------------------------------------------------------------------- 1 | if (!RedactorPlugins) var RedactorPlugins = {}; 2 | 3 | RedactorPlugins.iconbuttons = function() 4 | { 5 | return { 6 | init: function() 7 | { 8 | this.iconbuttons.addButtonIcons(); 9 | }, 10 | 11 | addButtonIcons: function() 12 | { 13 | var iconFile = RedactorIconButtons.config.iconFile; 14 | var iconMapping = RedactorIconButtons.config.iconMapping; 15 | 16 | setTimeout($.proxy(function() { 17 | $.each(this.button.all(), $.proxy(function(i, s) { 18 | var key = $(s).attr('rel'); 19 | var btn = this.button.get(key); 20 | 21 | if (iconMapping !== null) { 22 | var iconId = (key in iconMapping && iconMapping[key] !== null) ? iconMapping[key] : null; 23 | } else { 24 | var iconId = key; 25 | } 26 | 27 | if (iconId !== null) { 28 | this.button.setIcon(btn, this.iconbuttons.getIconHtml(iconFile+'#'+iconId)); 29 | } 30 | }, this)); 31 | }, this), 0); 32 | }, 33 | 34 | getIconHtml: function(url) 35 | { 36 | return '' + 37 | '' + 38 | ''; 39 | }, 40 | }; 41 | }; 42 | -------------------------------------------------------------------------------- /config.php: -------------------------------------------------------------------------------- 1 | [ 5 | // Default buttons 6 | 'html' => 'html', 7 | 'format' => 'format', 8 | 'bold' => 'bold', 9 | 'italic' => 'italic', 10 | 'lists' => 'list-unordered', 11 | 'ul' => 'list-unordered', 12 | 'ol' => 'list-ordered', 13 | 'table' => 'table', 14 | 'image' => 'image', 15 | 'video' => 'video', 16 | 'file' => 'file', 17 | 'link' => 'link', 18 | 'horizontalrule' => 'horizontalrule', 19 | 'fullscreen' =>'fullscreen', 20 | 21 | // Inline Style plugin example buttons 22 | 'style' => 'background', 23 | 'color' => 'color', 24 | 'align' => 'align-left', 25 | 'sup' => 'superscript', 26 | 'sub' => 'subscript', 27 | 'q' => 'quote', 28 | 'cite' => 'citation', 29 | 'kbd' => 'keyboardinput', 30 | 'code' => 'code', 31 | 'small' => 'smallprint', 32 | 'del' => 'deleted', 33 | 'ins' => 'inserted', 34 | 'mark' => 'marked', 35 | 'nobr' => 'nobreak', 36 | 'remove' => 'removestyles', 37 | 38 | // Other plugins 39 | 'footnote' => 'footnote', 40 | 'clips' => 'clips', 41 | ], 42 | 'iconFile' => null, 43 | 'ieShim' => true, 44 | ]; 45 | -------------------------------------------------------------------------------- /resources/lib/svg4everybody.min.js: -------------------------------------------------------------------------------- 1 | !function(a,b){"function"==typeof define&&define.amd?define([],function(){return a.svg4everybody=b()}):"object"==typeof exports?module.exports=b():a.svg4everybody=b()}(this,function(){/*! svg4everybody v2.0.0 | github.com/jonathantneal/svg4everybody */ 2 | function a(a,b){if(b){var c=!a.getAttribute("viewBox")&&b.getAttribute("viewBox"),d=document.createDocumentFragment(),e=b.cloneNode(!0);for(c&&a.setAttribute("viewBox",c);e.childNodes.length;)d.appendChild(e.firstChild);a.appendChild(d)}}function b(b){b.onreadystatechange=function(){if(4===b.readyState){var c=document.createElement("x");c.innerHTML=b.responseText,b.s.splice(0).map(function(b){a(b[0],c.querySelector("#"+b[1].replace(/(\W)/g,"\\$1")))})}},b.onreadystatechange()}function c(c){function d(){for(var c;c=e[0];){var j=c.parentNode;if(j&&/svg/i.test(j.nodeName)){var k=c.getAttribute("xlink:href");if(f&&(!g||g(k,j,c))){var l=k.split("#"),m=l[0],n=l[1];if(j.removeChild(c),m.length){var o=i[m]=i[m]||new XMLHttpRequest;o.s||(o.s=[],o.open("GET",m),o.send()),o.s.push([j,n]),b(o)}else a(j,document.getElementById(n))}}}h(d,17)}c=c||{};var e=document.getElementsByTagName("use"),f="polyfill"in c?c.polyfill:/\bEdge\/12\b|\bTrident\/[567]\b|\bVersion\/7.0 Safari\b/.test(navigator.userAgent)||(navigator.userAgent.match(/AppleWebKit\/(\d+)/)||[])[1]<537,g=c.validate,h=window.requestAnimationFrame||setTimeout,i={};f&&d()}return c}); -------------------------------------------------------------------------------- /readme.md: -------------------------------------------------------------------------------- 1 | # Redactor Icon Buttons plugin for Craft CMS 2 | 3 | ![Redactor Icon Buttons](https://github.com/carlcs/craft-redactoriconbuttons/blob/master/resources/screenshot.png) 4 | 5 | This plugin allows to replace the text buttons with icons in the Redactor editor toolbar in Craft CMS. 6 | 7 | ## Installation 8 | 9 | The plugin is available on Packagist and can be installed using Composer. You can also download the [latest release][0] and copy the files into craft/plugins/redactoriconbuttons/. 10 | 11 | ``` 12 | $ composer require carlcs/craft-redactoriconbuttons 13 | ``` 14 | 15 | Enable the plugin in your [Redactor config files][1] stored in craft/config/redactor/ by adding `iconbuttons` to the `plugins` setting. Make sure you have a config file in your Redactor field settings selected where the plugin is enabled. 16 | 17 | ## Icon Sets 18 | 19 | The icon set the plugin uses by default contains a collection of icons from the Redactor 10 editor and some handcrafted icons to complement the set. 20 | 21 | If you want to use a custom icon set, create a folder craft/config/redactoriconbuttons/ and add a SVG sprite named icons.svg to it. You can now use the `iconMapping` config setting to map symbols contained in the SVG to individual buttons. 22 | 23 | The plugin includes an example file with icons from the [Google Material icon set][2] in the [_examples/][3] folder, the file was created with the [Icomoon App][4]. 24 | 25 | ## Configuration 26 | 27 | The plugin is pre-configured for Redactor’s default buttons. To customize it, create a new [plugin configuration file][5] in the craft/config/ folder named redactoriconbuttons.php, which returns an array of settings. 28 | 29 | - **`iconMapping`** ([see defaults][6]) – Maps buttons to icons. The setting expects an array of key-value pairs that map a button’s index (inspect the “rel” attribute in the toolbar!) to the symbol ID of an icon in the SVG sprite. 30 | - **`ieShim`** (default `true`) – Adds external spritemap support for IE9+ and Edge 12. 31 | 32 | ## Requirements 33 | 34 | - PHP 5.4 or later 35 | - Craft CMS 2.5 or later 36 | 37 | 38 | [0]: https://github.com/carlcs/craft-redactoriconbuttons/releases/latest 39 | [1]: https://craftcms.com/docs/rich-text-fields#redactor-configs 40 | [2]: https://design.google.com/icons/ 41 | [3]: _examples/ 42 | [4]: https://icomoon.io/app 43 | [5]: https://craftcms.com/docs/plugins/plugin-settings#config-file 44 | [6]: config.php 45 | -------------------------------------------------------------------------------- /RedactorIconButtonsPlugin.php: -------------------------------------------------------------------------------- 1 | request->isCpRequest()) { 50 | $this->includeCpResources(); 51 | } 52 | } 53 | 54 | /** 55 | * Make sure requirements are met before installation. 56 | * 57 | * @throws Exception 58 | */ 59 | public function onBeforeInstall() 60 | { 61 | if (!defined('PHP_VERSION') || version_compare(PHP_VERSION, '5.4', '<')) { 62 | throw new Exception($this->getName().' plugin requires PHP 5.4 or later.'); 63 | } 64 | } 65 | 66 | /** 67 | * Registers resource paths for requests starting with config/redactoriconbuttons/. 68 | */ 69 | public function getResourcePath($path) 70 | { 71 | if (strncmp($path, 'config/redactoriconbuttons/', 27) == 0) { 72 | return craft()->path->getConfigPath().'redactoriconbuttons/'.substr($path, 27); 73 | } 74 | } 75 | 76 | // Protected Methods 77 | // ========================================================================= 78 | 79 | /** 80 | * Includes the plugin's resources for the Control Panel. 81 | */ 82 | protected function includeCpResources() 83 | { 84 | // Prepare config 85 | $config = []; 86 | 87 | $config['iconMapping'] = craft()->config->get('iconMapping', 'redactoriconbuttons'); 88 | 89 | $iconAdminPath = craft()->path->getConfigPath().'redactoriconbuttons/icons.svg'; 90 | $iconPublicPath = craft()->config->get('iconFile', 'redactoriconbuttons'); 91 | 92 | if (IOHelper::fileExists($iconAdminPath)) { 93 | $config['iconFile'] = UrlHelper::getResourceUrl('config/redactoriconbuttons/icons.svg'); 94 | } elseif ($iconPublicPath) { 95 | $config['iconFile'] = craft()->config->parseEnvironmentString($iconPublicPath); 96 | } else { 97 | $config['iconFile'] = UrlHelper::getResourceUrl('redactoriconbuttons/icons/redactor-i.svg'); 98 | } 99 | 100 | // Include JS 101 | $config = JsonHelper::encode($config); 102 | 103 | $js = "var RedactorIconButtons = {}; RedactorIconButtons.config = {$config};"; 104 | 105 | craft()->templates->includeJs($js); 106 | craft()->templates->includeJsResource('redactoriconbuttons/redactoriconbuttons.js'); 107 | 108 | // Include CSS 109 | craft()->templates->includeCssResource('redactoriconbuttons/redactoriconbuttons.css'); 110 | 111 | // Add external spritemap support for IE9+ and Edge 12 112 | $ieShim = craft()->config->get('ieShim', 'redactoriconbuttons'); 113 | if (filter_var($ieShim, FILTER_VALIDATE_BOOLEAN)) { 114 | craft()->templates->includeJsResource('redactoriconbuttons/lib/svg4everybody.min.js'); 115 | craft()->templates->includeJs('svg4everybody();'); 116 | } 117 | } 118 | } 119 | -------------------------------------------------------------------------------- /resources/icons/redactor-i.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 | 68 | 69 | 70 | 71 | 72 | 73 | 74 | 75 | 76 | 77 | 78 | 79 | 80 | 81 | 82 | 83 | 84 | 85 | 86 | 87 | 88 | 89 | 90 | 91 | 92 | 93 | 94 | 95 | --------------------------------------------------------------------------------