Expand my Community achievements bar.

Enhance your AEM Assets & Boost Your Development: [AEM Gems | June 19, 2024] Improving the Developer Experience with New APIs and Events
SOLVED

How to enable right click inside RTE?

Avatar

Level 6

Currently RTE spellcheck plugin doesn't provide spelling suggestions so we want to utilize browser's default spellcheck functionality. For that we need a right click inside RTE to work but its disabled.

Does anyone know how can we enable right click inside RTE?

1 Accepted Solution

Avatar

Correct answer by
Level 6

Hi @kautuk_sahni 

Yes, I managed to find a solution.

RTE clientlib extends CUI.rte.ui.ContextMenuBuilder class with name CUI.rte.ui.cui.CuiContextMenuBuilder which has overridden function build(). This function causes to not load context menu (menu that loads on right click).

I created a custom clientlib and extended the same class and override the build() function to return true instead for 'undefined' as below.

/* global Class: true */
/* jshint strict: false */
(function ($, CUI) {

  //'use strict';
  CUI.rte.ui.cui.CuiContextMenuBuilder = new Class({

    toString: 'CuiContextMenuBuilder',

    extend: CUI.rte.ui.ContextMenuBuilder,


    construct: function (editorKernel) {
      // TODO ...?
    },

    build: function (selectionContext, context) {
      // returning undefined means that we don't use a context menu
      return true;
    },

    createItem: function (config) {
      return new CUI.rte.ui.cui.CmItemImpl(config);
    },

    createSeparator: function () {
      return new CUI.rte.ui.cui.CmSeparatorImpl();
    },

    showAt: function (x, y) {
      // TODO ...?
    },

    hideAll: function () {
      // TODO ...?
    },

    isVisible: function () {
      return false;
    }

  });

 This fixed the issue.

View solution in original post

8 Replies

Avatar

Community Advisor

@salamswapnil I don't think it I'd possible.. think of how to enable spell check feature within RTE or use AI for it.

Avatar

Community Advisor

@salamswapnil set contenteditable attribute to false and that should allow you to right click into the text area. You will have to find a way to override this attribute value as with RTE default is true. 

 

Harwindersingh_0-1701923771194.png

 

Avatar

Level 6

Hi @Harwinder-singh

Thank you for your reply..!!

 If we set contenteditable="false", it makes RTE uneditable and that's a big problem.

Avatar

Community Advisor

@salamswapnil Unfortunately, there isn't any other way out here to enable this without affecting the edit behavior of RTE.

Avatar

Level 6

Hi @arunpatidar 

Thank you for the reply..!!

The problem with RTE spellcheck plugin is that it just highlights the incorrect spellings but doesn't provide alternative spelling suggestions.

That's why we are trying to utilize browser's default spellcheck functionality and for that we need a right click inside RTE to work but its disabled.

Avatar

Administrator

@salamswapnil Did you find the suggestions from users helpful? Please let us know if more information is required. Otherwise, please mark the answer as correct for posterity. If you have found out solution yourself, please share it with the community.



Kautuk Sahni

Avatar

Correct answer by
Level 6

Hi @kautuk_sahni 

Yes, I managed to find a solution.

RTE clientlib extends CUI.rte.ui.ContextMenuBuilder class with name CUI.rte.ui.cui.CuiContextMenuBuilder which has overridden function build(). This function causes to not load context menu (menu that loads on right click).

I created a custom clientlib and extended the same class and override the build() function to return true instead for 'undefined' as below.

/* global Class: true */
/* jshint strict: false */
(function ($, CUI) {

  //'use strict';
  CUI.rte.ui.cui.CuiContextMenuBuilder = new Class({

    toString: 'CuiContextMenuBuilder',

    extend: CUI.rte.ui.ContextMenuBuilder,


    construct: function (editorKernel) {
      // TODO ...?
    },

    build: function (selectionContext, context) {
      // returning undefined means that we don't use a context menu
      return true;
    },

    createItem: function (config) {
      return new CUI.rte.ui.cui.CmItemImpl(config);
    },

    createSeparator: function () {
      return new CUI.rte.ui.cui.CmSeparatorImpl();
    },

    showAt: function (x, y) {
      // TODO ...?
    },

    hideAll: function () {
      // TODO ...?
    },

    isVisible: function () {
      return false;
    }

  });

 This fixed the issue.