ContentEditable reset to true enventhough I set it to false on document ready

Question

I edited the question as I found out the root cause of the issue. The code actually works just fine when I test it with alert. the thing is that sharepoint code seems to reset the value to true after the page is rendered. I spent quite long time trying to change the value of div from contentEditable = true to contentEditable = false. nothing has worked for me so far. I know the question has been answered more than one time and I did try all the proposed solutions unfortunately nothing worked for me. The code in a sharepoint 2010 site, and it is an internal environment so I can't use plugins as propsed in the this question I also tried the following method but it does not work:

function DisableDiv()
{

    $('#ctl00_m_g_88fac340_3da6_4f2b_8785_0340d025790e_ctl00_ctl05_ctl15_ctl00_ctl00_ctl04_ctl00_ctl00_TextField_inplacerte').prop('contentEditable',false);        
}

The default div code looks like this:

<td valign = "top" Class="ms-formbody">
    <!-- FieldName="QBIQ (Title)"
         FieldInternalName = "QBIQ_x0020_description"
FieldType = "SPFieldNote"
      -->
        <span dir = "none" <>
        div Class='ms-rtestate-field ms-rtefield' 
        style =''><div id='ctl00_m_g_74c26ddd_a3bd_4c7b_877d_6a60c1035973_ctl00_ctl05_ctl15_ctl00_ctl00_ctl04_ctl00_ctl00_TextField_inplacerte_label' 
        style ='display:none'>Rich text editor QBIQ (Title)</div>
        <div class=' ms-rtestate-write ms-rteflags-0' id='ctl00_m_g_74c26ddd_a3bd_4c7b_877d_6a60c1035973_ctl00_ctl05_ctl15_ctl00_ctl00_ctl04_ctl00_ctl00_TextField_inplacerte'
            style='min-height:42px' aria-labelledby='ctl00_m_g_74c26ddd_a3bd_4c7b_877d_6a60c1035973_ctl00_ctl05_ctl15_ctl00_ctl00_ctl04_ctl00_ctl00_TextField_inplacerte_label' contentEditable='true'>
            <div class="ms-rtestate-field">QBIQ no & (Title) field value.</div></div> < div style="clear:both;"></div></div>
    <span dir="ltr">

        <input name = "ctl00$m$g_74c26ddd_a3bd_4c7b_877d_6a60c1035973$ctl00$ctl05$ctl15$ctl00$ctl00$ctl04$ctl00$ctl00$TextField_spSave"
    type="HIDDEN" id="ctl00_m_g_74c26ddd_a3bd_4c7b_877d_6a60c1035973_ctl00_ctl05_ctl15_ctl00_ctl00_ctl04_ctl00_ctl00_TextField_spSave"/>
    </span>
</span>


    </td>

What I'm missing? and apology for asking an old question.

score 0 · Answer 1 · answered Mar 09 '18 at 07:36

seems the richtext field is still initialization even DOM loaded, setTimeOut done this based on my testing.

<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.4.js"></script>
    <script type="text/javascript">
        jQuery(document).ready(function () {
            setTimeout(function () {
                $("[id$=inplacerte]").attr("contenteditable", "false");
            },1000)                        
        });            
    </script>

score 0 · Answer 2 · answered Mar 09 '18 at 09:34

You see, playing around with this code, I mistakenly set contenteditable to true for the span and It worked!

So, to make a span NON-contenteditable inside a contenteditable div, you just set its contenteditable attribute to true!

<div contenteditable="true">
  Luke, I am your father.
  <span contenteditable="true">I'm your son?! Ewww!</span>
  Don't speak back to me!
</div>
Here's the file to demonstrate (use IE8 to open it): https://www.dropbox.com/s/2yc3rrtkji3rupr/contenteditableIE8.html .

you may find this tip time-saving.

I'm not sure if I follow, I can't do this as I can't change the default values of the div, since I'm not the one creating the SharePoint sites. I only able to add javascript / jquery that adds extra functionalities in to the site — dolly_do, Mar 09 '18 at 12:06

score 0 · Answer 3 · answered Mar 12 '18 at 10:45

The way that solved the issue was the following: I created the below method

function DisableDiv()
{   

    jQuery("div#Id_TextField_inplacerte").attr('contentEditable',false);
    jQuery("div#Id__TextField_inplacerte").css( "background", "#e0ded8");
    jQuery("div#Id_TextField_inplacerte").attr('contentEditable',false);
    jQuery("div#Id_TextField_inplacerte").css( "background", "#e0ded8");

}

Then on document ready I call the method as following:

$(document).ready(function(){


_spBodyOnLoadFunctionNames.push("DisableDiv");


});

ContentEditable reset to true enventhough I set it to false on document ready

3 Answers3