<!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. DOS下的安全空间

    我们需要直接向一段内存中写入内容: 这段内存空间不应存放系统或其他程序的数据或代码,否则写入操作很可能引发错误: DOS方式下,一般情况,0:200~0:2ff空间中没有系统或其他程序的数据或代码; ...

  2. php使用pthreads v3多线程的抓取新浪新闻信息

    我们使用pthreads,来写一个多线程的抓取页面小程序,把结果存到数据库里. 数据表结构如下: CREATE TABLE `tb_sina` ( `id` int(11) unsigned NOT ...

  3. Django TypeError: isinstance() arg 2 must be a type or tuple of types

    报错: TypeError: isinstance() arg must be a type or tuple of types from django.db import modelsfrom dj ...

  4. HTML DOM 事件对象

    HTML DOM 事件对象 由 youj 创建,小路依依 最后一次修改 2016-08-04 HTML DOM 事件 HTML DOM 事件 HTML DOM 事件允许Javascript在HTML文 ...

  5. python time 和 datetime 模块

    时间戳(timestamp):通常来说,时间戳表示的是从1970年1月1日00:00:00开始按秒计算的偏移量.我们运行“type(time.time())”,返回的是float类型. 格式化的时间字 ...

  6. mysql-5.7.19免安装版的配置方法

    1. 下载MySQL Community Server 5.6.13 2. 解压MySQL压缩包     将以下载的MySQL压缩包解压到自定义目录下,我的解压目录是:     "D:\Pr ...

  7. PAT 1036 跟奥巴马一起编程(15)（代码）

    1036 跟奥巴马一起编程(15)(15 分) 美国总统奥巴马不仅呼吁所有人都学习编程,甚至以身作则编写代码,成为美国历史上首位编写计算机代码的总统.2014年底,为庆祝"计算机科学教育周& ...

  8. phpstorm的安装和使用

    1下载phpstorm #下载地址 https://www.jetbrains.com/phpstorm/ 2激活并安装 create associations 表示的是以后编辑选择的文件也默认用id ...

  9. fedora 使用

    我们在这篇指南中将介绍安装Fedora 23工作站版本后要完成的一些实用操作,以便用起来更爽. 1.更新Fedora 23程序包 哪怕你可能刚刚安装/升级了Fedora 23,仍很可能会有需要更新的程 ...

  10. PyTorch 1.0 发布，JIT、全新的分布式库、C++ 前端

    Python 张量与动态神经网络 PyTorch 1.0 发布了. 此版本的主要亮点包括 JIT 编译.全新并且更快的分布式库与 C++ 前端等. JIT 编译器 JIT(Just-In-Time)是 ...