将颜色添加到textAngular是否有一种简单的方法可以使colorpicker在textAngular编辑器中单击时关闭？

Question

有相当多的人询问有关向textAngular添加字体和背景颜色的问题.我对我的解决方案非常满意,所以我想我会分享这个.我还有最后一个问题:在点击编辑器时,是否有一种简单的方法可以让颜色选择器关闭？没有修改我想避免的textAngular代码？

在这个解决方案中,我使用了angular-bootstrap-colorpicker,所以我还添加了作为依赖项到我的应用程序:[...'colorpicker.module','textAngular',...].

关注https://github.com/fraywing/textAngular/wiki/Customising-The-Toolbar我在我的应用程序的配置部分:

    $provide.decorator('taOptions', ['taRegisterTool', '$delegate', function(taRegisterTool, taOptions){
      // $delegate is the taOptions we are decorating
      // register the tool with textAngular

      taRegisterTool('backgroundColor', {
        display: "<button colorpicker class='btn btn-default ng-scope' title='Background Color' type='button' colorpicker-close-on-select colorpicker-position='bottom' ng-model='backgroundColor' style='background-color: {{backgroundColor}}'><i class='fa fa-paint-brush'></i></button>",
        action: function (deferred) {
          var self = this;
          this.$editor().wrapSelection('backgroundColor', this.backgroundColor);
          if (typeof self.listener == 'undefined') {
            self.listener = self.$watch('backgroundColor', function (newValue) {
              self.$editor().wrapSelection('backColor', newValue);
            });
          }
          self.$on('colorpicker-selected', function () {
            deferred.resolve();
          });
          self.$on('colorpicker-closed', function () {
            deferred.resolve();
          });
          return;
        }
      });
      taOptions.toolbar[1].unshift('backgroundColor');

      taRegisterTool('fontColor', {
        display: "<button colorpicker type='button' class='btn btn-default ng-scope'  title='Font Color'  colorpicker-close-on-select colorpicker-position='bottom' ng-model='fontColor' style='color: {{fontColor}}'><i class='fa fa-font '></i></button>",
        action: function (deferred) {
          var self = this;
          if (typeof self.listener == 'undefined') {
            self.listener = self.$watch('fontColor', function (newValue) {
              self.$editor().wrapSelection('foreColor', newValue);
            });
          }
          self.$on('colorpicker-selected', function () {
            deferred.resolve();
          });
          self.$on('colorpicker-closed', function () {
            deferred.resolve();
          });
          return false;
        }
      });
      taOptions.toolbar[1].unshift('fontColor');

      taOptions.setup.textEditorSetup=function($element) {
        $element.attr('ui-codemirror', '');
      };
      return taOptions;
    }]);

  }) 

其中'ui-codemirror'与textAngular的颜色添加无关,只是我代码的一部分.

我希望这对其他人有帮助,正如我上面提到的,我只希望当我点击编辑器时我可以使颜色选择器关闭...

这是UI的结果添加的图片.