Angular 的 UEditor 插件 Angular-UEditor

MIT
JavaScript
跨平台
2014-09-22
胡晋

Angualr 作为最近前端大热的一款框架,越来越多国人开始使用并且不断有成功的项目。UEditor作为百度前端团队的一款神器,在国内多个项目也在使用。所以小编抽了个时间把angular和UEditor整合起来作为一款angular的插件。

angular-ueditor

angular-ueditor 是一款整合了 angular 和 UEditor 的插件。目的是为了更方便的在angular基础上使用UEditor。

例子

http://zqjimlove.github.io/angular-ueditor/

安装

先引入 UEditor 的 javascript 文件

<script type="text/javascript" src="/ueditor/ueditor.config.js"></script>
<script type="text/javascript" src="/ueditor/ueditor.all.js"></script>

然后下载最新的 angular-ueditor 并且引入文件

<script type="text/javascript" src="angular-ueditor.js"></script>

此时还需要把 angular-ueditor 引入到模块里

angular.module('app',['ng.ueditor'])

用 Bower 安装

使用 Bower 安装时,angular-ueditor 会自动安装并且引入,但ueditor由于没有加入到 Bower 所以需要手动引入。

bower install angular-ueditor --save

使用

基础用法

由于继承了NgModelController,必须绑定 ngModel

<div class="ueditor" ng-model="content"></div>

自定义编辑器

<div class="ueditor" config="config" ng-model="content"></div>
...
<script>
    $scope.config = {
        ...
    }
</script>

方法

ready(listener)

注册准备事件,当 editor 初始化完成后会执行回调函数。

参数
参数 类型 详细
listener function(editor) Callback called whenever the editor ready.

例子

<div class="ueditor" ready="ready" ng-model="content"></div>
...
<script type="text/javascript">
    $scope.ready = function(editor){
        alert(editor.getContent());
    }
</script>

关于

这算是小编第一次正正经经的发布一个开源的项目,即使项目技术含量不高但实在又难以言表的愉悦。在最初开始学习编程到今天,使用过的开源项目数不胜数一直在学习、膜拜各路大神级的开源人物,这一次总算小小回馈了一下。希望在未来能带给大家更多方便好用的项目。

的码云指数为
超过 的项目
加载中

评论(2)

龙影
龙影
存在ueditor的问题,在复制html代码到editor中后整个页面都乱了。期待解决。而且图片上传后不能显示,而显示的是loading #Angular-UEditor#
maplewang
maplewang
不错啊 #Angular-UEditor#

暂无资讯

1
回答
当一个页面存在多个编辑器时ID重复
易墨 的回答 2015/06/22 21:11
最佳答案
在生产ID的js中添加一段生成随机数的代码即可

没有更多内容

加载失败,请刷新页面

没有更多内容

ng-admin引用UEditor 插件 Angular-UEditor

angular-ueditor angular-ueditor 是一款整合了 angular 和 UEditor 的插件。目的是为了更方便的在angular基础上使用UEditor。 ng-admin引用Angular-UEditor非常之简单。 1.先引入 UEditor ...

06/02 23:25
8
0
Egghead.io AngularJS视频教程

Angular JS (Angular.JS) 是一组用来开发Web页面的框架、模板以及数据绑定和丰富UI组件。它支持整个开发进程,提供web应用的架构,无需进行手工DOM操作。 AngularJS很小,只有60K,兼容主流浏...

2014/02/08 14:36
139
0
给 Web 开发者的 25 款最有用的 AngularJS 工具

AngularJS 是一种新 JavaScript 框架,目的是降低要求,加快开发速度。AngularJS 是让 HTML 标记动态,使其对 web 开发者更有帮助,同时从大量的分段中给定一个标准结构,使开发速度更快更高...

2015/07/25 16:46
172
1
AngularJS 中文资料+工具+库+Demo 大搜集

AngularJS 中文资料+工具+库+Demo 大搜集

2013/12/28 16:11
188
0
AngularJs

AngularJS 是一个 JavaScript 框架。它是一个以 JavaScript 编写的库。它可通过

2015/07/10 16:49
33
0
[Angularjs] 第一步开始一个项目

[Angularjs] 第一步开始一个项目 一、什么是angularjs angularjs是2009年兴起的,目前由Google维护一个采用mvc模式的js框架,很多时候用来创建单页面应用。我也经常将其和phonegap一起来开发...

2014/10/12 12:21
40
0
《AngularJS学习整理》系列分享专栏

《AngularJS学习整理》系列分享专栏 《AngularJS学习整理》已整理成PDF文档,点击可直接下载至本地查阅 https://www.webfalse.com/read/201748.html 文章 教你用AngularJS框架一行JS代码实现...

2018/11/09 09:16
189
0

没有更多内容

加载失败,请刷新页面

返回顶部
顶部