angularjs - 单击图像插入按钮 : Textangular 运行自定义函数

Question

我需要覆盖 textAngular 的图像插入按钮的默认功能。

我需要在单击时打开一个模态。这该怎么做？

Answer 1

我有一个类似的问题，发现它没有很好地记录。有一些错误线程提到了一些解决方案:

https://github.com/fraywing/textAngular/issues/54和
https://github.com/fraywing/textAngular/issues/146

在那里遵循另一个用户的解决方案，以及 customizing the toolbar wiki 上的部分，我的解决方案如下所示:

config(['$provide',
  function($provide) {
    $provide.decorator('taOptions', ['taRegisterTool', '$modal', '$delegate',
      function(taRegisterTool, $modal, taOptions) {
        // $delegate is the taOptions we are decorating
        // here we override the default toolbars specified in taOptions.
        taOptions.toolbar = [
          ['clear', 'h1', 'h2', 'h3'],
          ['ul', 'ol'],
          ['bold', 'italics'],
          ['insertLink', 'insertVideo']
        ];

        // Create our own insertImage button
        taRegisterTool('customInsertImage', {
          iconclass: "fa fa-picture-o",
          action: function($deferred) {
            var textAngular = this;
            var savedSelection = rangy.saveSelection();
            var modalInstance = $modal.open({
              // Put a link to your template here or whatever
              template: '<label>Enter the url to your image:</label><input type="text" ng-model="img.url"><button ng-click="submit()">OK</button>',
              size: 'sm',
              controller: ['$modalInstance', '$scope',
                function($modalInstance, $scope) {
                  $scope.img = {
                    url: ''
                  };
                  $scope.submit = function() {
                    $modalInstance.close($scope.img.url);
                  };
                }
              ]
            });

            modalInstance.result.then(function(imgUrl) {
              rangy.restoreSelection(savedSelection);
              textAngular.$editor().wrapSelection('insertImage', imgUrl);
              $deferred.resolve();
            });
            return false;
          },
        });

        // Now add the button to the default toolbar definition
        // Note: It'll be the last button
        taOptions.toolbar[3].push('customInsertImage');
        return taOptions;
      }
    ]);
  }
]);

查看 plunkr !

主要问题:这对其他人来说可能很明显，但您需要恢复选择内容才能使图像插入工作。我猜 execCommand将图像放在光标位置，当您打开自己的模态时，该位置将丢失。我不确定 rangy特别是必要的，或者如果您可以在调用 wrapSelection 之前先确保编辑器具有光标焦点.

编辑:如果您要导入 rangy库，textAngular 在它的 Action 构造函数中有一个可选的方法。文档:“restoreSelection 仅在包含 rangy 库的情况下才定义，并且可以将其称为 restoreSelection() 以在 WYSIWYG 编辑器中恢复用户选择。”所以你的操作方法可以使用它而不是直接的 rangy 调用。

action: function($deferred, restoreSelection) {
                var textAngular = this;
                var modalInstance = $modal.open({
                    ....
                });

                modalInstance.result.then(function(imgUrl) {
                  restoreSelection();
                  textAngular.$editor().wrapSelection('insertImage', imgUrl);
                  $deferred.resolve();
                });
                return false;
              },
            });
            ...