为Angular-UEditor增加工具栏属性

感谢胡大大分享的的开源项目

Angular 的 UEditor 插件 Angular-UEditor

本文只是修改了angular-ueditor.js，加入了对工具栏的定制，方便项目使用

  1 (function() {
  2   "use strict";
  3   (function() {
  4     var NGUeditor;
  5     NGUeditor = angular.module("ng.ueditor", []);
  6     NGUeditor.directive("ueditor", [
  7       function() {
  8         return {
  9           restrict: "C",
 10           require: "ngModel",
 11           scope: {
 12             config: "=",
 13             ready: "="
 14           },
 15           link: function($S, element, attr, ctrl) {
 16             var _NGUeditor, _updateByRender;
 17             _updateByRender = false;
 18             _NGUeditor = (function() {
 19               function _NGUeditor() {
 20                 this.bindRender();
 21                 this.initEditor();
 22                 return;
 23               }
 24
 25
 26               /**
 27                * 初始化编辑器
 28                * @return {[type]} [description]
 29                */
 30
 31               _NGUeditor.prototype.initEditor = function() {
 32                 var _UEConfig, _editorId, _self;
 33                 _self = this;
 34                 if (typeof UE === 'undefined') {
 35                   console.error("Please import the local resources of ueditor!");
 36                   return;
 37                 }
 38                 _UEConfig = $S.config ? $S.config : {};
 39                 _UEConfig.initialFrameHeight = 160;
 40                 if (attr.toolbars === 'basic') {
 41                     _UEConfig.toolbars = basic;
 42                 } else if (attr.toolbars === 'full')
 43                 {
 44                     _UEConfig.toolbars = full;
 45                 }
 46                 _editorId = attr.id ? attr.id : "_editor" + (Date.now());
 47                 element[0].id = _editorId;
 48                 this.editor = new UE.getEditor(_editorId, _UEConfig);
 49                 return this.editor.ready(function() {
 50                   _self.editorReady = true;
 51                   _self.editor.addListener("contentChange", function() {
 52                     ctrl.$setViewValue(_self.editor.getContent());
 53                     if (!_updateByRender) {
 54                       if (!$S.$$phase) {
 55                         $S.$apply();
 56                       }
 57                     }
 58                     _updateByRender = false;
 59                   });
 60                   if (_self.modelContent.length > 0) {
 61                     _self.setEditorContent();
 62                   }
 63                   if (typeof $S.ready === "function") {
 64                     $S.ready(_self.editor);
 65                   }
 66                   $S.$on("$destroy", function() {
 67                     var _ref;
 68                     if ((_ref = _self.editor && _self.editor.destory) != null) {
 69                       _ref.destory();
 70                     }
 71                   });
 72                 });
 73               };
 74
 75               _NGUeditor.prototype.setEditorContent = function(content) {
 76                 if (content == null) {
 77                   content = this.modelContent;
 78                 }
 79                 if (this.editor && this.editorReady) {
 80                   this.editor.setContent(content);
 81                 }
 82               };
 83
 84               _NGUeditor.prototype.bindRender = function() {
 85                 var _self;
 86                 _self = this;
 87                 ctrl.$render = function() {
 88                   _self.modelContent = (ctrl.$isEmpty(ctrl.$viewValue) ? "" : ctrl.$viewValue);
 89                   _updateByRender = true;
 90                   _self.setEditorContent();
 91                 };
 92               };
 93
 94               return _NGUeditor;
 95
 96             })();
 97             new _NGUeditor();
 98           }
 99         };
100       }
101     ]);
102     var basic = [
103         [
104         'source', //源代码
105         'undo', //撤销
106         'redo', //重做
107         'bold', //加粗
108         'italic', //斜体
109         'underline', //下划线
110         'link', //超链接
111         'unlink', //取消链接
112         'fontfamily', //字体
113         'fontsize', //字号
114         'justifyleft', //居左对齐
115         'justifyright', //居右对齐
116         'justifycenter', //居中对齐
117         'justifyjustify', //两端对齐
118         'forecolor', //字体颜色
119         'insertorderedlist', //有序列表
120         'insertunorderedlist', //无序列表
121         'fullscreen', //全屏
122         ]
123     ];
124     var full = [[
125             'fullscreen', 'source', '|', 'undo', 'redo', '|',
126             'bold', 'italic', 'underline', 'fontborder', 'strikethrough', 'superscript', 'subscript', 'removeformat', 'formatmatch', 'autotypeset', 'blockquote', 'pasteplain', '|', 'forecolor', 'backcolor', 'insertorderedlist', 'insertunorderedlist', 'selectall', 'cleardoc', '|',
127             'rowspacingtop', 'rowspacingbottom', 'lineheight', '|',
128             'customstyle', 'paragraph', 'fontfamily', 'fontsize', '|',
129             'directionalityltr', 'directionalityrtl', 'indent', '|',
130             'justifyleft', 'justifycenter', 'justifyright', 'justifyjustify', '|', 'touppercase', 'tolowercase', '|',
131             'link', 'unlink', 'anchor', '|', 'imagenone', 'imageleft', 'imageright', 'imagecenter', '|',
132             'simpleupload', 'insertimage', 'emotion', 'scrawl', 'insertvideo', 'music', 'attachment', 'map', 'gmap', 'insertframe', 'insertcode', 'webapp', 'pagebreak', 'template', 'background', '|',
133             'horizontal', 'date', 'time', 'spechars', 'snapscreen', 'wordimage', '|',
134             'inserttable', 'deletetable', 'insertparagraphbeforetable', 'insertrow', 'deleterow', 'insertcol', 'deletecol', 'mergecells', 'mergeright', 'mergedown', 'splittocells', 'splittorows', 'splittocols', 'charts', '|',
135             'print', 'preview', 'searchreplace', 'help', 'drafts'
136     ]];
137   })();
138
139 }).call(this);

1 angular.module('app', ['ui.router', 'ng.ueditor']);

1 <div style="margin-bottom:1.25rem;width:100%;" class="ueditor" toolbars="basic" ng-model="Agreement"></div>