How to override RichTextEditor keystrokes (e.g. ctrl-B) | Community
Skip to main content
D
dorianhallward
Level 4
October 16, 2015
Solved

How to override RichTextEditor keystrokes (e.g. ctrl-B)

  • October 16, 2015
  • 6 replies
  • 2069 views

Using AEM6 and the RTE editor, I'd like the Bold format plugin to use the <strong> html element in place of <b>.

I've almost done this with a combination of overlaying /apps/cq/ui/rte/core/commands/DefaultFormatting.js and rtePlugins: htmlRules: semanticMarkupMap entries.

However, in the RichTextEditor, when I use the shortcut key (e.g. ctrl-B) s to make some text bold, I end up with the <b> in the markup.  Does anyone know where this is implemented and how I can override it?

thanks

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.
Best answer by Kunal_Gaba_

Have you tested this in all browser types? It seems it is a bug for chrome on Mac OS as the registered formatter command isn't invoked when you press ctrl + b. However, it works on Mozilla and IE. Also, I have found the file and the line number where the command should be invoked from the shortcut key. The file is /libs/cq/ui/rte/core/EditorKernel.js and if you add an OR condition in if the loop to check for the Mac then it does invoke the command chrome on Mac. 

However, I would suggest you to raise a ticket in day care for getting this fixed rather than customizing this file. You can just replace <b> with <strong> by means of configuration and get a hot fix for the issue from Adobe. 

 

if (e.isCtrl()) { //Added Mac for chrome browser if (com.ua.isIE || com.ua.isMac) { // handling of Ctrl-keys must be done here for IE var c = String.fromCharCode(e.getCharCode()).toLowerCase(); var cmd = this.keyboardShortcuts[c]; if (cmd) { this.applyCommand(e); return; } else { // prevent formatting shortcuts from being automatically // executed if ((c == 'b') || (c == 'i') || (c == 'u') || (c == 'm')) { e.stopEvent(); return; } } } }

6 replies

Kunal_Gaba_
Kunal_Gaba_
October 16, 2015

I think you can achieve this by configuring HTMLRules for your rich text editor. You just have to configure the semantic markup tag for the bold element.  See the documentation link [1] and an example [2]

[1] http://docs.adobe.com/docs/en/cq/5-6-1/widgets-api/index.html?class=CQ.form.rte.HtmlRules.DocType

[2] http://stackoverflow.com/questions/17946117/strong-tag-getting-replaced-to-b-tag-in-cq5

smacdonald2008
smacdonald2008
Level 10
October 16, 2015

Even though this is bad practice (modifying content under libs) - you can find RTE source files:

/libs/cq/ui/rte/core

I would recommend only modifying something from <b> to <strong> - keep modification to a minimum. 

D
dorianhallwardAuthor
Level 4
October 16, 2015

Thanks both for the replies I'd previously done both of what's been suggested; it's the keystroke bit I can't figure out - it seems clicking the Bold icon button in the RTE is processed differently than using the shortcut keys (ctrl+B).

thanks

smacdonald2008
smacdonald2008
Level 10
October 16, 2015

Have you successfully changed the source code to specify <strong > from <b>? If so - does ctrl-B call the modified script? 

Kunal_Gaba_
Kunal_Gaba_Accepted solution
October 16, 2015

Have you tested this in all browser types? It seems it is a bug for chrome on Mac OS as the registered formatter command isn't invoked when you press ctrl + b. However, it works on Mozilla and IE. Also, I have found the file and the line number where the command should be invoked from the shortcut key. The file is /libs/cq/ui/rte/core/EditorKernel.js and if you add an OR condition in if the loop to check for the Mac then it does invoke the command chrome on Mac. 

However, I would suggest you to raise a ticket in day care for getting this fixed rather than customizing this file. You can just replace <b> with <strong> by means of configuration and get a hot fix for the issue from Adobe. 

 

if (e.isCtrl()) { //Added Mac for chrome browser if (com.ua.isIE || com.ua.isMac) { // handling of Ctrl-keys must be done here for IE var c = String.fromCharCode(e.getCharCode()).toLowerCase(); var cmd = this.keyboardShortcuts[c]; if (cmd) { this.applyCommand(e); return; } else { // prevent formatting shortcuts from being automatically // executed if ((c == 'b') || (c == 'i') || (c == 'u') || (c == 'm')) { e.stopEvent(); return; } } } }
D
dorianhallwardAuthor
Level 4
October 16, 2015

Thanks for this info : yes I am using chrome with OSX (quite a common combination I'd have thought!).  I will make the change suggested and raise a daycare ticket regards the bug (I'm hoping to get the same behaviour for the italic key shortcut)

Terms & ConditionsAccessibility statement

Loading footer...