<!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. Mysql在Linux的基本操作文档

    总结了Mysql在Linux下的应用,以下是Linux操作系统操作MySQL常用命令小结,需要的朋友参考下: 1.Mysql服务 # chkconfig --list 列出所有系统服务 # chkco ...

  2. IE6、7下overflow:hidden失效的问题

    问题产生原因: 当父元素的直接子元素或者下级子元素的样式拥有position:relative或者position:absolute属性时,父元素的overflow:hidden属性就会失效. 例如: ...

  3. JS打开新窗口，子窗口操作父窗口

    <!--父窗口弹窗代码开始--> <script type="text/javascript"> function OpenWindow() { windo ...

  4. Windows Server 2008 MetaFile设置占用内存限制

    最近遇到Windows Server 2008服务器内存持续飙升,48G内存用了99%,查看任务管理器的进程,也没发现具体哪个进程用的内存比较大? 于是,在网上找了了一个查看内存的工具RamMap,具 ...

  5. Charles基本使用

    Charles使用 查找电脑IP,菜单选项helpàLocal IP Addresses 手机连接代理 手机打开WiFi,把代理模式设置为手动,设置主机名为Charles所在机器的ip,端口号为Cha ...

  6. css 边距等常用设置

    前端知识 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF- ...

  7. Oracle_PL/SQL(1) 匿名块

    1. PL/SQL 简介PL/SQL是一种比较复杂的程序设计语言, 用于从各种环境中访问Oracle数据库.为什么使用PL/SQL?Orade是一种关系型数据库, 用来访问关系型数据库的语言是 “结构 ...

  8. js generator

    generator(生成器)是ES6标准引入的新的数据类型.一个generator看上去像一个函数,但可以返回多次. generator跟函数很像,定义如下: function* foo(x) { y ...

  9. 虚拟机vmware centos7 扩展磁盘空间

    0.思路 创建一个新的逻辑分区,将新的逻辑分区格式化ext3(或其他类型)的文件系统,mount到磁盘空间不够的文件系统,就跟原来的分区/文件系统一样的使用 1.准备 1.1 注意使用VMware自带 ...

  10. android--Activity有返回值的跳转

    AndroidManifest.xml <?xml version="1.0" encoding="utf-8"?> <manifest xm ...