AngularJS封装UEditor

最新推荐文章于 2021-09-10 09:40:05 发布

柳絮飞祭奠

最新推荐文章于 2021-09-10 09:40:05 发布

阅读量143

点赞数

分类专栏： AngularJS 文章标签： AngularJs UEditor

AngularJS 专栏收录该内容

23 篇文章 0 订阅

订阅专栏

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

柳絮飞祭奠

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
AngularJS封装UEditor

[code="java"]ueditorbutton { border-radius: 2px; background: #0B70B1; color: #FFF; border: 1px solid #0B70B1} 提交 //上传编辑器内容 var...
复制链接

扫一扫

专栏目录