如何使用angularjs在点击时切换媒体编辑器选项

Question

我正在尝试在单击按钮时切换媒体编辑器选项(disableEditing)。单击时，媒体编辑器选项的值被更改，但媒体编辑器不使用‘更新’值。

AngularJS控制器

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

Html模板

 <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>

我已经创建了一个jsfiddle demo。

我认为在“click”上初始化medium编辑器可以解决这个问题，但我也不确定该怎么做。

使用thijsw angular medium editor和yabwe medium editor

Answer 1

对于此特定用例，您可以尝试在单击按钮时禁用/启用编辑器：

var editor = new MediumEditor(iElement);

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

在上面的示例中，onClick函数是您定义的切换按钮的处理程序。

如果您只是想启用/禁用用户的编辑功能，我认为这些帮助程序应该适用于您。

MediumEditor当前不支持更改现有实例上的配置选项。因此，如果您实际上正在尝试更改编辑器选项(即disableEditing)的值，则需要对前一个实例执行.destroy()操作，并创建编辑器的新实例：

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;
}

实例化后，您可以使用.setup()和.destroy()帮助器方法分别拆卸和重新初始化编辑器。但是，除非创建编辑器本身的新实例，否则无法传递新选项。

最后要注意的是，您正在调用上面的init()方法。这个方法没有正式的支持或文档，它可能会在未来的版本中消失，所以如果可以的话，我绝对会避免调用这个方法。

Answer 2

或者，您可以使用这个肮脏的技巧：复制媒体编辑器的元素(一个启用了disableEditing，另一个禁用了disableEditing )，并且使用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>

你可以看到jsfiddle。