第一步，导入：
<script src="ngUeditor.js"></script>
第二步，引入Js文件
app.directive('ngUeditor', function () { return { restrict: 'AE', transclude: true, replace: true, template: '<script name="content" type="text/plain" ng-transclude @style></script>', require: '?ngModel', scope: { config: '=', style:'@' }, link: function (scope, element, attrs, ngModel) { var editor = new UE.ui.Editor(scope.config || {}); var _editorId = attrs.id ? attrs.id : "_editor" + (Date.now()); element[0].id = _editorId; editor.render(element[0]); editor.ready(function() { //图片上传回调 editor.addListener('beforeInsertImage', function (t, arg) { if(scope.config.imageUploadCallback){ scope.config.imageUploadCallback(arg); } }); //侦听文件上传，取上传文件列表中第一个上传的文件的路径 editor.addListener('afterUpfile', function (t, arg) { if(scope.config.fileUploadCallback){ scope.config.fileUploadCallback(arg); } }); if(scope.config.getEditor){ scope.config.getEditor(editor); } if (ngModel) { //Model数据更新时，更新百度UEditor ngModel.$render = function () { try { editor.setContent(ngModel.$viewValue); } catch (e) { } }; ngModel.$render(); //一开始加载渲染数据 //百度UEditor数据更新时，更新Model editor.addListener('contentChange', function () { setTimeout(function () { scope.$apply(function () { ngModel.$setViewValue(editor.getContent()); }) }, 0); }) } }); } } });第三步，调用ngUeditor
var 模块名 = angular.module('模块名'，['ngUeditor'，……]
第四步，使用<ng-ueditor>
<ng-ueditor id="descriptionContainer" class="ueditContainer" config="editorConfig" ng-model="notify.notification" style="width:800px;height:400px"> </ng-ueditor>
效果如下：
文章来源: Angular之编辑器插件