发表于: 2017-05-31 23:21:49

3 1002


今天完成的事情:(一定要写非常细致的内容,比如说学会了盒子模型,了解了Margin) 

总算是把任务10富文本编辑器搞定,

明天计划的事情:(一定要写非常细致的内容) 

大功告成.


遇到的问题:(遇到什么困难,怎么解决的) 

可以编辑成功,但是新增总是报错:-4014

    // 编辑
   if (vm.params.id) {
       //编辑article  参数需要带ID
       ArticleManagementService.getArticle(vm.params.id).then(function (res) {
           console.log(res);
           vm.params = res.data.data.article;
       });
       //立即上线
       vm.publishArticle = function () {
           vm.params.status = 2;
           ArticleManagementService.editArticle(vm.params.id, vm.params).then(function (res) {
               if (res.data.code === 0) {
                   $rootScope.alert("编辑成功");
                   $state.go("field.articleList");
               } else {
                   $rootScope.alert(res.data.message);
               }
           })
       };
       //存入草稿
       vm.saveArticle = function () {
           vm.params.status = 1;
           ArticleManagementService.editArticle(vm.params.id, vm.params).then(function (res) {
               if (res.data.code === 0) {
                   $rootScope.alert("编辑成功");
                   $state.go("field.articleList");
               } else {
                   $rootScope.alert(res.data.message);
               }
           })
       }

   }
   // 新增
   else {
       //立即上线
       vm.publishArticle = function () {
           vm.params.status = 2;
           ArticleManagementService.addArticle(vm.params).then(function (res) {
               if (res.data.code === 0) {
                   $rootScope.alert("新增成功");
                   $state.go("field.articleList");
               } else {
                   $rootScope.alert(res.data.message);
               }
           })
       };
       //存入草稿
       vm.saveArticle = function () {
           vm.params.status = 1;
           ArticleManagementService.addArticle(vm.params).then(function (res) {
               if (res.data.code === 0) {
                   $rootScope.alert("新增成功");
                   $state.go("field.articleList");
               } else {
                   $rootScope.alert(res.data.message);
               }
           })
       };
   }
})


收获:(通过今天的学习,学到了什么知识)

<!--富文本编辑器-->
<div type="text/html" style="margin:auto;height:200px;"
    ng-model="vm.params.content" name="content" meta-umeditor meta-umeditor-placeholder="说明不能为空"
    required="">


 富文本编辑器的自定义指令

angular.module('meta.umeditor', [])
   .directive('metaUmeditor', function ($timeout) {
       return {
           restrict: 'AE',
           scope: {
               config: '=metaUmeditorConfig',
               emitName: '@'
           },
           require: 'ngModel',
           transclude: true,
           link: function (scope, element, attr, ngModel) {
               //获取当前的DOM元素
               var _dom = element[0];

               var _id = '_' + Math.floor(Math.random() * 100).toString() + new Date().getTime().toString();

               var _placeholder = '<p style="font-size:14px;color:#ccc;">' +
                   attr.metaUmeditorPlaceholder +
                   '</p>';

               var _config = scope.config || {
                   //这里可以选择自己需要的工具按钮名称,此处仅选择如下七个
                   //toolbar: ['source undo redo bold italic underline'],
                   //focus时自动清空初始化时的内容
                   autoClearinitialContent: true,
                   //关闭字数统计
                   wordCount: false,
                   //关闭elementPath
                   elementPathEnabled: false
                   //frame高度
                   //initialFrameHeight: 300
               };
               if (scope.config && scope.config.id != "") {
                   scope.config.id = _id;
               }
               _dom.setAttribute('id', _id);


               var _umeditor = UM.getEditor(_id, _config);


               /**
                * 对于umeditor添加内容改变事件,内容改变触发ngModel改变.
                */
               var editorToModel = function () {
                   if (_umeditor.hasContents())
                       ngModel.$setViewValue(_umeditor.getContent());
                   else
                       ngModel.$setViewValue('');

               };

               /**
                * umeditor准备就绪后,执行逻辑
                * 如果ngModel存在
                *   则给在编辑器中赋值
                *   给编辑器添加内容改变的监听事件.
                * 如果不存在
                *   则写入提示文案
                */

               ngModel.$render = function () {
                   _umeditor.ready(function () {
                       if (ngModel.$viewValue) {
                           _umeditor.addListener('contentChange', editorToModel);
                           _umeditor.setContent(ngModel.$viewValue);
                       } else {
                           _umeditor.setContent(_placeholder);
                       }

                       $timeout(function () {
                           scope.$emit(scope.emitName, _umeditor);
                       });
                   });

               };

               /**
                * 添加编辑器被选中事件
                * 如果ngModel没有赋值
                *   清空content
                *   给编辑器添加内容改变的监听事件
                */
               _umeditor.addListener('focus', function () {
                   if (!ngModel.$viewValue) {
                       _umeditor.setContent('');
                       _umeditor.addListener('contentChange', editorToModel);
                   } else {
                       //_umeditor.setContent(ngModel.$viewValue);
                       _umeditor.addListener('contentChange', editorToModel);
                   }

               });


               /**
                * 添加编辑器取消选中事件
                * content值为空
                *   取消内容改变的监听事件
                *   添加content为提示文案
                */
               _umeditor.addListener('blur', function () {

                   if (!_umeditor.hasContents()) {
                       ngModel.$viewValue = '';
                       _umeditor.removeListener('contentChange', editorToModel);
                       _umeditor.setContent(_placeholder);

                   } else {
                       ngModel.$viewValue = _umeditor.getContent();
                       _umeditor.removeListener('contentChange', editorToModel);
                   }

               });

           }
       }
   });



返回列表 返回列表
评论

    分享到