AngularJS封装UEditor

柳絮飞祭奠

浏览: 162820 次
性别:
来自: 重庆

最近访客更多访客>>

xx5333

henxingliwang

lxin410

horsehome

博主相关

博客

微博

相册

留言

关于我

博客专栏

: Angularjs实战
浏览量：19246

文章分类

社区版块

存档分类

博客分类：

AngularJS

AngularJs UEditor

<!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);
		};
	});

UEditor.zip (1.7 MB)
下载次数: 2

1
顶

0
踩

分享到：

巧用 Jersey RESTful WebService框架解决文 ... | 通过sftp操作Linux服务器上的文件(java)

2018-01-09 18:35
浏览 905
评论(0)
分类:Web前端
查看更多

发表评论

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

最近访客更多访客>>

博主相关

博客专栏

文章分类

社区版块

存档分类

最新评论

AngularJS封装UEditor

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

博客专栏

文章分类

社区版块

存档分类

最新评论

AngularJS封装UEditor

评论

发表评论

相关推荐

Angularjs自定义指令计算浏览器高度

AngularJS封装webupload实现文件夹上传

巧用 Jersey RESTful WebService框架解决文件上传乱码

Angularjs的directive封装ztree

AngularJS实战之cookie的读取

AngularJS中$interval和$timeout的使用

AngularJS实战之ngAnimate插件实现轮播

基于Angular-animate.js和css实现的轮播图

AngularJS实战之Controller之间的通信

AngularJS监听数组变化

AngularJS的$location基本用法和注意事项

AngularJS 无限滚动加载数据控件 ngInfiniteScroll

AngularJS实战之ng-repeat的详细用法

ng-show和ng-if的区别和使用场景

[置顶] AngularJS实战之路由ui-sref-active使用

AngularJS实战之路由ui-view传参

AngularJS实战之filter的使用二

AngularJS实战之filter的使用一

AngularJS实战之路由ui-view

AngularJs ng-repeat用法二$parent.$index

最近访客更多访客>>