• angular+ckeditor最后上传的最后一张图片不会被添加(bug)


    做法一:

      angularJs+ckeditor

    一、页面

      <textarea ckeditor required name="topicContent" ng-model="topic.body" rows="20" class="form-control col-md-8 ecp-post-content" name="content"></textarea>

    二、指令

    app.directive('ckeditor', function() {
    return {
    require : '?ngModel',
    link : function(scope, element, attrs, ngModel) {
    var ckeditor = CKEDITOR.replace(element[0], {

    });
    if (!ngModel) {
    return;
    }
    ckeditor.on('instanceReady', function() {
    ckeditor.setData(ngModel.$viewValue);
    });
    ckeditor.on('pasteState', function() {
    scope.$apply(function() {
    ngModel.$setViewValue(ckeditor.getData());
    });
    });
    ngModel.$render = function(value) {
    ckeditor.setData(ngModel.$viewValue);
    };
    }
    };
    });

    这样就可以使用了,但是这样有个bug,如果上传图片之后,后面不加然后字符那张图片的标签就不会被保存,因为图片上传成功后,图片的标签是ckeditor添加的,并不是通过我们的键盘或鼠标去操作的,

    所以这样ng-model就不会去执行脏检查,如果我们的图片是复制粘贴到上面的,就会被检查到,ps:这里并不是真的指最后一张图片,而是指ckeditor自动添加标签(比如图片上传成功之后它会自动添加该图片的img标签)之后,如果我们没有输入,则ng-model(ng-model是自动执行脏检查的!)的脏检查是检查不出来的(这里的原来具体还不清楚)

    所以我最后换成了做法二,页面使用的逻辑全部不变,只是文本编辑框不是通过ng-model去取值了,而是根据官网上的根据js/jQuery去取值

    做法二、

    一、页面

            <textarea required name="topicContent" ng-model="topic.body" rows="20" class="ckeditor form-control col-md-8 ecp-post-content" name="content"></textarea>

    <script>
          CKEDITOR.replace("content");//这里要和name属性值一致
    </script>

    二、js取值

          ajax提交前(angularJs就是$http提交之前)       

       //需要手动更新CKEDITOR字段
         for ( instance in CKEDITOR.instances ){ 
           CKEDITOR.instances[instance].updateElement(); 
         }

         然后通过

         $("textarea[name='content']").val();来取值即可!!!

      

     用方法二的方法,就解决掉了ng-model无法脏检查ckeditor自动添加标签的bug了(虽然是个笨方法,但是问题还是解决了!)

  • 相关阅读:
    【JDK1.8】JDK1.8集合源码阅读——LinkedList
    【JDK1.8】JDK1.8集合源码阅读——ArrayList
    【JDK1.8】JDK1.8集合源码阅读——IdentityHashMap
    【Spring】Spring boot多数据源历险记
    【JDK1.8】JDK1.8集合源码阅读——LinkedHashMap
    还未完成的任务
    做题中的错误总结
    cdq分治学习笔记
    计算几何复习笔记
    线性基学习笔记
  • 原文地址:https://www.cnblogs.com/zml-java/p/5535412.html
Copyright © 2020-2023  润新知