Skip to content

simplicateca/redactor-link-class

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

2 Commits
 
 
 
 

Repository files navigation

redactor-link-styles

This redactor plugin modifies the link modal to include a configurable drop down of class names that you can use to style links differently.

redactor link plugin screenshot

This is an early draft of the plugin and any bug reports would be appreciated.

Installation

If you're using Craft CMS, copy the file src/linkclass.js from this repository into your cms/config/redactor/plugins directory.

Configuration

You can configure the available link styles within your redactor JSON config file:

Sample Redactor-Config.json

  ...
  "plugins": ["linkclass"],
  "linkClasses" : [
    { "label": "Button (regular)", "class": "button" },
    { "label": "Button (large)",   "class": "button button--large" },
    { "label": "Button (small)",   "class": "button button--small" }
  ]
  ...

Styling links inside Redactor

If you want your links class names to appear differently within the redactor editor, you'll need to inject some css into your admin panel.

Sample control-panel.css

    .input .redactor-styles a.button {
        display : inline-block;
        padding: 0.25em 0.5em;
        border: 2px solid #3397ff;
    }

    .input .redactor-styles a.button:hover {
        background: #3397ff;
        text-decoration: none;
        color: #fff;
    }

If you're using Craft CMS you could either use a plugin to inject this code into your admin panel, or you can create a module and load your own CSS file.

Here are some resources that might be of assistance:

If you're using Redactor in some other tool, you'll have to do your own digging to figure out how to add CSS in your editor.

About

Lets you configure a list of selectable class names for your redactor links

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published