Edit functions of toolbar button in Rich Text Editor

[Eddy Mackonade]

Hi Syncfusion Team,

I want to assign a custom function to the onClick event of the button generated by the FileManager item below in a Rich Text Editor. Is it possible? 

 private toolbarSettings: ToolbarSettingsModel = {
        items: [ 'FileManager']
    };

Looking forward to your reply. Thank you.

[Vinitha Jeyakumar]

Hi Eddy, 

 

 

Greetings from Syncfusion support 

 

 

We have validated your query “Edit functions of toolbar button in Rich Text Editor” 

 

Your requirement to write a custom function for the onClick event of the custom toolbar buttons can be done using the click attribute of the custom toolbar. Please check the below code, 

 

Code snippet: 

export class Default extends React.PureComponent 

            { 

                constructor() { 

    super(...arguments); 

    this.items = [ 

      { 

        template: 

          '<button class="e-tbar-btn e-btn e-filemanager-btn" tabindex="-1" id="fileManager_tbar"  style="width:100%">File Manager</button>', 

        undo: true, 

        click: this.onClick.bind(this), 

        tooltipText: 'File Manager' 

      }, 

      . . . 

        . . . 

    ]; 

    this.toolbarSettings = { 

      items: this.items 

    }; 

    } 

    onClick() { 

        // here you can write your code 

  } 

  render() { 

        return ( 

     

          < div > 

     

            < RichTextEditorComponent 

          id = "defaultRTE" 

          ref={scope => { 

            this.rteObj = scope; 

          }} 

          toolbarSettings ={ this.toolbarSettings} 

        > 

          < Inject services ={[HtmlEditor, Toolbar, Link, Image, QuickToolbar]} /> 

 

 

          </ RichTextEditorComponent > 

 

 

        </ div > 

    ); 

    } 

} 

render(< Default />, document.getElementById('sample')); 

 

Sample: https://stackblitz.com/edit/react-rcdarc-otjylc?file=index.js 

 

Please check the above sample and code snippet and let us know if it satisfies your requirement. If we misunderstood your requirement, please explain your requirement. That will help us to provide an exact solution as earlier as possible. 

 

Regards, 

Vinitha 

 

 

[Eddy Mackonade]

Thank you. I will try it out.

[Vinitha Jeyakumar]

Hi Eddy, 

 

 

We will wait until we get an update from you. 

 

Regards, 

Vinitha