Angular-UEditor

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

2015年3月19日更新关于图片上传的问题

由于UEditor 对图片上传的操作时插入了一个元素（上传中…）的内容但对于后续操作UEditor都采用了对该元素直接进行操作没有触发到contentChange事件。我已经向UEditor的开发团队提交了issue，所以还是需要等他们来解决这个问题。相关细节的代码参考-> simpleupload.js

angular-ueditor

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

Github地址

例子

http://zqjimlove.github.io/angular-ueditor/sample/demo.html

安装

先引入 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>

关于

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

2015年3月19日更新 关于图片上传的问题