`

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);
		};
	});
1
0
分享到:
评论

相关推荐

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

    【标题】"管理系统系列--新闻管理系统(ssm、angularjs、UEditor)" 提供了一个综合性的IT知识框架,涉及了Web开发中的多个核心技术。这个新闻管理系统是基于SSM(Spring、SpringMVC、MyBatis)架构,同时采用了...

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

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

    UEditor的asp.net封装控件

    这个"UEditor的asp.net封装控件"就是这样一个工具,它简化了UEditor在.NET环境下的集成过程,让开发者可以更便捷地在ASP.NET应用中使用UEditor的功能。 UEditor控件的核心特性包括: 1. **富文本编辑**:UEditor...

    UEditor:封装ueditor,支持微信编辑器图文编辑。。

    UEditor 封装ueditor,支持微信编辑器图文编辑。。。 screenshot

    vueUeditor:vue 封装ueditor为组件

    将 UEditor 封装为 Vue 组件可以使得在 Vue 项目中使用 UEditor 更加方便,符合 Vue 的组件化思想,提高代码复用性和可维护性。 首先,要在 Vue 项目中使用 Vue Ueditor,你需要确保已经安装了 Vue 和 UEditor。Vue...

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

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

    UEditorNet v1.0.1

    UEditorNet是UEditor的Asp.net的版本,针对.net平台对UEditor进行相应的配置,并使用c#语言对UEditor进行了简单的封装。使asp.net的开发人员能够很方便的进行使用。上传图片、上传文件都已配置能正常使用,并且上传...

    ueditor.all.js 百度富文本编辑器ueditor配合angularjs的使用 内附源码 及使用方法说明

    《ueditor.all.js与AngularJS集成使用指南及源码解析》 在Web开发中,富文本编辑器扮演着至关重要的角色,它使得用户能够方便地创建和编辑具有格式化的文本内容。百度的ueditor.all.js是一款功能强大的富文本编辑器...

    angular-ueditor修改版

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

    ueditor-1.1.2_ueditor-1.1.2_ueditor_ueditor:jar:1.1.2_ueditor-1.

    《UEditor 1.1.2:Java版的富文本编辑器详解》 UEditor,一个广受欢迎的在线富文本编辑器,以其强大的功能和易用性在Web开发领域占据了重要地位。其Java版本——ueditor-1.1.2,为Java开发者提供了一个便捷的工具,...

    ueditor-1.1.2/ueditor-1.1.3

    《UEditor:一款高效便捷的在线富文本编辑器》 UEditor是一款由百度公司开发的开源在线富文本编辑器,其版本号从1.1.2到1.1.3的迭代,见证了这款编辑器在功能优化和用户体验上的不断提升。在IT领域,UEditor因其...

    React中使用UEditor百度富文本的方法

    本文将详细介绍如何在React应用中引入并封装UEditor,以及解决在使用过程中可能遇到的问题。 首先,你需要从UEditor的官方网站下载最新版本的安装包,包含必要的配置文件和源码文件。这些文件通常包括`ueditor....

    vue-ueditor-wrap UEditor资源包

    Vue-UEditor-Wrap不仅提供了对UEditor的基本封装,还考虑了与Vue生态的兼容性,如响应式、组件通信等,大大简化了开发过程。 至于标签中提到的`vue.js`、`前端`、`javascript`和`ecmascript`,它们都是前端开发的...

    Vue2.0中集成UEditor富文本编辑器的方法

    在其他页面中使用该组件时,我们可以简单地创建一个需要UEditor的页面,并在该页面中使用刚才封装好的UE.vue组件。我们可以传递编辑器的配置参数和文字内容作为 Props,並在点击按钮时获取编辑器的内容。 Vue2.0中...

    Ueditor for Thinkphp3.2

    **Ueditor for Thinkphp3.2** 是一个集成百度Ueditor编辑器的Thinkphp3.2框架下的插件。这个插件使得在Thinkphp3.2的项目中,开发者能够轻松地引入强大的富文本编辑功能,为用户提供一个美观且功能丰富的在线文本...

Global site tag (gtag.js) - Google Analytics