CODEWITHSUNDEEP
angularjsmedium-editor
Sudarsan GP
Sudarsan GP

Reputation: 1224

how to toggle medium editor option on click using angularjs

I am trying to toggle the medium editor option (disableEditing) on button click. On the click the value for the medium editor option is changed but the medium editor does not use 'updated' value.

AngularJS Controller

 angular.module('myApp').controller('MyCtrl',
   function MyCtrl($scope) {
     $scope.isDisableEdit = false;
 });

Html Template

 <div ng-app='myApp' ng-controller="MyCtrl">
   <span class='position-left' medium-editor ng-model='editModel' bind-options="{'disableEditing': isDisableEdit, 'placeholder': {'text': 'type here'}}"></span>
   <button class='position-right' ng-click='isDisableEdit = !isDisableEdit'>
     Click to Toggle Editing 
   </button>
   <span class='position-right'>
     toggle value - {{isDisableEdit}}
   </span>
 </div>

I have created a jsfiddle demo.

I think initialising medium editor on 'click' could solve the issue, but i am not sure how to do that either.

using thijsw angular medium editor and yabwe medium editor

Upvotes: 2

Views: 1128

Answers (2)

user3771184
user3771184

Reputation: 1

Or you could just use this dirty hack : duplicate the medium-editor element (one with disableEditing enabled, the other with disableEditing disabled), and show only one at a time with ng-show / ng-hide :)

<span ng-show='isDisableEdit' class='position-left' medium-editor ng-model='editModel' bind-options="{'disableEditing': true ,'disableReturn': isDisableEdit, 'placeholder': {'text': 'type here'}}"></span>
<span ng-hide='isDisableEdit' class='position-left' medium-editor ng-model='editModel' bind-options="{'disableEditing':false ,'disableReturn': isDisableEdit, 'placeholder': {'text': 'type here'}}"></span>

You can see jsfiddle.

Upvotes: 0

Nate Mielnik
Nate Mielnik

Reputation: 571

For this specific use case, you could try just disabling/enabling the editor when the button is clicked:

var editor = new MediumEditor(iElement);

function onClick(event) {
    if (editor.isActive)  {
        editor.destroy();
    } else {
        editor.setup();
    }
}

In the above example, the onClick function is a handler for that toggle button you defined.

If you're just trying to enable/disable the user's ability to edit, I think those helpers should work for you.

MediumEditor does not currently support changing configuration options on an already existing instance. So, if you were actually trying to change a value for a MediumEditor option (ie disableEditing) you would need to .destroy() the previous instance, and create a new instance of the editor:

var editor = new MediumEditor(iElement),
    editingAllowed = true;

function onClick(event) {
    editor.destroy();
    if (editingAllowed)  {
        editor = new MediumEditor(iElement, { disableEditing: true });
    } else {
        editor = new MediumEditor(iElement);
    }
    editingAllowed = !editingAllowed;
}

Once instantiated, you can use .setup() and .destroy() helper methods to tear-down and re-initialize the editor respectively. However, you cannot pass new options unless you create a new instance of the editor itself.

One last note, you were calling the init() method above. This method is not officially supported or documented and it may be going away in future releases, so I would definitely avoid calling that method if you can.

Upvotes: 4

Related Questions