Angularjs中添加ckEditor插件

  使用方法看注释。主要解决帮上ngModel的问题

angular.module('newApp')
  .directive('ckeEditor', function() {
    return {
      /*
        For Example:
        <textarea id="..." name="..." class="form-control" cke-editor
        rows="10" cols="80" ng-model="..."></textarea>
      */
      restrict: 'A',
      require: '?ngModel',
      link: function(scope, element, attrs, ngModel) {
        var ckeditor = CKEDITOR.replace(element[0], {
          toolbar :[
            ['Cut', 'Copy', 'Paste', 'PasteText', 'PasteFromWord', '-', 'Undo', 'Redo'],
            ['Link','Unlink','Anchor'],
            ['Image', 'Table', 'HorizontalRule', 'SpecialChar'],
            ['Source'],
            ['Bold', 'Italic', 'Strike','-', 'RemoveFormat'],
            ['NumberedList', 'BulletedList', '-', 'Outdent', 'Indent', '-', 'Blockquote'],
            ['Format'],
            ['Styles']
          ]
        });
        ckeditor.on('instanceReady', function() {
          ckeditor.setData(ngModel.$viewValue);
        });
        ckeditor.on('pasteState', function() {
          scope.$apply(function() {
            ngModel.$setViewValue(ckeditor.getData());
          });
        });
        ngModel.$render = function(value) {
          ckeditor.setData(ngModel.$viewValue);
        }
      }
    }
  })
原文地址:https://www.cnblogs.com/ccblogs/p/5266473.html