0

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.

0

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>
  • Thank you for the tip. I implemented your code successfully but it returns one of the same id's I previously had: Body_2a4c2989-39fe-44db-a783-3559dc47ddea_$TextField_spSave But when I plug this into my other code I get the following error: Failed to set the 'selectionEnd' property on 'HTMLInputElement': The input element's type ('hidden') does not support selection. – Ice Cube Feb 27 at 20:01
  • I don't necessary need to get the Body field by id. I just need a handle to the textarea object that will allow me to update it. – Ice Cube Feb 27 at 20:04
  • 1
    Setting the value is simple SPUtility.GetSPField("Body").SetValue("the_value") but the challenge is you need to set the value at the caret position isn't it? – Ahmad Zia Feb 28 at 4:50

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.