AngularJS|Angular之编辑器插件 AngularJS|插件

文章图片

想插入一个编辑器在页面上么？如上图所示，还可以转html哦~是不是很酷？在自己的页面上加上这么一个编辑器，瞬间变身高大上有木有？只需简单的几步，满足你的需求！！
第一步，导入：

第二步，引入Js文件

app.directive('ngUeditor', function () { return { restrict: 'AE', transclude: true, replace: true, template: '', 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'，……]
第四步，使用

效果如下：