how to change mentions RTE output html

[Khalid Mahmood]

By Default Mention add following html in RTE html output code

<span contenteditable="false" class="e-mention-chip"><a title="[email protected]">@Maria</a></span>​

I do not want to use this. I want to just output html  given in displayTemplate

eg. @Maria only. without span Tag that is added by default

[Frederik Gysel]

any suggestion on this question from Khalid?

[Buvana Sathasivam]

Hi Khalid,

Thank you for reaching out to us, and we apologize for any inconvenience you may have experienced. We understand that you are looking for a solution to achieve your requirement with the Rich Text Editor.

To address your concern, we recommend utilizing the getText method of the Rich Text Editor. This method allows you to retrieve the plain text from the editor. To assist you further, we have provided a code snippet below for your reference:

document.getElementById('addNew').onclick = (e: Event): void => {

  var rteEle = document.getElementById(‘richTextEditorComponent’);

  console.log(rteEle.ej2_instances[0].getText());

};

API link: https://ej2.syncfusion.com/documentation/api/rich-text-editor#gettext

Documentation: https://ej2.syncfusion.com/aspnetcore/documentation/rich-text-editor/getting-started#retrieve-the-formatted-content

We hope this information helps you achieve your desired outcome. If you have any additional questions or require further assistance, please don't hesitate to reach out to us.

Regards,

Buvana S

[Khalid Mahmood]

@Buvana Sathasivam

My requirement is after integration Mentions in RTE there is  displayTemplate ​ configuration to format the Mentions selected option  displayTemplate ​output html is added RTE but its also wrap <span></span> around Mention selection
eg.

<span contenteditable="false" class="e-mention-chip"><a title="[email protected]">@Maria</a></span>

I don't want this extra <span> tag that is added by RTE I just want to add displayTemplate output to RTE 

[Buvana Sathasivam]

Hi Khalid,

Thank you for reaching out to us. We appreciate your update regarding the issue you're facing. By default, our component includes a span tag when you select the mention list and insert it into the RichTextEditor component. However, if you would like to remove the span tag, you can achieve this by using the following code snippet within the mention change event:

Index.cshtml

<ejs-mention id="mention" change="change">…                                                                                                                                                                                      

</ejs-mention>

 

  <script type="text/javascript">

        function change(args) {

            var chips = args.element.querySelectorAll('.e-mention-chip');

            for (var i = 0; i < chips.length; i++) {

                var elem = chips[i].children[0];

                chips[i].replaceWith(elem);

            }

        }

    </script>

This code snippet will enable you to remove the span tag from the mentioned list. To help you further, we have also prepared a sample for your reference.

API link: https://ej2.syncfusion.com/documentation/api/mention#change

Regards,

Buvana S

Attachment: WebApplication1_2919a964.zip

[Khalid Mahmood]

Hi Buvana Sathasivam,

There is any other problem I am facing that I have added 2 mentions with RTE. Mentions displayTemplate is added twice on Enter Key while with mouse selection it working fine

[Khalid Mahmood]

I am using RTE inside Bootstrap Modal with 2 Mentions. In Regular Page with enter keys mention insert single displayTemplate ​where as inside Modal its add 2 on enter key pressed. 

[Priyanka Karthikeyan]

Hi Khalid Mahmood,

 

Thank you for your patience and for providing detailed information.

 

Based on the scenario shared, we have analyzed the issue and created a sample for further clarity. The observed behavior occurs when two mention components target the same Rich Text Editor (RTE) and utilize the default mention character. When a value is selected, it appears twice in both inside and outside the Bootstrap modal. This issue occurs because both mention popups are rendered and maintained in the DOM simultaneously, one behind the other. As a result, the value is appended twice in the Rich Text Editor. To resolve this, you can use different mentionChar values for each mention instance. This approach ensures that each mention popup is triggered only when its respective mention character is typed, preventing any overlap or duplication.

