CKEditor, AngularJS и Bootstrap 3 Модальный - InsertText() ведет себя беспорядочным

Question

У меня есть следующая угловая директива как на Updating textarea value with CKEditor content in Angular JS и Bind Ckeditor value to model text in angularjs and rails

angular.module('ngTeknorix') 
.directive('ckEditor', ['$timeout', function ($timeout) { 
    return { 
    require: '?ngModel', 
    link: function (scope, elm, attr, ngModel) { 
     var ck = CKEDITOR.replace(elm[0]); 

     if (!ngModel) return; 

     ck.on('change', function() { 
      scope.$apply(function() { 
       ngModel.$setViewValue(ck.getData()); 
      }); 
     }); 

     ngModel.$render = function (value) { 
      ck.setData(ngModel.$viewValue); 
     }; 

     // This breaks!! 
     scope.addConfirmationLink = function() { 
      ck.insertText("Inserted Text"); 
     } 
    } 
}; 
}]); 

Это работает абсолютно нормально для нормальной работы, но как только я попробовать InsertText или insertHtml функции для вставки текста в позицию курсора, который ведет себя неустойчиво. Он иногда вставляет текст один раз .. и иногда дважды ..

Любые идеи?

Примечание: все это делается в модуле Bootstrap.

Answer 1

Обычно ckEditor работает абсолютно нормально с угловымJS в качестве директивы.

На «» pastestate случае CKEditor вы установите значение угловой модели: -

ck.on('pasteState', function() { 
    $timeout(function() { 
    ngModel.$setViewValue(ck.getData()); 
    }); 
}); 

И наоборот, чтобы установить значение в CKEditor вы использовать $ визуализации функции.

ngModel.$render = function (value) { 
    ck.setData(ngModel.$viewValue); 
}; 

Все идет на броске, когда вы используете функцию CKEditor как InsertText() или insertHtml() как pastestate событие получает сразу же выстрелил (в противном случае она вызывается после задержки). Он ведет себя неустойчиво, когда insertText() вызывается во второй раз и дважды добавляет текст, три раза в третий раз и т. Д.

Итак, чтобы сделать работу с CKEditor Bootstrap Модальные и AngularJS мы должны использовать функцию уничтожения CKEditor на закрытии модального ....

angular.module('ngTeknorix') 
.directive('ckEditor', ['$timeout', function ($timeout) { 
    return { 
     require: '?ngModel', 
     link: function ($scope, $element, $attrs, ngModel) { 
      $scope.initCkEditor = function() { 
       var ck = CKEDITOR.replace($attrs.id); 
       ck.on('pasteState', function() { 
        $timeout(function() { 
         ngModel.$setViewValue(ck.getData()); 
        }); 
       }); 
       ngModel.$render = function() { 
        ck.setData(ngModel.$viewValue); 
       }; 
       $scope.insertText = function (value) { 
        ck.insertText(value); 
       } 
      }; 
      $scope.destroyCkEditor = function() { 
       if (CKEDITOR.instances[$attrs.id]) { 
        CKEDITOR.instances[$attrs.id].destroy(false); 
       } 
      }; 
     } 
    }; 
}]);