How do I find the right ID to reference a Rich Text Editor field so I can manipulate it? Sharepoint 2016 OnPrem

Question

Sharepoint 2016 On Prem:

My ultimate goal is to be able to insert tags into a rich text field for use in email templates. And I need to be able to drop the tags in the exact cursor location.

I can get this to work in basic Text fields by accessing the field through the id: document.getElementById(fieldID).

But when I try the same thing with an rte field I can't seem to find the right id that will allow me to populate the field as needed.

I found a few possible id's for the field but none of them work. They return an object that is either undefined or null. This id (Body_2a4c2989-39fe-44db-a783-3559dc47ddea_$TextField_spSave) let's me access the element but it's the hidden version so i can't manipulate it.

I tried every combination of jquery calls as well and I am able to read the text in the field, but I can't get a handle to the right object that will let me insert text in the cursor location.

The field name is 'Body'. The label is 'Body of Email'.

Any ideas on how I can get a handle to the rte object to be able to insert tags?

Thank You!

    function AddTags(fieldname){
      //GOAL: Insert {tags} into the cursor location of the desired field
      //fieldname: Subject or Body

      if(fieldname == 'Subject'){

        //standard text field
        var fieldID = "Subject_a4231a67-4c6e-4c42-8069-259dfa5934c4_$TextField";
        var txtarea = document.getElementById(fieldID);

      } else {

        //fieldname = 'Body'
        //Rich Text Editor field

        //Possible ID's:            
        //Body_2a4c2989-39fe-44db-a783-3559dc47ddea_$TextField_topDiv
        //Body_2a4c2989-39fe-44db-a783-3559dc47ddea_$TextField_inplacerte
        //Body_2a4c2989-39fe-44db-a783-3559dc47ddea_$TextField_topDiv
        //Body_2a4c2989-39fe-44db-a783-3559dc47ddea_$TextField_spSave
        //Body_2a4c2989-39fe-44db-a783-3559dc47ddea_$TextField_inplacerte_label

        //var txtarea = document.getElementById('Body_2a4c2989-39fe-44db-a783-3559dc47ddea_$TextField_topDiv');   //return DIV element which is undefined
        //var txtarea = document.getElementById('Body_2a4c2989-39fe-44db-a783-3559dc47ddea_$TextField_spSave');  //finds element but it's hidden so can't use
        //var txtarea = document.getElementById('Body_2a4c2989-39fe-44db-a783-3559dc47ddea_$TextField_inplacerte');  //return DIV element which is undefined

        var txtarea = document.getElementById('Body_2a4c2989-39fe-44db-a783-3559dc47ddea_$TextField_spSave');  //finds element but it's hidden so can't use
        //-->> Failed to set the 'selectionEnd' property on 'HTMLInputElement': The input element's type ('hidden') does not support selection.

        //var txtarea = $('textarea[id="Body_2a4c2989-39fe-44db-a783-3559dc47ddea_$TextField_spSave"]');  // undefined
        //var txtarea = $('textarea[id="Body_2a4c2989-39fe-44db-a783-3559dc47ddea_$TextField_topDiv"]');  // undefined
        //var txtarea = $('textarea[id="Body_2a4c2989-39fe-44db-a783-3559dc47ddea_$TextField_inplacerte"]');  // undefined

        //var txtarea = document.getElementById('Body');   //returns null

    //WORKS TO GET TEXT IN FIELD
    //  var comments= $('nobr:contains("Body of Email")').closest('tr').find('div.ms-rtestate-write').html();
    //  alert(comments);
    //  return;

         //...BUT THIS DOESN'T GIVE ME THE NECESSARY OBJECT
        //var txtarea = $('nobr:contains("Body of Email")').closest('tr').find('div.ms-rtestate-write');   //null

    };

//This portion was found on another site and inserts [b] tags but it's close to what I need.
    var start = txtarea.selectionStart;
    var end = txtarea.selectionEnd;
    var sel = txtarea.value.substring(start, end);
    var finText = txtarea.value.substring(0, start) + '[b]' + sel + '[/b]' + txtarea.value.substring(end);
    txtarea.value = finText;
    txtarea.focus();
    txtarea.selectionEnd= end + 7;

};

UPDATE:

I couldn't find a solution for this so I my workaround is to append the tag to the field.

//for rte fields we cannot insert into the cursor location; append tag to end of data
var orgval = $('nobr:contains("Body of Email")').closest('tr').find('div.ms-rtestate-write').html();
$('nobr:contains("Body of Email")').closest('tr').find('div.ms-rtestate-write').html(orgval+ newTag);

I have found so many solutions for this for SP 2013 that I'm starting to think that it's a bug/quirk with SP 2016.

If anybody has anymore suggestions I'd love to hear them. Thanks.

Answer 1

JQuery and SPUtility javascript libraries can be used to get the ID of the RTE field. Once you get the ID, you can use your code to set the text at the cursor position.

Sample code:-

<script src="jquery.min.js"></script>
<script src="sputility.min.js"></script>
<script type="text/javascript">
    var field = SPUtility.GetSPField("Body");
    if(field){
        var id = $(field.Textbox).attr("id"); 
        console.log(id);
    }
</script>