@{
char nameMentionChar = '$';
}
  <ejs-richtexteditor id="mention_integration" placeholder="Type @@ and tag the name" actionBegin="actionBegin">
                                <e-content-template>
                                    <p>Hello <span contenteditable="false" class="e-mention-chip"><a rel='nofollow' href="mailto:[email protected]" title="[email protected]">@@Maria</a></span>&#8203;</p>
                                    <p>Welcome to the mention integration with rich text editor demo. Type <code>@@</code> character and tag user from the suggestion list. </p>
                                </e-content-template>
                            </ejs-richtexteditor>
                            <ejs-mention id="mention" target="#mention_integration_rte-edit-view" created="onMentionCreate"  dataSource="@Model.mention" popupHeight="200px" popupWidth="250px" allowSpaces="true" suggestionCount="8" displayTemplate="<a rel='nofollow' href='mailto:${EmailId}' title=${EmailId}>${Name}</a>" itemTemplate="<table><tr><td><div id='mention-TemplateList'><img class='mentionEmpImage' src='../images/Mention/${Eimg}.png' alt='employee'/><span class='e-badge e-badge-success e-badge-overlap e-badge-dot e-badge-bottom ${Status}'></span></div></td><td><span class='person'>${Name}</span><span class='email'>${EmailId}</span></td></tr></table>">
                                <e-mention-fields text="Name"></e-mention-fields>
                            </ejs-mention>
                            <ejs-mention id="mention1"  mentionChar="@nameMentionChar" target="#mention_integration_rte-edit-view" created="onMentionCreate"  dataSource="@Model.mention" popupHeight="200px" popupWidth="250px" allowSpaces="true" suggestionCount="8" displayTemplate="<a rel='nofollow' href='mailto:${EmailId}' title=${EmailId}>${Name}</a>" itemTemplate="<table><tr><td><div id='mention-TemplateList'><img class='mentionEmpImage' src='../images/Mention/${Eimg}.png' alt='employee'/><span class='e-badge e-badge-success e-badge-overlap e-badge-dot e-badge-bottom ${Status}'></span></div></td><td><span class='person'>${Name}</span><span class='email'>${EmailId}</span></td></tr></table>">
                                <e-mention-fields text="Name"></e-mention-fields>
                            </ejs-mention>

 

 

Regards,

Priyanka K

Attachment: RTE_6852dc42.zip

[Khalid Mahmood]

I have attached updated code with changes according to my scenario .


1. Every time Modal is opened this code is appended to dom.
   <div id="mention_integration_rte-edit-view_popup" class="e-mention e-lib e-rte-elements"></div>
   it replicates multiple times 
2. while first attempt open modal mentions works fine with enter key but after that it behaves abnormally.
   
3. In this sample duplication problem isn't occurred but my case with this code

@{
    string[] deniedTags = ["img"];
    string[] tableToolbar = [];
    var mentionQuery = "new ej.data.Query().requiresCount()";
}
<ejs-richtexteditor id="Message" name="Message" required enableTabKey="true"
                    showCharCount="true" enableResize="false" height="400"
                    enterKey="DIV" shiftEnterKey="BR" autoSaveOnIdle="false">
    <e-content-template>@ViewBag.TK_Message </e-content-template>
    <e-richtexteditor-quicktoolbarsettings
        table="@tableToolbar"></e-richtexteditor-quicktoolbarsettings>
    <e-richtexteditor-pastecleanupsettings Prompt="true" deniedTags="@deniedTags"/>
    <e-richtexteditor-toolbarsettings type="Expand" enableFloating="false"
                                      items="@ViewBag.ToolBar"/>
    </ejs-richtexteditor>
<ejs-mention id="Mentions" target="#Message_rte-edit-view" mentionChar="@(AppConstants.MentionChar)"
             dataSource="@ViewBag.Mentions"
             popupHeight="200px" popupWidth="250px" allowSpaces="false"
             displayTemplate="{${Value}} " cssClass="tk-rte-mention">
    <e-mention-fields text="Key"/>
