zoukankan      html  css  js  c++  java
  • 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);
            }
          }
        }
      })
  • 相关阅读:
    HashMap实现原理
    框架-Spring
    团队开发介绍
    返回一个环状整数数组中最大子数组之和
    软件工程学习体会
    书店促销
    寻找小水王
    梦断代码阅读笔记3
    找水王
    梦断代码阅读笔记2
  • 原文地址:https://www.cnblogs.com/ccblogs/p/5266473.html
Copyright © 2011-2022 走看看