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

Question

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

我需要在点击相同的时候打开一个模态.这该怎么做？

Answer 1

我有一个类似的问题,发现它没有记录得很好.有一些bug线程提到了一些解决方案:

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

在那里跟随另一个用户的解决方案,并在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在其操作构造函数中有一个可选方法.文档:"只有包含rangy库才能定义restoreSelection,并且可以将其称为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;
              },
            });
            ...

Answer 2

我正在通过angular-bootsrap-ui $ modal服务和DanialFarid的角度文件上传服务实现图像上传服务的代码.

.config(function ($provide) {

            $provide.decorator('taOptions', ['taRegisterTool', '$delegate', '$modal', function (taRegisterTool, taOptions, $modal) {
                taRegisterTool('uploadImage', {
                    iconclass: "fa fa-image",
                    action: function (deferred) {
                        $modal.open({
                            controller: 'UploadImageModalInstance',
                            templateUrl: 'views/modals/upload.html'
                        }).result.then(
                            function (result) {
                                document.execCommand('insertImage', true, result);
                                deferred.resolve();
                            },
                            function () {
                                deferred.resolve();
                            }
                        );
                        return false;
                    }
                });
                taOptions.toolbar[1].push('uploadImage');
                return taOptions;
            }]);
        })

现在,带有处理$ scope.upload()函数的按钮的模态视图,预览上传的图像,以及触发$ scope.insert()函数的按钮.

<form data-ng-submit="insert()">
    <div class="modal-header">
        <div class="col-md-10">
            <h4 class="modal-title"><span class="glyphicon glyphicon-picture"></span> Upload Image</h4>
        </div>
        <div class="col-md-2 right">
            <a class="close" href data-ng-click="$dismiss()"><span class="glyphicon glyphicon-remove"></span></a>
        </div>
    </div>
    <div class="modal-body">
        <img data-ng-src="{{image}}">
        <progressbar data-ng-show="progress > 0 && progress < 100" class="progress-striped active" value="progress"></progressbar>
    </div>
    <div class="modal-footer center clearfix">
        <button data-ng-click="$dismiss()" type="button" class="btn btn-default pull-left">Cancel</button>
        <button type="submit" data-ng-disabled="image == null || image == '' || image == 'img/posts/default.svg'" class="btn btn-primary pull-right">Insert Image</button>
        <button type="button" data-ngf-select data-ngf-change="upload()" data-ng-model="files" data-ngf-multiple="false" class="btn btn-primary pull-right"><span class="glyphicon glyphicon-picture mR5"></span>Upload Image</button>
    </div>
</form>

还有处理文件上传和图像插入的控制器:

app.controller('UploadImageModalInstance', function($scope, $modalInstance, Upload){

            $scope.image = 'img/default.png';

            $scope.progress = 0;
            $scope.files = [];

            $scope.upload = function(){
                Upload.upload({
                    url: 'api/upload',
                    fields: {'dir': 'img/uploads/'},
                    file: $scope.files[0],
                    method: 'POST'
                }).progress(function (evt) {
                    $scope.progress = parseInt(100.0 * evt.loaded / evt.total);
                }).success(function (data) {
                    $scope.progress = 0;
                    $scope.image = data.dir+data.filename;
                });
            };

            $scope.insert = function(){
                $modalInstance.close($scope.image);
            };
        })