Angular 的 UEditor 插件：Angular-UEditor

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 初始化完成后會執行回調函數。

參數

例子

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

項目主頁：http://www.baiduhome.net/lib/view/home/1411391886875