Post RTE data along mention email list to the controller

[Ujjwal Ghatani]

Hi,

I am working with a rich text editor on the .NET Core platform, and I am trying to send a list of mentioned emails (e.g., @[e-mail]) along with the text written inside the RTE. The issue I am facing is that when I try to post the form on the server side using an AJAX POST method, I want the mentioned email list to be listed separately in my controller, and the text of the RTE to be posted separately. Can anyone provide me with guidance on how to implement a solution for this issue? Thank you in advance for your help.

Here is my Code below.

@{

    List<EmployeeData> data = Model.employeeData;

    char nameMentionChar = '@';

    var asyncSettings = new Syncfusion.EJ2.Inputs.UploaderAsyncSettings { SaveUrl = @Url.Content("/configuration/home/Savefiles"), RemoveUrl = @Url.Content("/configuration/home/Removefile") };

}

 <div class="row mt-4">

<div class="col-lg-12">

<label for="exampleFormControlTextarea1"

   class="form-label">Leave a Comments</label>

<ejs-richtexteditor id="mention_integration" placeholder="Type @@ and tag the name" actionBegin="actionBegin">

<e-content-template>

</e-content-template>

<e-richtexteditor-filemanagersettings enable="true" path="/Pictures/Food" ajaxSettings="@ViewBag.ajaxSettings"></e-richtexteditor-filemanagersettings>

</ejs-richtexteditor>

<ejs-uploader id="UploadFiles" actionComplete="onUploaderActionComplete" autoUpload="false" sequentialUpload="true" removing="onFileRemove" dropArea=".control-fluid" asyncSettings="@asyncSettings"></ejs-uploader>

<ejs-mention id="mention" target="#mention_integration_rte-edit-view" mentionChar="@nameMentionChar" dataSource="@data" popupHeight="200px" popupWidth="250px" allowSpaces="true" suggestionCount="8" displayTemplate="<a title=${EmailId}>${Name}</a>" itemTemplate="<table><tr><td><div id='mention-TemplateList'><img class='mentionEmpImage' src='/images/${EmployeeImage}' 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" Value="EmailId"></e-mention-fields>

</ejs-mention>

</div>

<div class="col-12 text-end mt-4">

<button id="btn" class="btn btn-success">Post Comments</button>

</div>

</div>

<script>

       document.getElementById('btn').addEventListener('click', function () {

       var obj = document.getElementById('mention_integration').ej2_instances[0];

       console.log(obj);

       var objfile = getfile();

       var paramVal = obj.value + '<div>' + objfile + '</div>';

       //var value = JSON.stringify({ text: paramVal});

       var value = JSON.stringify({ fileName: objfile, text: obj.value});

       const Http = new XMLHttpRequest();

       const url = '@Url.Action("SaveComment")';

       Http.open("POST", url);

       Http.setRequestHeader('Content-Type', 'application/json');

       Http.send(value);

       console.log(value);

    });

</script>

Browse...

[Vinothkumar Yuvaraj]

Hi Ujjwal,

Your requirement to send the mention list separately to the server can be achieved by using the 'change' event of the mention component. In the 'change' event, we have added the inserted mention list data to an array and then handled the removing functionality by binding the 'keydown' event to the RichTextEditor. You can send that list of mentioned emails as an array to the server side.

We have provided a code snippet and attached a sample for your reference.

 <div class="default-section">

      <ejs-richtexteditor created="created" actionBegin="actionBegin">

      </ejs-richtexteditor>

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

      </ejs-mention>

 </div>

<script type="text/javascript">

    function actionBegin(args) {

        if (args.requestType === 'EnterAction') {

            args.cancel = true;

        }

    }

    var arr = [];

    function created() {

        document.getElementsByClassName('e-richtexteditor')[0].addEventListener('keydown', function (e) {

            if (e.key == 'Backspace') {

                var off = window.getSelection().anchorOffset;

                if (window.getSelection().anchorNode.childNodes[off] == undefined) {

                    getNodeCollection();

                } else if (

window.getSelection().anchorNode.childNodes[off].tagName == 'SPAN' ||

                    window.getSelection().anchorNode.childNodes[off].nodeName == '#text'

                ) {

                    var a =

window.getSelection().anchorNode.childNodes[off]

.previousElementSibling;

                    var originalString = a.innerText.replace('@@', '');

                    remove(originalString);

                } else if (

(window.getSelection().anchorOffset == 0 &&

window.getSelection().anchorNode.childNodes[off].tagName ==

                        'SPAN') ||

window.getSelection().anchorNode.childNodes[off].nodeName == '#text'

                ) {

                    var b = window.getSelection().anchorNode.previousElementSibling;

                    var originalString = b.innerText.replace('@@', '');

                    remove(originalString);

                }

            }

        });

    }

    function remove(name) {

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

            if (arr[i].Name == name) {

                arr.splice(i, 1);

            }

        }

        console.log(arr);

    }

    function change(args) {

        arr.push(args.itemData);

        console.log(arr)

    }

    function getNodeCollection() {

        var range = window.getSelection().getRangeAt(0);

        const endNode =

            range.endContainer.childNodes[

            range.endOffset > 0 ? range.endOffset - 1 : range.endOffset

            ] || range.endContainer;

        if (endNode.nodeName == 'SPAN') {

            console.log(

                document

                    .getElementById('mention_integration_rte-edit-view_popup')

                    .ej2_instances[0].getDataByValue(endNode.innerText)

            );

        } else if (

            endNode.previousSibling != null &&

            endNode.previousSibling.nodeName == '#text' &&

            endNode.previousElementSibling != null

        ) {

            var originalstr = endNode.previousElementSibling.innerText.replace('@@', '');

            remove(originalstr);

        } else if (endNode.previousElementSibling && endNode.innerText) {

            var originalstr = endNode.innerText.replace('@@', '');

            remove(originalstr);

        }

    }

Please let us know if you have any further concerns or questions.

Regards,

Vinothkumar

Attachment: SyncfusionRichTextEditor_4f73c00c_7beed807.zip