search

Home  >  Q&A  >  body text

angular.js - angular-ueditor使用中,插入图片,加载完成后不更新angularmodel的问题;

使用百度编辑器时,插入图片初始为loading图,载入成功后才显示上传的图片,
插入图片后不做任何修改时,控制器中的model是这样的

<p><img class="loadingclass" id="loading_iwwwjn6l" src="http://d.com:12080/Public/backend/lib/ueditor/themes/default/images/spacer.gif" title="正在上传..."/></p>

即使图片已经上传成功,在编辑器已经显示出来了,但是model中还是没有得到修改,只有再修改点其他东西,触发ueditor的changecontent事件后,才会修改model;
udeitor指令中的监听changecontent:

_self.editor.addListener("contentChange", function() {
    ctrl.$setViewValue(_self.editor.getContent());
    if (!_updateByRender) {
      if (!$S.$$phase) {
        $S.$apply();
      }
    }
    _updateByRender = false;
  });

查看ueditor源码:

function callback(){
    try{
        var link, json, loader,
            body = (iframe.contentDocument || iframe.contentWindow.document).body,
            result = body.innerText || body.textContent || '';
        json = (new Function("return " + result))();
        link = me.options.imageUrlPrefix + json.url;
        if(json.state == 'SUCCESS' && json.url) {
            loader = me.document.getElementById(loadingId);
            loader.setAttribute('src', link);
            loader.setAttribute('_src', link);
            loader.setAttribute('title', json.title || '');
            loader.setAttribute('alt', json.original || '');
            loader.removeAttribute('id');
            domUtils.removeClasses(loader, 'loadingclass');
        } else {
            showErrorLoader && showErrorLoader(json.state);
        }
    }catch(er){
        showErrorLoader && showErrorLoader(me.getLang('simpleupload.loadError'));
    }
    form.reset();
    domUtils.un(iframe, 'load', callback);
}

图片上传成功后,直接将原来loading图的src修改成返回的链接,但是这样却没有出发angular的$apply,实际上应该说是没有出发changecontent,导致model没有被更新;

求问大神,如何让angular model 在修改img src属性时得到更新呢?
这问题困扰了很久了,之前看到博客有个大兄弟给changecontent里面加了个延迟

 _self.editor.addListener("contentChange", function() {  
    //此处设置一个延迟,防止图片还没有从服务器返回,从而获取到的是loading图片  
    setTimeout(function() {  
      ctrl.$setViewValue(_self.editor.getContent());  
      if (!_updateByRender) {  
        if (!$S.$$phase) {  
          $S.$apply();  
        }  
      }  
      _updateByRender = false;  
    }, 50)  
  });  

但是治标不治本,如果我的图片在50ms之后才载入,也是没有用的。。。。
找不到contentchange的事件代码。

我想大声告诉你我想大声告诉你2743 days ago804

reply all(1)I'll reply

  • 高洛峰

    高洛峰2017-05-15 17:13:01

    Go back by yourself;
    Method 1: Cancel single image upload in config and use multiple image uploads instead;
    Method 2: Modify the simple upload function in ueditor.all.js
    Modify the loading image after the image upload is completed src attribute, after displaying the real picture, insert an empty string at the end to start $apply;

    reply
    0
  • Cancelreply