一.需要的依赖文件（requirements）
（1）1.3.以上的Angularjs.js
（2）1.3.以上的Rangy.js
（3）4.x以上的FonAwesome.js （控制工具栏默认样式）
（4）3.x以上的bootstrap(用于控制默认样式，实际上只需要bootstrap.css就好了)
（5）注意：以上库必须引用在textAngular.js之前
二.引入方式
注意：
textAngular-sanitize.js和angular.js的angular-sanitize.js实际上是同一个文件来的，你需要引入他们其中的一个，最好是textAngular-sanitize.js
因为这样可以匹配到textAngular严格的逻辑还有满足将来更长远的更新
（1）通过bower引入，安装完成之后引入到index.html
譬如这样：
<link rel='stylesheet' href='/bower_components/textAngular/dist/textAngular.css'>
<script src='/bower_components/textAngular/dist/textAngular-rangy.min.js'></script>
<script src='/bower_components/textAngular/dist/textAngular-sanitize.min.js'></script>
<script src='/bower_components/textAngular/dist/textAngular.min.js'></script>
（2）通过npm引入，使用命令行引入之后，同样的将他们放在index.html
譬如这样：
<link rel='stylesheet' href='/node_modules/textangular/dist/textAngular.css'>
<script src='/node_modules/textangular/dist/textAngular-rangy.min.js'></script>
<script src='/node_modules/textangular/dist/textAngular-sanitize.min.js'></script>
<script src='/node_modules/textangular/dist/textAngular.min.js'></script>
（3）如果你使用了common.js，那么你可以在app切入点引入
angular.module('myModule', [require('angular-sanitize'), require('textAngular')]);
引入angular-sanitize需要在textAngular.js之前
（4）通过cdn引入
<script src='http://cdnjs.cloudflare.com/ajax/libs/textAngular/1.5.0/textAngular-rangy.min.js'></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/textAngular/1.5.0/textAngular-sanitize.min.js'></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/textAngular/1.5.0/textAngular.min.js'></script>
（国内可能使用不了上面的三个cdn地址，可以自行去bootcdn上找相对应的资源）
三.用法
如果我们已经保证了下列4件事已经做了
（1）用<script>标签给你的项目引入了rangy-core.js and rangy-selectionsaverestore.js或者textAngular-rangy.min.js
（2）用<script>标签给你的项目引入了textAngular-sanitize.js或者textAngular-sanitize.min.js
（3）引入了textAngularSetup.js（实际上，这些代码已经被包含在了textAngular.min.js/textAngular.js）
（4）给你的angular module引入了这个模块，譬如，angular.module('myModule', ['textAngular'])这样。
那么我们可以开始使用它了，你可以在你的view中写入这一段：
<div text-angular ng-model="htmlVariable"></div>
又或者是这一段：
<text-angular ng-model="htmlVariable"></text-angular>
这种做法，就譬如你给定了一个属性就规定了angular表单的输入模式，让这个文本编辑器，作为一个表单一样可以提交
而且也可以让angularjs默认给它验证
注意：尽管textAngular 支持所有属性的用法，但是注意如果你使用ng-bind-html指令，那么你所有的样式都会被剥掉，这个原因很有可能
是因为你使用了angular-sanitize.js库
四.可能碰到的问题
因为textAngular 使用execCommand方法去令到富文本编辑器功能更加完善，那就说，不是在所有浏览器上使用都能工作
五.自定义
（1）
自定义toolbar
对于toolbar，提供了一些默认的样式和选项
这样设置:将需要用到的button定义到ta-toolbar数组内
<text-angular ta-toolbar="[['h1','h2','h3'],['bold','italics']]"></text-angular>
下面是toolbar的一些选项（这个就不翻译了）
h1
h2
h3
h4
h5
h6
p
pre
quote
bold
italics
underline
strikeThrough
ul
ol
undo
redo
clear
justifyLeft
justifyCenter
justifyRight
justifyFull
indent
outdent
html
insertImage
insertLink
insertVideo
wordcount
charcount
网友评论