Angularjs编写KindEditor,UEidtor,jQuery指令

AngularJS 1.x版本提供了一种称为指令的机制，让开发者可以扩展HTML元素的功能，这个特殊的标记通常用来创建可重用的组件。

本篇攻略将带你从头到尾学习如何编写三种非常流行的富文本编辑器指令：KindEditor，UEditor和jQuery。

准备工作

在开始之前，我们需要做一些准备工作：

1. 确保你已经安装了AngularJS 1.x版本。
2. 下载并解压缩所需编辑器插件包，KindEditor、UEditor或jQuery。
3. 创建一个新的 AngularJS 应用程序。

编写KindEditor指令

1. 在 HTML 页面中添加 KindEditor 插件

使用下面的代码引入 KindEditor 源文件：

<script src="kindeditor.min.js" type="text/javascript" charset="utf-8"></script>
<link rel="stylesheet" href="skins/default.css" type="text/css" media="all">

2. 创建指令

在 AngularJS 应用程序中创建一个指令，如下所示：

app.directive('kindEditor', function() {
  return {
    restrict: 'A',
    require: '?ngModel',
    link: function(scope, element, attrs, ngModel) {
      var editor = KindEditor.create(element[0], {
        resizeType : 1,
        allowPreviewEmoticons : false,
        allowImageUpload : true,
        allowFileManager : true,
        uploadJson : '../php/upload_json.php',
        fileManagerJson : '../php/file_manager_json.php',
        allowFileManager : true,
        afterBlur: function() {
            ngModel.$setViewValue(editor.html());
        }
      });

      ngModel.$render = function() {
        editor.html(ngModel.$viewValue);
      };
    }
  };
});

上述代码中，我们在 app 中创建了一个指令，并将其命名为 "kindEditor"。该指令使用了 restrict 属性来指定该指令是一个属性指令。我们将其指令绑定到一个文本框上。

3. 将指令添加到 HTML 元素

<textarea kind-editor ng-model="content" name="content"></textarea>

在上述代码中，“ng-model”属性指定了我们的 model 值，即对应控制器中的"content"变量。

编写UEditor指令

1. 在 HTML 页面中添加 UEeditir 插件

使用下面的代码引入 UEeditor 源文件：

<script type="text/javascript" src="ueditor.config.js"></script>
<script type="text/javascript" src="ueditor.all.js"></script>
<link rel="stylesheet" type="text/css" href="ueditor.css"/>

2. 创建指令

在 AngularJS 应用程序中创建一个指令，如下所示：

app.directive('ueditor', function() {
  return {
    restrict: 'A',
    require: '?ngModel',
    link: function(scope, element, attrs, controller) {
      var editor = UE.getEditor(element[0].id, {
        toolbars: [[
        'fullscreen', 'source', '|', 'undo', 'redo', '|',
        'bold', 'italic', 'underline', 'fontborder', 'strikethrough', 'superscript',
        'subscript', 'removeformat', 'formatmatch', 'autotypeset', 'blockquote',
        'pasteplain', '|', 'forecolor', 'backcolor', 'insertorderedlist',
        'insertunorderedlist', 'selectall', 'cleardoc', '|',
        'rowspacingtop', 'rowspacingbottom', 'lineheight', '|',
        'customstyle', 'paragraph', 'fontfamily', 'fontsize', '|',
        'directionalityltr', 'directionalityrtl', 'indent', '|',
        'justifyleft', 'justifycenter', 'justifyright', 'justifyjustify', '|', 'touppercase', 'tolowercase',
        '|', 'link', 'unlink', 'anchor', '|', 'imagenone', 'imageleft', 'imageright', 'imagecenter', '|',
        'insertimage', 'scrawl', 'insertvideo', 'music', 'attachment', 'map', 'gmap', 'insertframe', 'insertcode', 'webapp', 'pagebreak', 'template', 'background', '|',
        'horizontal', 'date', 'time', 'spechars', 'snapscreen', 'wordimage', '|',
        'print', 'preview', 'searchreplace', 'help'
        ]],
        autoHeightEnabled: false,
        wordCount: false,
        initialFrameHeight: 200
      });

      editor.ready(function() {
        editor.setContent(controller.$viewValue);
        editor.addListener('contentChange', function() {
          scope.$apply(function() {
            controller.$setViewValue(editor.getContent());
          });
        });
      });
    }
  };
});

上述代码中，我们在 app 中创建了一个指令，并将其命名为 "ueditor"，该指令使用了 restrict 属性来指定该指令是一个属性指令。

3. 将指令添加到 HTML 元素

<script id="textarea" type="text/plain" ueditor ng-model="content"></script>

在上述代码中，“ng-model”属性指定了我们的 model 值，即对应控制器中的"content"变量。

编写jQuery指令

1. 在 HTML 页面中添加 jQuery 插件

使用下面代码引入 jQuery 插件文件：

<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<script src="http://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="http://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<script src="/js/bootstrap-wysiwyg.js"></script>

2. 创建指令

在 AngularJS 应用程序中创建一个指令，如下所示：

app.directive('jqueryWysiwyg', function() {
  return {
    restrict: 'A',
    require: '?ngModel',
    link: function($scope, element, attrs, ngModel) {
      $(document).ready(function() {
        $scope.$apply(function() {
          $scope.editor = element.html();
        });

        element.wysiwyg({ 
          events:{
            keyup: function() {
              $scope.$apply(function() {
                ngModel.$setViewValue(element.html());
              });
            },
            focus: function() {
              angular.element(this).closest('.wysiwyg').addClass('active');
            },
            blur: function() {
              angular.element(this).closest('.wysiwyg').removeClass('active');
            }
          }
        });
      });
    }
  };
});

上述代码中，我们在 app 中创建了一个指令，并将其命名为 "jqueryWysiwyg"，该指令使用了 restrict 属性来指定该指令是一个属性指令。

3. 将指令添加到 HTML 元素

<div contentEditable jquery-wysiwyg ng-model="content"></div>

在上述代码中，“contentEditable”属性告诉浏览器该 div 可以被编辑，“ng-model”属性指定了我们的 model 值，即对应控制器中的"content"变量。

至此，我们已经成功地创建了三种富文本编辑器指令，并可以在任意 AngularJS 项目中重复使用。