发表于: 2017-07-04 23:14:24
2 901
今天做了的事:学习service,在textarea里添加富文本编辑器,为input添加表单验证
明天要做的事:完成立即上线和存为草稿,有余力的话从二级联动,下线,编辑,删除里面挑两个完成
今天遇到的问题:
1.UEditor(下文简称UE)的使用:
富文本编辑器的选择
首先我们综合考量了一下各个富文本编辑器,后来在知乎看见了如此回答。
所以我慨然决定使用百度的UEditor(手动滑稽)。
准备
首先我们下载一个UEditor,发现官网上有好几个版本,ASP,JSP百度一下发现是前后端分离和不分离的区别,并没过多了解,选择了分离的ASP。
使用UE需要引入必不可少的三个文件:
<link rel="stylesheet" href="../plugins/utf8-asp/themes/default/css/ueditor.min.css">
<script src="../plugins/utf8-asp/ueditor.config.js"></script>
<script src="../plugins/utf8-asp/ueditor.all.js"></script>
且文件引入config一定要在all之前引入。
引入和创建实例
首先我们在想要引入UE的地方定义一个id,此处推荐textarea标签。然后我们要将这个UE 实例化,此处为实例代码:
<script type="text/javascript">
var ue = UE.getEditor('art-explain');
UE.getEditor("art-explain").ready(function() {
this.setContent('请在此处写下说明...');
});
</script>
初始化操作
UE有自带方法toobars,可以在其中定义想要初始化的属性。
或者直接修改config文件,不推荐此方法
实例创建后直接执行接口报错
按照UE的自带方法,一定是这么写:
<script type="text/javascript">
var ue = UE.getEditor('art-explain');
ue.setContent('请在此处写下说明...');
</script>
那么为甚么会出问题呢?
官网api文档给出答案:
其实出现这种问题,其实是大家不了解UEditor的创建原理导致的。因为UEditor的编辑区域使用iframe作为编辑容器。所以当编辑器创建实例后,先会创建一个iframe元素,然后在iframe元素中写入一些脚本,这些脚本会在iframe元素初始化完成时被调用。
脚本的作用主要是为编辑器实例赋值iframe中的body,window,document对象的引用。 看到这里,大家就应该明白UEditor的初始化过程其实是个异步过程。
因为是个异步过程。所以场景中的书写方式就会出现问题了。虽然工厂方法getEditor能正确返回编辑器实例,但同步的代码ue.setContent马上就被执行了,因为setContent是在编辑容器中写内容,这时需要用到body,document等元素,但这些元素的引用赋值却在异步中才做的赋值。所以才会出现直接执行setContent时会出现无效的问题。当然有时不同浏览器的效果会出现不同。一些高级的浏览器比如chrome有时是可以的,但大部分ie浏览器都不行。这主要是因为浏览器的性能所致的。 那正确的方式是什么呢?
UEditor为开发者提供了ready接口,他会在编辑器所有的初始化操作都结束时调用。保证你要做的操作能在一个完整的初始化环境中执行。
所以正确的实例化如上。
获取不到offset width的错误
当我在总的app.js中对UE实例化的时候,浏览器抛出“获取不到offset width”的错误。百度上说此错误是因为实例化的过程中DOM没有出现,所以取不到宽度。解决办法是吧script文件写在UE引入的标签的紧下方。
后台配置项返回格式出错,上传功能将不能正常使用!
此错误可以不用解决,但是并未检测,故写定。
2.表单验证
Angular表单验证提供了很多表单验证指令,并且能将html5表单验证功能同他自己的验证指令结合起来使用。
要使用表单验证,首先保证表单有一个name属性,一般的输入字段如最大,最小长度等,这些功能由html5表单属性提供,如果我们想屏蔽浏览器对表单的默认验证行为,可以在表单元素上添加novalidate标记。
所以input要放入form里。
下面介绍一些常用验证方法:
必填项验证
某个表单输入是否已填写,只要在输入字段元素上添加HTML5标记required即可:
<input type="text" required />
最小长度
验证表单输入的文本长度是否大于某个最小值,在输入字段上使用指令ng-minleng= “{number}”:<input type="text" ng-minlength="5" />
最大长度
验证表单输入的文本长度是否小于或等于某个最大值,在输入字段上使用指令ng-maxlength=”{number}”:<input type="text" ng-maxlength="20" />
模式匹配
使用ng-pattern=”/PATTERN/”来确保输入能够匹配指定的正则表达式:<input type="text" ng-pattern="/[a-zA-Z]/" />
电子邮件
验证输入内容是否是电子邮件,只要像下面这样将input的类型设置为email即可:<input type="email" name="email" ng-model="user.email" />
数字
验证输入内容是否是数字,将input的类型设置为number:<input type="number" name="age" ng-model="user.age" />
URL
验证输入内容是否是URL,将input的类型设置为 url:<input type="url" name="homepage" ng-model="user.facebook_url" />
感悟:泣血蝇虫笑苍天,孤帆叠影锁白链
评论