Redactor keyboard shortcuts for Craft CMS

I write a lot about coding (unsurprisingly) and frequently find myself wishing that I used a markdown editor instead of Redactor, particularly for easier inline code styles. Still, there are plenty of things which irritate me about markdown too, so I've just forged on, but today I discovered two useful tips:

  • Redactor has an inline styles plugin that includes inline <code> tags;
  • There is an API for adding keyboard shortcuts.

So I know have both set up here, and figured I'd share what that looks like. As always, you want to edit your Redactor config files in the standard Craft -> Config -> Redactor folder. To add the plugin, just use:

{
    "plugins": ["inlinestyles"]
}

If you want to add a keyboard shortcut, then you can supplement it with:

{
    "plugins": ["inlinestyles"],
    "shortcutsAdd": {
        "alt+c, alt+`": { "api": "module.inline.format", "args": "code" }
    }
}

Personally, I wasn't sure which keyboard shortcut would work best, so I've added two, but you can do any key combination (by the looks of things). I've also added shortcuts for <sup> and <sub> elements too 👍

Note: Unfortunately, it looks like the API method for toggling inline elements (type: toggle) doesn't work with <code> tags. Not sure why, as it works with everything else by default 🤷‍♂️

Explore Other Articles

Older

The Taxonomy of Me

Well, it only took about a week of dazed puzzling, data tables, and tearing my hair out in clumps, but I think I may finally have a rough content taxonomy for theAdhocracy. A rough first version, that is. Let me explain...

Further Reading & Sources

Conversation

Want to take part?

Comments are powered by Webmentions; if you know what that means, do your thing 👍

  • <p>I got annoyed having to manually markup inline code for blog posts so I dug around in the Redactor documentation and worked out how to create a keyboard shortcut instead.</p>
  • Murray Adcock.
Article permalink

Made By Me, But Made Possible By:

CMS:

Build: Gatsby

Deployment: GitHub

Hosting: Netlify

Connect With Me:

Twitter Twitter

Instagram Instragram

500px 500px

GitHub GitHub

Keep Up To Date:

All Posts RSS feed.

Articles RSS feed.

Journal RSS feed.

Notes RSS feed.