For Craft 3 using Redactor 3, I have managed to create a small redactor plugin that toggles a class on all the links selected in redactor.
Here is how I did it.
Create your folders. Create a folder called plugins
inside the config/redactor/
folder. Inside the plugin folder create a folder for your plugin. Example I created a a folder called toggleButton
. So the folder structure is config/redactor/plugins/toggleButton
.
Create your files. Create a your js
file and your css
file. It is important that the files are named the same as the folder. So in my example my files would be named toggleButton.js
and toggleButton.css
.
Add you plugin to your redactor field. In your config/redactor
folder you can add different redactor configs. For example I have Simple.json and Standard.json. This can then be selected in the craft admin, when you are adding your redactor field. In your selected config file add the following "plugins": ["toggleButton"],
.
Example of my Simple.json file:
{
"buttons": ["html", "link", "file"],
"plugins": ["toggleButton"],
"toolbarFixed": true
}
- Code your plugin. In you js file you want to create your redactor plugin code. In my example I add a button that toggles all selected links to have the class button.
Here is my js code:
(function($R) {
$R.add('plugin', 'toggleButton', {
translations: {
en: {
toggleButton: 'Button',
},
},
init: function(app) {
this.app = app;
this.lang = app.lang;
this.toolbar = app.toolbar;
this.selection = app.selection;
},
// public
start: function() {
//Define the button object
var btnObj = {
title: this.lang.get('toggleButton'),
api: 'plugin.toggleButton.toggle',
};
//Add the button to the toolbar
this.$button = this.toolbar.addButton('toggleButton', btnObj);
},
toggle: function() {
//This is what happens on when the button is clicked
//Class that we will toggle
var classToToggle = 'button';
//Get all the links that are selected
var selectedLinks = this.selection.getInlines({ all: true, tags: ['a'] });
//Loop through all the links and toggle the class
selectedLinks.forEach(function(element) {
//Crossbrowser toggle class
if (element.classList) {
element.classList.toggle(classToToggle);
} else {
// For IE9
var classes = element.className.split(' ');
var i = classes.indexOf(classToToggle);
if (i >= 0) classes.splice(i, 1);
else classes.push(classToToggle);
element.className = classes.join(' ');
}
});
},
});
})(Redactor);
- Style your Button. In your css file you want to style the links with the class button to look like buttons. So that the author sees that they have become buttons.
Here is my css code:
a.button {
display: inline-block;
box-sizing: border-box;
font-size: 14px;
text-align: center;
padding: 10px 20px 9px 20px;
cursor: pointer;
outline: none;
border: none;
vertical-align: middle;
text-decoration: none;
zoom: 1;
position: relative;
color: #29323d !important;
border-radius: 2px;
background: #eaf0f4;
background-image: linear-gradient(#f3f6f9, #eaf0f4);
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.22);
margin-right: 5px;
margin-bottom: 4px;
text-decoration: none !important;
}
a.button:hover {
outline: none;
color: #fff !important;
background: #449aef !important;
}
Now you and your authors can easily make links in to buttons in your redactor field. Then it is up to you how you use that in the frontend.
References: