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

		};

	});

AngularJS封装UEditor的更多相关文章

  1. angularjs封装bootstrap官网的时间插件datetimepicker

    背景:angular与jquery类库的协作 第三方类库中,不得不提的是大名鼎鼎的jquery,现在基本上已经是国内web开发的必修工具了.它灵活的dom操作,让很多web开发人员欲罢不能.再加上已经 ...

  2. AngularJS封装webupload实现文件夹上传

    百度的webupload没有开放api获取整个文件夹的信息.本文是二次开发webupload实现获取文件夹信息. 指令封装 /** * @license lx.ui.framework v1.0.0 ...

  3. angularjs 与 UEditor开发，添加directive，保证加载顺序正常

    'use strict'; angular.module('app.core').directive('ueditor', [function () { return { restrict: 'A', ...

  4. Angularjs: 封装layDate指令

    [摘要]由于业务需要,将bootstrap-datetimepicker改成了layDate. layDate是一个较成熟且便于操作的jQuery日期插件,支持同一个视图内范围选择.封装成一个指令在多 ...

  5. Echart的angularjs封装

    ehcart是百度做的数据图表,基于原生js.接口和配置都写的很好很易读,还可以用于商用. 下面正题 用原生js的话,引入echarts.js 无论是图表的样式设置,图表渲染,数据填充都是基于echa ...

  6. AngularJS指令封装高德地图组件

    1 概述 公司移动门户原来是基于AngularJS指令封装的百度地图组件,用于签到.签退.定位等功能,在使用过程中发现百度地图频繁的弹出广告,所以打算重新引用其它地图组件,最后决定基于AngularJ ...

  7. angularjs之filter过滤器

    现在公司用ionic,就是基于angularjs封装了一些api用于webapp,最近用的angularjs的filter确实省了很多代码,现在总结一下! ng比较鸡肋的过滤器,这里就一笔带过吧!鸡汤 ...

  8. angularJs：双向数据绑定

    示例1 <!DOCTYPE html> <html ng-app> <head> <meta charset="UTF-8" /> ...

  9. Angularjs 与Ckeditor

    Angularjs 与Ckeditor Angularjs 诞生于Google是一款优秀的前端JS框架,已经被用于Google的多款产品当中.AngularJS有着诸多特性,最为核心的是:MVC.模块 ...

随机推荐

  1. JD_M案例知识点（移动端）

    # JD_M案例知识点 基础布局+顶部通栏+顶部轮播图+导航栏 知识点 base.css ::before,::after 伪元素 统一设置文字 sans-serif 移动端 的默认字体 font-f ...

  2. （IOS可自动播放）使用bxslider做了一个切换图片跟随播放MP3的功能

    代码: <!DOCTYPE html> <html lang="zh-Hans"> <head> <meta charset=" ...

  3. [z]c++ 和 java 利用protobuf 通讯

    [z]http://andinker.iteye.com/blog/1979428  java端的具体步骤如下: 1.首先下载 下载protobuf 编译工具   http://code.google ...

  4. 获取URL某个参数

    /* 获取URL某个参数(可以是中文) * 返回:字符串 */ function getUrlParam(key) { // 获取参数 var url = window.location.search ...

  5. mysql SQL 逻辑查询语句和执行顺序

    关键字的执行优先级(重点) fromwheregroup byhavingselectdistinctorder bylimit 先创建两个表 CREATE TABLE table1 ( custom ...

  6. BOM浏览器对象模型；

    1.window.open(url,ways) url是打开的网页地址 ways是打开方式(-blank:-self) 2.window.close()关闭窗口 3.浏览器的用户信息 window.n ...

  7. DevExpress之TreeList节点绑定图片

    最近在项目中使用到了DX中的TreeList控件绑定数据源时在每个节点前显示特点的图片:查阅相关资料实现方法如下:1.首先打开VS2010新建一个WINFROM应用程序: 2.在WINFROM应用程序 ...

  8. PAT 1085 PAT单位排行（25）（映射、集合训练）

    1085 PAT单位排行(25 分) 每次 PAT 考试结束后,考试中心都会发布一个考生单位排行榜.本题就请你实现这个功能. 输入格式: 输入第一行给出一个正整数 N(≤10​5​​),即考生人数.随 ...

  9. 在IP网络中，P、PE、CE代表意思

    1.ce , pe属于mpls vpn里的概念.VPN概念中,把整个网络中的路由器分为三类:用户边缘路由器(CE).运营商边缘路由器(PE)和运营商骨干路由器(P):其中,PE充当IP VPN接入路由 ...

  10. fedora25的免密码rsync服务配置

      目标:实现免密同步数据: 1.安装rsync包: 2.手工添加配置文件: cat  /etc/rsyncd.conf # See rsyncd.conf man page for more opt ...