How disable shortcuts formatting?

Question

I have hidden my toolbar already but I want to prevent every type of shortcuts that allows formatting, e.g., `ctrl+b` to bold, `ctrl+r` to align on right. I need a configuration that disable everything, because the HTML content will be added from outside by `executeCommand` method.

Also, I want to submit my text when the user press `enter` and let the breaking lines with `shift+key`, but I can't find on documentation anything that allows me to do that. Is it possible?

One more problem: I have a emojipicker to insert content to editor but when I and chosing my emoji, the editor loses the focus, so the `insertHtml` command of `executeCommand`, inserts the emoji on the begining, not where the user had the cursor.

Buvana Sathasivam · Answer

Hi Renan, 
 
Currently, we are validating your reported query. We will update you with further details on February 25, 2022. 
 
Regards, 
Buvana S

Buvana Sathasivam · Answer

Hi Renan, 
 
Greetings from Syncfusion support. 
 
Query #1: “I need a configuration that disable everything, because the HTML content will be added from outside by `executeCommand` method.” 
You can achieve your requirement by emptying the keyConfigs at the created event and preventing the default keyboard actions the below way. Please see below the code and sample. 




var defaultRTE = new ej.richtexteditor.RichTextEditor({ 
  created: onCreate 
}); 
 
function onCreate() { 
  this.keyboardModule.keyConfigs = ''; 
  var editarea = document.querySelector('.e-richtexteditor .e-content'); 
  editarea.addEventListener('keydown', docKeyDown); //Bind keydown event 
} 
 
// KeyDown event handler 
function docKeyDown(e) { 
  if (e.ctrlKey == true || e.keyCode == 13) { 
    e.preventDefault(); 
    e.stopPropagation(); 
    e.stopImmediatePropagation(); 
  } 
} 
 
 
Query #2: “I want to submit my text when the user press `enter` and let the breaking lines with `shift+key`, but I can't find on documentation anything that allows me to do that. Is it possible?” 
You can perform your form submit action when you press the enter key in the below way. 




// KeyDown event handler 
function docKeyDown(e) { 
  if (e.keyCode == 13) { 
    // You can perform form submit action here 
  } 
} 
By default, it adds the br tag into Rich Text Editor content when you press the shift + enter key. 
Query #3: “I have a emojipicker to insert content to editor but when I and chosing my emoji, the editor loses the focus, so the `insertHtml` command of `executeCommand`, inserts the emoji on the begining,  not where the user had the cursor.” 
You must save the cursor position using the selection save method at a custom toolbar click action, which is used to save the cursor last position before focusing out. Now, you can perform all external operations using a cursor. After that, you restore this cursor selection using the selection restore method before the executeCommand, which is used to place the cursor in the last saved cursor position in the Rich Text Editor content. 




function onCreate() { 
  customBtn.onclick = function (e) { 
    range = selection.getRange(document); 
    saveSelection = selection.save(range, document); 
  }; 
} 
function onInsert() { 
    saveSelection.restore(); 
    defaultRTE.executeCommand('insertText', activeEle.textContent); 
    defaultRTE.formatter.saveData(); 
} 
 
Sample: https://stackblitz.com/edit/5ldudi-4xpxpp?file=index.js 
 
Documentation: https://ej2.syncfusion.com/documentation/rich-text-editor/keyboard-support/ 
 
API link: https://ej2.syncfusion.com/documentation/api/rich-text-editor/ 
 
Please let us know if you have any concerns. 
 
Regards, 
Buvana S