AngularJS封装UEditor
程序员文章站
2022-06-12 10:53:40
...
<!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8"> <title>ueditor</title> <style type="text/css"> button { border-radius: 2px; background: #0B70B1; color: #FFF; border: 1px solid #0B70B1 } </style> </head> <body ng-app="ueditorApp" ng-controller="uCtrl"> <div> <!-- 加载编辑器的容器 --> <!-- <div id="container"></div> --> </div> <zueditor id="container"></zueditor> <zueditorsimple id="container1"></zueditorsimple> <button ng-click="save()">提交</button> </body> <script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script> <script src="https://cdn.bootcss.com/angular.js/1.5.0-beta.0/angular-sanitize.min.js"></script> <!-- 配置文件 --> <script type="text/javascript" src="../plugins/UEditor/ueditor.config.js"></script> <!-- 编辑器源码文件 --> <script type="text/javascript" src="../plugins/UEditor/ueditor.all.min.js"></script> <!-- 手动加载语言 --> <script type="text/javascript" charset="UTF-8" src="../plugins/UEditor/lang/zh-cn/zh-cn.js"></script> <script type="text/javascript"> //上传编辑器内容 var app = angular.module("ueditorApp", [ 'ngSanitize' ]); //在线编辑版 app.directive('zueditor', function() { var option = { restrict : 'E', require : '?ngModel', replace : true, template : '<div></div>', scope : true, link : function($scope, $element, $attrs, ngModel) { var id = $attrs.id; var ue = UE.getEditor(id, { toolbars : [ [ 'bold', 'italic', 'underline', 'fontsize', 'forecolor', 'justifyleft', 'justifycenter', 'justifyright', 'simpleupload', 'insertimage', 'attachment', 'removeformat', 'fullscreen' ] ], autoHeightEnabled : true, autoFloatEnabled : true }); ue.addListener("contentChange", function() { //发送文本到 $scope.$emit('sendtext', ue.getContent()); }); } }; return option; }); //简版 app.directive('zueditorsimple', function() { var option = { restrict : 'E', replace : true, template : '<div></div>', scope : true, link : function($scope, $element, $attrs) { var id = $attrs.id; var ue = UE.getEditor(id, { toolbars : [ [ 'bold', 'italic', 'underline', 'fontsize', 'forecolor', 'justifyleft', 'justifycenter', 'justifyright', 'removeformat', 'fullscreen' ] ], autoHeightEnabled : true, autoFloatEnabled : true }); ue.addListener("contentChange", function() { $scope.$emit('sendtext', ue.getContentTxt()); }); } }; return option; }); app.controller("uCtrl", function($scope, $http) { $scope.editor = ""; $scope.content = ""; $scope.$on("sendParent", function(event, data) { $scope.content = data; }); $scope.save = function() { alert($scope.content); }; });