`

AngularJS封装UEditor

AngularJsUEditor 
阅读更多 
<!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);
		};
	});
1
顶
0
踩
分享到：
| 通过sftp操作Linux服务器上的文件(java)
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    新闻管理系统(ssm、angularjs、UEditor).zip

    面向对象： Java是一种纯粹的面向对象编程语言，支持封装、继承和多态等面向对象的概念。这使得Java编写的代码更加模块化、可维护和可扩展。 多线程支持： Java内置了对多线程的支持，允许程序同时执行多个任务。这...

    AngularJs定制样式插入到ueditor中的问题小结

    这时候，需要通过AngularJs的指令来重新封装交互逻辑。例如，在`ueditor`中加入`ng-click`等AngularJs指令，以实现功能的正常使用。 6. **ueditor实例的创建与使用**：在项目中使用ueditor，通常需要引入相关的...

    angular-ueditor修改版

    Angular-UEditor是一款基于AngularJS框架的富文本编辑器组件，它是对原生UEditor的封装，旨在为Angular应用提供便捷的富文本编辑功能。UEditor是一款广泛使用的JavaScript富文本编辑器，而Angular-UEditor则是将其与...

    Angularjs编写KindEditor,UEidtor,jQuery指令

    AngularJS的核心概念之一就是指令（Directives），指令允许开发者扩展HTML的语法，并封装为可复用的组件。这种自定义HTML标签或属性的能力极大地提高了开发效率，并且使得代码结构更加清晰。接下来，我们将深入探讨...

Magicbox
Global site tag (gtag.js) - Google Analytics