Question

我试图在按钮点击时切换媒体编辑器选项（disableEditing）。在单击时，介质编辑器选项的值已更改，但介质编辑器不使用“更新”＃39;值。

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。

我认为初始化媒体编辑器＆＃39;点击＆＃39;可以解决这个问题，但我不知道该怎么做。

使用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目前不支持更改现有实例上的配置选项。因此，如果您实际上尝试更改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），一次只显示一个-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。

如何使用angularjs点击媒体编辑器选项

AngularJS控制器

Html模板

2 个答案: