AngularJS封装UEditor
<!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的更多相关文章
- angularjs封装bootstrap官网的时间插件datetimepicker
背景:angular与jquery类库的协作 第三方类库中,不得不提的是大名鼎鼎的jquery,现在基本上已经是国内web开发的必修工具了.它灵活的dom操作,让很多web开发人员欲罢不能.再加上已经 ...
- AngularJS封装webupload实现文件夹上传
百度的webupload没有开放api获取整个文件夹的信息.本文是二次开发webupload实现获取文件夹信息. 指令封装 /** * @license lx.ui.framework v1.0.0 ...
- angularjs 与 UEditor开发，添加directive，保证加载顺序正常
'use strict'; angular.module('app.core').directive('ueditor', [function () { return { restrict: 'A', ...
- Angularjs: 封装layDate指令
[摘要]由于业务需要,将bootstrap-datetimepicker改成了layDate. layDate是一个较成熟且便于操作的jQuery日期插件,支持同一个视图内范围选择.封装成一个指令在多 ...
- Echart的angularjs封装
ehcart是百度做的数据图表,基于原生js.接口和配置都写的很好很易读,还可以用于商用. 下面正题 用原生js的话,引入echarts.js 无论是图表的样式设置,图表渲染,数据填充都是基于echa ...
- AngularJS指令封装高德地图组件
1 概述 公司移动门户原来是基于AngularJS指令封装的百度地图组件,用于签到.签退.定位等功能,在使用过程中发现百度地图频繁的弹出广告,所以打算重新引用其它地图组件,最后决定基于AngularJ ...
- angularjs之filter过滤器
现在公司用ionic,就是基于angularjs封装了一些api用于webapp,最近用的angularjs的filter确实省了很多代码,现在总结一下! ng比较鸡肋的过滤器,这里就一笔带过吧!鸡汤 ...
- angularJs：双向数据绑定
示例1 <!DOCTYPE html> <html ng-app> <head> <meta charset="UTF-8" /> ...
- Angularjs 与Ckeditor
Angularjs 与Ckeditor Angularjs 诞生于Google是一款优秀的前端JS框架,已经被用于Google的多款产品当中.AngularJS有着诸多特性,最为核心的是:MVC.模块 ...
随机推荐
- Ajax中什么时候用同步，什么时候用异步？
AJAX中根据async的值不同分为同步(async = false)和异步(async = true)两种执行方式:在W3C的教程中推荐使用异步执行: $.ajax({ type: "po ...
- Tomcat登陆mysql的密码设置
在登陆mysql的密码和数据库密码不一致时,可以修改Mysql数据库密码或者修改连接Mysql的配置文件: 1.修改连接Tomcat里连接Mysql的配置文件 需要修改两个配置文件 ,一个是在tom ...
- jquery ajax 中实现给变量赋值
我们在用JQuery的Ajax从后台提取数据后想把它赋值给全局变量,但是却怎么都赋不进,为什么呢? 原因其实很简单,我们用的Ajax是异步操作,也就是说在你赋值的时候数据还没提取出来,你当然赋不进去, ...
- [z]分区truncate操作的介绍及对全局索引和空间释放影响的案例解析
[z]https://www.2cto.com/database/201301/181226.html 环境: [sql] [oracle@localhost ~]$ uname -r 2.6.18- ...
- Web API、WCF和Web Service的区别
[转载] Web Service 1.它是基于SOAP协议的,数据格式是XML 2.只支持HTTP协议 3.它不是开源的,但可以被任意一个了解XML的人使用 4.它只能部署在IIS上 WCF 1.这个 ...
- Android开发之自定义Toast(带详细注释)
因为工作需求,所以自己研究了自定义Toast,这里做出总结: 在此之前有一点需要提前说明:Toast与其他组件一样,都属于UI界面中的内容,因此在子线程中无法使用Toast弹出提示内容,如果强行在子线 ...
- IIS7.0上传在大小限制
修改 IIS7的上传文件大小限制的方法: 1.打开IIS管理器,并定位于想要修改限制的网站 2.双击右侧窗口中的asp图标 3.展开最下面那个“限制属性”,将最下面的“最大请求实体主体限制”右边属性框 ...
- 八皇后问题（dfs)
#include <iostream> #include <stdio.h> using namespace std; ; ], b[], c[], vis[][]; //a, ...
- 网页启用Gzip压缩 提高浏览速度
启用Gzip压缩的好处 它的好处显而易见,提高网页浏览速度,无论是之前说的精简代码.压缩图片都不如启用Gzip来的实在.下图为启用Gzip后的效果. Gzip压缩效率非常高,通常可以达到70%的压缩率 ...
- Codeforces 757B. Bash's Big Day GCD
B. Bash's Big Day time limit per test:2 seconds memory limit per test:512 megabytes input:standard i ...