Context Menu in richtext editor

[Mauli]

Hi
I want custom context menu for Rad text editor. Context menu Item should change depends upon selector. For example if I click on div cut copy option should display. For .box, 'insert Items' option should dispaly.

[Revanth Krishnan]

Hi Mauli, 

 

 

Greetings from Syncfusion support. 

 

 

We have validated your query “To customize the context menu depends upon the selector in the Rich Text Editor”. 

 

The context menu support is not available in the Rich Text Editor, instead you can use the inline toolbar option available in the Rich Text Editor. We have prepared a sample where it can be customize the inline toolbar depends upon the selector in the Rich Text Editor. 

 

Code Snippet: 

 

public inlineMode: object = { enable: true, onSelection: false }; 

public rteElement: HTMLElement; 

public selection: NodeSelection = new NodeSelection(); 

public range: Range; 

public customBtn: HTMLElement; 

public dialogCtn: HTMLElement; 

public saveSelection: NodeSelection; 

public currentElement: HTMLElement; 

public onCreate(): void { 

    this.rteElement =this.rteObj.inputElement as HTMLElement; 

    this.rteElement.onclick = (e: Event) => { 

        this.range = this.selection.getRange(document); 

        if (this.range.startContainer.nodeName === '#text') { 

            this.currentElement = this.range.startContainer.parentElement; 

        } else { 

            this.currentElement = this.range.startContainer as HTMLElement; 

        } 

        if (this.currentElement.tagName === "DIV") { 

            this.rteObj.toolbarSettings.items = ['Bold', 'Italic', 'Underline']; 

        } else { 

            this.rteObj.toolbarSettings.items = ['Formats', 'Alignments', 'OrderedList', 'UnorderedList', 

        'CreateLink']; 

        } 

    }; 

} 

 

<ejs-richtexteditor id='inlineRTE' #inlineRTE [inlineMode]='inlineMode' [toolbarSettings]='toolbarSettings' 

    [format]='format' (created)='onCreate()' [fontFamily]='fontFamily'> 

    <ng-template #valueTemplate> 

        <h2>Div Element</h2> 

        <div>This is a div element with sample content. The sample is configured with inline mode of editor. </div> 

        <h2>Paragraph Element</h2> 

        <p>The sample is configured with inline mode of editor. Initially, the editor is rendered without a 

        <a rel='nofollow' href="https://ej2.syncfusion.com/home/" target="_blank">toolbar</a>. The toolbar becomes 

        visible only when the content is selected.</p> 

    </ng-template> 

</ejs-richtexteditor> 

 

Sample: https://stackblitz.com/edit/angular-nnozzn-dkjxbb?file=app.component.ts 

 

Please refer the above code snippet and the sample and let us know if it satisfies your requirement. 

 

Regards, 

Revanth 

[Mauli]

Hi Revanth,

Thank you for your replay. What I want now, I should able to use both option inline as well as default toolbar. As I selected text (or clicked, as per setting) Default toolbar should inactive. Currently I can see this option for Image quick toolbar. I also want to know that is any planning for add support to context menu?

[Indrajith Srinivasan]

Hi Mauli, 

 

Good day to you, 

 

We have validated your reported query.  

 

Query 1: “ I should able to use both option inline as well as default toolbar. As I selected text (or clicked, as per setting) Default toolbar should inactive” 

 

Yes, you can enable and disable the toolbar items based on the Rich Text Editor clicked by dynamically changing the inlineMode property. Need to enable the inline mode if clicked and disable when the quickToolbar is closed. We have also modified the already shared sample, that tries to meet you requirements. 

 

Sample: https://stackblitz.com/edit/angular-nnozzn-9bnsjw?file=app.component.ts 

 

Query 2: “ I also want to know that is any planning for add support to context menu?” 

 

We have considered “Provide support for context menu in Rich Text Editor“ as a feature request from our end and the feature will be included in any of our upcoming releases. 

 

You can now track the current status of the report, review the proposed resolution timeline, and contact us for any further inquiries through this link: https://www.syncfusion.com/feedback/17222/ 

 

Regards, 

Indrajith 

[Mauli]

Hi Indrajith, 

Thank you so much for your reply and solution provided by you. It is working fine.  Also thanks for considering my query as feature request.

[Indrajith Srinivasan]

Hi Mauli,

Thanks for your update,

We are glad that the reported issue is resolved. We will let you know once the feature is implemented with Rich Text Editor.

Regards,
Indrajith