angulaire.js - Lorsque l'éditeur angulaire est utilisé, les images sont insérées et le modèle angulaire n'est pas mis à jour une fois le chargement terminé ;

Question

Lors de l'utilisation de Baidu Editor, l'image insérée est initialement une image de chargement, et l'image téléchargée sera affichée une fois le chargement réussi
Lorsque l'image est insérée sans aucune modification, le modèle dans le contrôleur ressemble à ceci.

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

Même si l'image a été téléchargée et affichée avec succès dans l'éditeur, le modèle n'a pas été modifié. Le modèle ne sera modifié qu'après avoir modifié autre chose et déclenché l'événement changecontent de ueditor
Dans la commande udeitor Écoute ; pour le changement de contenu :

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

Afficher le code source de l'éditeur :

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);
}

Une fois l'image téléchargée avec succès, modifiez directement le src de l'image de chargement d'origine vers le lien renvoyé, mais cela ne déclenche pas le $apply d'angular. En fait, il faut dire que le changement de contenu n'est pas initié, ce qui entraîne le modèle. ne pas être mis à jour ;

Puis-je demander au maître, comment mettre à jour le modèle angulaire lors de la modification de l'attribut img src ?
Ce problème me dérange depuis longtemps. J'ai vu qu'un grand frère sur le blog ajoutait un délai pour changer de contenu

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

Mais traiter les symptômes plutôt que la cause profonde est inutile si mes photos sont chargées après 50 ms. . . .
Le code d'événement de contentchange est introuvable.

Answer 1

Retournez par vous-même ;
Méthode 1 : annulez le téléchargement d'une seule image dans la configuration et utilisez plutôt plusieurs téléchargements d'images
Méthode 2 : modifiez la fonction de téléchargement simple dans ueditor.all.js
Modifiez l'image de chargement une fois le téléchargement de l'image terminé src ; attribut, après avoir affiché l'image réelle, insérez une chaîne vide à la fin pour démarrer $apply ;