感谢胡大大分享的的开源项目
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>