Expand my Community achievements bar.

Radically easy to access on brand approved content for distribution and omnichannel performant delivery. AEM Assets Content Hub and Dynamic Media with OpenAPI capabilities is now GA.
SOLVED

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

Avatar

Level 4

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

1 Accepted Solution

Avatar

Correct answer by
Employee Advisor

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; } } } }

View solution in original post

6 Replies

Avatar

Employee Advisor

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

Avatar

Level 10

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. 

Avatar

Level 4

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

Avatar

Level 10

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

Avatar

Correct answer by
Employee Advisor

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; } } } }

Avatar

Level 4

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)