In a sharepoint webpart built on angular js I have used tiny mce editor. At first I show tiny mce editor with readonly mode. Later based on dropdown selection I need to change it to editable mode. How can I do that?

1 Answer 1


You can use 2 tiny mce instances for same ng-model. One for readonly mode and another one for editable mode. Based on your selection show/hide the html element.

See below example

<div ng-show="showReadOnly">
   <textarea ui-tinymce="tinymceOptionsReadOnly" ng-model="testModel" ></textarea>
<div ng-show="!showReadOnly">
   <textarea ui-tinymce="tinymceOptions" ng-model="testModel" ></textarea>

and in your controller add two tinymce options, one for readonly and another one for editable mode.

$scope.tinymceOptionsReadOnly = {           
    theme : 'advanced',
    readonly : 1

$scope.tinymceOptions = {           
    theme : 'advanced'

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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