发表于: 2016-11-26 23:44:46
2 1633
今日完成
1、解决ue的兼容性问题;
2、编辑页面功能完成。
明日计划
把页面的新增和编辑功能整合在一起。目前虽然是同一个路由页面,但是因为涉及到UE的兼容性以及两个功能的差异还需要做一些工作——主要是控制器之间传参的完善,以及UE(估计明天会分两个指令,毕竟UE指令再写一个就不难了)。
问题
主要是UE的兼容性和异步问题。在参考了网上两篇博客的指令,再加上对UE和AngularJS两者的API查阅,终于捣鼓出了一个符合我要求的指令。下面是详细:
routeApp.directive('ue4update', function ($timeout, $interval) {
return {
require: '?ngModel',
link: function (scope, element, attrs, ngModel) {
//没有model,怎么玩儿?
if (!ngModel) {
return
}
//保证UE的唯一性,毕竟我们会编辑很多个学生嘛
element[0].id = 'ueditorInstance' + Date.now();
//类似于日报的编辑框,但是多了个格式刷,并且没有图片上传功能(因为不需要)
var ueditor = UE.getEditor(element[0].id, {
toolbars: [
[
'undo', 'redo',
'|', 'bold', 'italic', 'underline', 'strikethrough',
'|', 'forecolor', 'backcolor',
'|', 'removeformat', 'formatmatch',
'|', 'insertorderedlist', 'insertunorderedlist',
'|', 'selectall', 'cleardoc', 'paragraph', 'fontfamily', 'fontsize',
'|', 'justifyleft', 'justifycenter', 'justifyright',
'|', 'link', 'unlink',
'|', 'emotion'
// , 'simpleupload', 'insertimage'
]
],
elementPathEnabled: false,
wordCount: false
});
//用循环来解决异步问题,虽然用这个方式来实现目的显得姿势水平不高,但是客观地讲,这很黄很暴力的方法确实很有效。最重要的是,网速慢对此影响没那么大。
ueditor.ready(function () {//ready之后才能顺利getContent
if (ueditor.getContent() !== ngModel.$viewValue) {
var refresh = $interval(function () {
ueditor.setContent(ngModel.$viewValue);
if (ueditor.getContent() === ngModel.$viewValue) {
$interval.cancel(refresh);
}
}, 500, 10)
}
});
//内容改变时,更新wish
ueditor.addListener('contentChange', function () {
ngModel.$setViewValue(ueditor.getContent());
$timeout(function () {
scope.$apply();
});
/*
if (!scope.$$phase) {scope.$apply(); }
$$phase用于检测更改是否已被加入digest循环,如果已加入,返回true。
但是据开发者Misko所述,$$phase可能引发安全问题,不建议使用。可用$timeout代替——在下一个循环里会被执行。当然,在这个小例子里就不用考虑什么安全不安全的问题了。
*/
})
}
};
});
感觉还有蛮多可以完善的地方,说不定明天醒来就想到好点子了。
收获
1、更熟悉UE的一些常用API;
2、指令理解更深——毕竟就那三章,看了两三遍了。
评论