<!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. 关于map::erase的使用说明

    C++ 中经常使用的容器类有vector,list,map.其中vector和list的erase都是返回迭代器,但是map就比较不一样. 当在循环体中使用map::erase语句时,为了能够在任何机 ...

  2. 使用JFinal实现使用MVC获取表单中的数据并将提示信息返回给另一jsp页面。

    1.包结构 2.我们需要对web.xml进行配置: <?xml version="1.0" encoding="UTF-8"?> <web-a ...

  3. zh-cn 与 zh-hans 是什么关系、有什么区别

    回答一: 作者:知乎用户 链接:https://www.zhihu.com/question/21980689/answer/19923726 来源:知乎 著作权归作者所有.商业转载请联系作者获得授权 ...

  4. 10.19JS日记

    1.函数   关键词(function) var是js的关键字,用于声明变量,声明在内存模块完成,定义(=)是在执行模块完成 var可以在内存模块提前完成(js代码执行前),所以有变量提升这个功能 c ...

  5. 三种简单排序算法（java实现）

    一.冒泡排序 算法思想:遍历待排序的数组,每次遍历比较相邻的两个元素,如果他们的排列顺序错误就交换他们的位置,经过一趟排序后,最大的元素会浮置数组的末端.重复操                   作 ...

  6. 小明A+B

    /* 小明今年3岁了, 现在他已经能够认识100以内的非负整数, 并且能够进行100以内的非负整数的加法计算. 对于大于等于100的整数, 小明仅保留该数的最后两位进行计算, 如果计算结果大于等于10 ...

  7. oracle表或视图不存在和标识符无效的问题解决

    通过dbvisualizer修改表的名字时,一定要改成大写,否则会报错,数据库中没有该表的错误. 如果新的表名为小写,不行! select的时候,可以用小写名. 标识符无效解决:字段名默认都是大写的, ...

  8. BZOJ4033或洛谷3177 [HAOI2015]树上染色

    BZOJ原题链接 洛谷原题链接 很明显的树形\(DP\). 因为记录每个点的贡献很难,所以我们可以统计每条边的贡献. 对于每一条边,设边一侧的黑点有\(B_x\)个,白点有\(W_x\),另一侧黑点有 ...

  9. Luogu2022 有趣的数-二分答案+数位DP

    Solution 我好像写了一个非常有趣的解法233, 我们可以用数位$DP$ 算出比$N$小的数中 字典序比 $X$ 小的数有多少个, 再和 $rank$进行比较. 由于具有单调性, 显然可以二分答 ...

  10. java性能优化之for循环

    完成同样的功能,用不同的代码来实现,性能上可能会有比较大的差别,所以对于一些性能敏感的模块来说,对代码进行一定的优化还是很有必要的.今天就来说一下java代码优化的事情,今天主要聊一下对于for(wh ...