Angular 的 UEditor 插件 Angular-UEditor

梦里梦外; 2022-05-20 08:35 256阅读 0赞

Angular-UEditor 详细介绍

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

## angular-ueditor ##

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

## 例子 ##

[http://zqjimlove.github.io/angular-ueditor/][http_zqjimlove.github.io_angular-ueditor]

## 安装 ##

先引入 UEditor 的 javascript 文件

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

此时还需要把 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 初始化完成后会执行回调函数。

##### 参数 #####

<table> 
 <thead> 
  <tr> 
   <th style="border-color:rgb(125,125,125);">参数</th> 
   <th style="border-color:rgb(125,125,125);">类型</th> 
   <th style="border-color:rgb(125,125,125);">详细</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td style="border-color:rgb(125,125,125);">listener</td> 
   <td style="border-color:rgb(125,125,125);">function(editor)</td> 
   <td style="border-color:rgb(125,125,125);">Callback called whenever the editor ready.</td> 
  </tr> 
 </tbody> 
</table>

例子

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

[Angualr]: http://www.oschina.net/p/angularjs
[http_zqjimlove.github.io_angular-ueditor]: http://zqjimlove.github.io/angular-ueditor/
[angular-ueditor]: https://github.com/zqjimlove/angular-ueditor/tree/master/dist