Home

关于angular-ueditor一个小bug

  (function() {
    "use strict";
    (function() {
      var NGUeditor;
      NGUeditor = angular.module("ng.ueditor", []);
      NGUeditor.directive("ueditor", [
        function() {
          return {
            restrict: "C",
            require: "ngModel",
            scope: {
              config: "=",
              ready: "="
            },
            link: function($S, element, attr, ctrl) {
              var _NGUeditor, _updateByRender;
              _updateByRender = false;
              _NGUeditor = (function() {
                function _NGUeditor() {
                  this.bindRender();
                  this.initEditor();
                  return;
                }


                /**
                 * 初始化编辑器
                 * @return {[type]} [description]
                 */

                _NGUeditor.prototype.initEditor = function() {
                  var _UEConfig, _editorId, _self;
                  _self = this;
                  if (typeof UE === 'undefined') {
                    console.error("Please import the local resources of ueditor!");
                    return;
                  }
                  _UEConfig = $S.config ? $S.config : {};
                  _editorId = attr.id ? attr.id : "_editor" + (Date.now());
                  element[0].id = _editorId;
                  this.editor = new UE.ui.Editor(_UEConfig);
                  this.editor.render(_editorId);
                  return this.editor.ready(function() {
                    _self.editorReady = true;
                    _self.editor.addListener("contentChange", function() {
                      //此处设置一个延迟，防止图片还没有从服务器返回，从而获取到的是loading图片
                      setTimeout(function() {
                        ctrl.$setViewValue(_self.editor.getContent());
                        if (!_updateByRender) {
                          if (!$S.$$phase) {
                            $S.$apply();
                          }
                        }
                        _updateByRender = false;
                      }, 50)
                    });
                    if (_self.modelContent && _self.modelContent.length > 0) {
                      _self.setEditorContent();
                    }
                    if (typeof $S.ready === "function") {
                      $S.ready(_self.editor);
                    }
                    $S.$on("$destroy", function() {
                      if (!attr.id && UE.delEditor) {
                        UE.delEditor(_editorId);
                      }
                    });
                  });
                };

                _NGUeditor.prototype.setEditorContent = function(content) {
                  if (content == null) {
                    content = this.modelContent;
                  }
                  if (this.editor && this.editorReady) {
                    this.editor.setContent(content);
                  }
                };

                _NGUeditor.prototype.bindRender = function() {
                  var _self;
                  _self = this;
                  ctrl.$render = function() {
                    _self.modelContent = (ctrl.$isEmpty(ctrl.$viewValue) ? "" : ctrl.$viewValue);
                    _updateByRender = true;
                    _self.setEditorContent();
                  };
                };

                return _NGUeditor;

              })();
              new _NGUeditor();
            }
          };
        }
      ]);
    })();

  }).call(this);

该指令通过监听ueditor的contentChange事件来给ng-model变量赋值，从而达到数据绑定的目的。但是如果内容是图片就会有一个请求服务器的间隔。如果直接在文本框输入一张图片，打印出这个model的值，可以发现值是loading图片的地址，我猜测ueditor在请求之前给content赋值为loading图片地址，待图片地址从服务器返回后进行覆盖。所以如果在图片地址还没返回之前取content的值是错误的，所以我设置了一个50ms的延迟，虽然不能从根本上解决，但是主要保证图片请求服务器并返回地址的时间少于50ms就没问题，另外这样的另一个不足就是不管图片还是文字内容变化都会有50ms延迟。还有就是这个bug只会在最后一个输入的是图片才会出现，因为如果你紧跟着输入文字会出触发contentChange事件去获取content，此时图片地址已经返回，获取的就是正确的地址。