</ejs-mention>
<ejs-mention id="UserMentions" target="#Message_rte-edit-view"
             mentionChar="@(AppConstants.UserMention)" query="@mentionQuery"
             allowSpaces="true" popupHeight="200px" popupWidth="250px"
             showMentionChar="false"
             itemTemplate="<div class='py-1 border-bottom'><h6 class='mb-0 font-weight-bold'>${displayName}</h6><h6 class='mb-0'>${userName}</h6></div>"
             displayTemplate="<a rel='nofollow' href='mailto:${emailId}' data-notify='${id}' class='tk-portfolio cursor-pointer' data-url='Users/Portfolio/${id}'>${displayName}</a>"
             noRecordsTemplate="No item related to the search" cssClass="tk-rte-mention">
    <e-data-manager adaptor="WebApiAdaptor" url="api/mentions/users"
                    crossDomain="true"></e-data-manager>
    <e-mention-fields text="userName" Value="id"></e-mention-fields>
</ejs-mention>

with this it created duplicate entries too.

Question: ​Can multiple Mentions works properly attached to different RTE's with same names ? eg. i have 1 RTE inline on page with UsersMention ​name and than open Modal with RTE and same UserMentions ​ Modal RTE 

RTE readonly="true" ​set initially and its also doesn't working. firstly RTE is editable and after that with changing through API it can enable/disable 

Attachment: RTE_6852dc42_Updated_637bfcb1.zip

[Priyanka Karthikeyan]

Hi Khalid Mahmood,

 

Query1: "Every time Modal is opened this code is appended to dom.
<div id="mention_integration_rte-edit-view_popup" class="e-mention e-lib e-rte-elements"></div>"

 

We maintain this <div> in the UI to dynamically append the popup element while opening the modal. To ensure the element is removed when the Bootstrap modal is closed, you can use the following code snippet:

 

 

mModal.on('hide.bs.modal', function () {
                    let modalRTE = document.querySelector("#mention_integration");
                    if (modalRTE != null) { modalRTE.ej2_instances[0].destroy(); }
                    let mention = document.getElementById("mention_integration_rte-edit-view_popup");
                    if (mention != null) { mention.remove();}
                    $(this).remove();
                });   

 

 

Query2: "while first attempt open modal mentions works fine with enter key but after that it behaves abnormally."

 

After thoroughly validating the issue, we found that args.cancel is not set for the Enter action. You can use the additional highlighted condition if it fails to set args.cancel to true in the actionBegin event. Please remove the highlighted condition to resolve the issue.

 

 

function actionBegin(args) {
       if (args.requestType === 'EnterAction' && mentionObj.element.classList.contains('e-popup-open')) {
           args.cancel = true;
       }
   }

 

 

Query3: "In this sample duplication problem isn't occurred but my case with this code"

 

Based on our evaluation, the duplication problem does not occur in the shared sample. However, if you're encountering this issue in your specific case, we recommend sharing a reproducible code sample or detailed steps for further investigation.

 

Query4: "Can multiple Mentions works properly attached to different RTE's with same names ? eg. i have 1 RTE inline on page with UsersMention name and than open Modal with RTE and same UserMentions Modal RTE"

 

To avoid potential conflicts, we recommend using unique IDs for each RTE and Mention component. This ensures proper functionality even when multiple instances are used.

 

Query5: "RTE readonly="true" set initially and its also doesn't working. firstly RTE is editable and after that with changing through API it can enable/disable"

 

For more assistance regarding this behavior, you can refer to the following forum update related to the RTE’s readonly property:

 

RTE readonly doesn't submited to form | ASP.NET Core - EJ 2 Forums | Syncfusion

 

Regards,

Priyanka K

 

Attachment: CoreTextBox_bb332236.zip