2

我正在尝试在单击按钮时切换媒体编辑器选项（ 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 演示。

我认为在“点击”上初始化媒体编辑器可以解决这个问题，但我也不知道该怎么做。

使用thijsw 角度媒体编辑器和yabwe 媒体编辑器

4

2 回答 2

4

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

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()helper 方法分别拆除和重新初始化编辑器。但是，除非您创建编辑器本身的新实例，否则您无法传递新选项。

最后一点，您正在调用init()上面的方法。此方法不受官方支持或记录，并且可能会在将来的版本中消失，因此如果可以的话，我绝对会避免调用该方法。

于 2015-12-31T19:59:37.550 回答
0

或者您可以只使用这种肮脏的技巧：复制中等编辑器元素（一个启用 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。

于 2017-08-20T00:29:23.613 回答