发表于: 2016-11-26 23:44:46

2 1634


今日完成

   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、指令理解更深——毕竟就那三章,看了两三遍了。


返回列表 返回列表
评论

    分享到