Is there a way to make the rich text field read only with javascript?
In my examples I have given the rich-text field the custom css class name 'myRichText'.
To make this field non-editable, I used the following line.
$('.myRichText .cf-field > div > div').attr('contenteditable', 'false');
But to achieve results similar to setting the field as readonly on the designer, I used the following.
// set border 0
$('.myRichText .cf-field > div').addClass('noborder');
// set attributes
$('.myRichText .cf-field > div').attr({
'autocomplete': 'off',
'readonly': 'True',
'backend-readonly': 'True'
});
// remove css
$('.myRichText .cf-field > div').removeClass('panel');
// set not editable
$('.myRichText .cf-field > div > div').attr('contenteditable', 'false');
// remove css
$('.myRichText .cf-field > div > div').css('height', '');
$('.myRichText .cf-field > div > div').removeClass('rich-text-editor');
// remove editor-toolbar
$('.myRichText .cf-field > div > div').remove('.editor-toolbar');
That worked perfectly - Thank you!
How would you remove the read only so that it will save the JS added value when Submit is clicked?
It seems that as long as the element $('.myRichText .cf-field > div > div') has the class ('rich-text-editor'), it will save the values. You could add the class back to the element following a click event on the submit button.
Note that the field will expand out in height though, you may need to adjust the size with some CSS to suit your needs.
Again, it worked perfectly - thank you so much Ray!
Hi Ray.
I am trying to use your code to remove the editor toolbar on a rich text field and to make that field read only to the user. I have added the CSS class to the field "myRichText" and added the following css:
$('.myRichText .cf-field > div > div').remove('.editor-toolbar');
$('.myRichText .cf-field > div').attr({
'autocomplete': 'off',
'readonly': 'True',
});
It has no affect on the behavior of the form and the rich text field is still editable, and the toolbar displays. I have entered your code incorrectly?
Forms V11, on a "Modern Design" form.
Thanks
Tim, did you ever get this working? Also interested in a read only rich text field without the editor.
Yes we did using this code in the CSS section of the modern designed form. Note: It applies to all Rich Text fields on the form, not to a single field.
.note-toolbar{
display: none !important;
}