<!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. Java遍历文件夹下的所以文件

    利用Java递归遍历文件夹下的所以文件,然后对文件进行其他的操作.如:对文件进行重命名,对某一类文件进行重编码.可以对某一工程下的全部.java文件进行转码成utf-8等 代码如下,这里只对文件进行重 ...

  2. 动态规划：压缩编码；WirelessRouters；

    转载请注明~ 如果有理解不到位或错误的情况,劳烦大神指正,一定感激不尽! 题目来源:CCF201612-4 压缩编码 题目的意思是: 1. 顺序给定文字中n个单词出现的频率(次数): 2. 对这n个单 ...

  3. admin 的流程 Xadmin

    提交根评论 显示根评论 --- render显示 --- ajax显示 提交子评论 显示子评论 ---- render显示 ---- Ajax显示(扩展) 评论树 博客:富文本编辑器 beautful ...

  4. Informatica_(4)工作流

    三.workflow执行.监控 workflow是PowerCenter的执行单元: 一个workflow包括一个或者多个session(或task). 1.session session是mappi ...

  5. hisat2+stringtie+ballgown

    hisat2+stringtie+ballgown Posted on 2016年11月25日 早在去年九月,我就写个博文说 RNA-seq流程需要进化啦!http://www.bio-info-tr ...

  6. node.js 进程崩溃处理

    process.on('uncaughtException', (err) => { console.error('有错误'); });

  7. Linux vps服务器国产面板wdcp的安装和使用方法

    对于大多数站长来说,稳定的服务器不可或缺,这是我做网站以来的深刻体会,因为之前我在网站运营方面因这个原因吃了很多亏.在这里说出,只希望朋友们不要像我一样.在网站优化过程中,服务器因素导致排名下滑,甚至 ...

  8. NC 5的开发环境起不了客户端

    5的开发环境,中间件启动无异常,但是在起客户端时报错,连中间件也关闭了. 添加图中两个jdk下的包

  9. 客户端服务端web问题

    情况是这样: 我这边是C++socket/TCP服务器,然后有几万台客户端长连接我的服务器,这时,web端想对客户端进行参数设置,于是web端连到我的TCP服务器发来它想设置的客户端的ID和设置参数, ...

  10. linux和普通文本的换行问题

    情景一: 普通文本 vim操作换行   :%s#xxx#\n#g 情景二: linux环境换行 vim   :%s#xxx#\r#g