基于angular自定义指令封装的一个富文本编辑器

公司项目得意家后头需求一个能实现双向绑定和按需加载的富文本编辑器
地址已在github贴出
github地址

这边是结合angular自定义指令和百度Ueditor插件,具体使用方法,具体代码已经上传github

ng-Ueditor是一个angular集成Ueditor的插件,实现了双向绑定和按需加载功能。


安装

  • 1.下载最新的angular.js文件。引入到页面中。
    1
    <script src="./angular-1.5.7/angular.min.js"></script>
  • 2.下载本插件ngUeditor文件。引入到页面底部。
    1
    <script src="ngUeditor.js"></script>

使用

  • 1.由于继承了NgModelController,这里在使用时候必须绑定ngModel
  • 2.参数获取:
    使用时,在页面底部添加script标签,以JSON格式添加数据(这里以Ueditor两个文件为例)

    1
    2
    3
    4
    5
    6
    7
    8
       <script type="text/json" id="ueditor">
    {
    "url": {
    "config": "http://ueditor.baidu.com/ueditor/ueditor.config.js",
    "main": "http://ueditor.baidu.com/ueditor/ueditor.all.js"
    }
    }
    </script>

    这里将需要按需加载的文件,写入其中

  • 创建ng-model模板

    1
    angular.module('acorn', ["ng.ueditor"])
  • html部分

    1
    2
    3
    4
    <body ng-app="acorn">
    <ng-ueditor ng-model="test"></ng-ueditor>
    <textarea ng-model="test"></textarea>
    </body>