Custom toolbar in RichTextEditor

Question

Hi,I'm evaluating one of your widgets, which is RichTextEditor. The requirements of my company is to create a toolbar from scratch. Does RichTextEditor provides such an API, so that I can create my own controls and use that API to achieve the same behaviour as for default controls? E.g. custom select for font, on font selected I call a function which will update current font in the editor etc.?Regards

Revanth Krishnan · Answer

Hi Michal, 
 
 
Greetings from Syncfusion support. 
 
We have validated your query “Does Rich Text Editor provides such an API, so that I can create my own toolbar and use that API to achieve the same behavior as for default controls”. 
 
Yes, you can use your own custom toolbar to achieve the default Rich Text Editor’s functionalities, this can be achieved using the ‘executeCommand’ public method. We have prepared a sample with some basic functionalities including (font name) for your reference, 
 
Code Snippet: 




onClicked(args) { 
    var range; 
    var selection; 
    var selectedText; 
    if (args.item.properties.tooltipText == "createLink") { 
      range = this.rteObj.formatter.editorManager.nodeSelection.getRange( 
        document 
      ); 
      selection = this.rteObj.formatter.editorManager.nodeSelection.save( 
        range, 
        document 
      ); 
      selectedText = document.getSelection(); 
      this.rteObj.executeCommand(args.item.properties.tooltipText, { 
        selection: selection, 
        url: "www.syncfusion.com", 
        text: selectedText.focusNode.textContent 
      }); 
    } else if (args.item.properties.tooltipText == "fontName") { 
      this.rteObj.executeCommand("fontName", "Courier New"); 
    } else { 
      this.rteObj.executeCommand(args.item.properties.tooltipText); 
    } 
  } 
 
Sample: https://stackblitz.com/edit/react-rcdarc-k4smro?file=index.js 
 
Please check the above code snippet and sample and let us know if it satisfies your requirement. 
 
Regards, 
Revanth