一.需要的依赖文件(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