ueditor-angular（百度編輯器angular版）中，關於插入圖片后不操作，圖片無法正常提交的問題；

由於項目后台管理頁面中需要使用編輯器，所以選擇了百度編輯器這個常用的東西；

本人是小白，第一次使用百度編輯器，具體的配置是由后台的兄弟完成的，還給了demo，所以在項目開發中也一直都沒發現什么問題；

使用也很簡單，

HTML中使用ng-model綁定某個變量，config綁定配置屬性；

<div class="ueditor" ng-model="vm.formData.content" config="_Config" ></div>

控制器中配置scope._Config

$scope._Config = {
            // 工具按鈕   配置編輯器上傳的功能按鈕
            toolbars:[[
                'fullscreen', 'source', '|', 'undo', 'redo', '|',
                'bold', 'italic', 'underline', 'fontborder', 'strikethrough', 'superscript', 'subscript', 'removeformat', 'formatmatch', 'autotypeset', 'blockquote', 'pasteplain', '|', 'forecolor', 'backcolor', 'insertorderedlist', 'insertunorderedlist', 'selectall', 'cleardoc', '|',
                'rowspacingtop', 'rowspacingbottom', 'lineheight', '|',
                'custombackend', 'paragraph', 'fontfamily', 'fontsize', '|',
                'directionalityltr', 'directionalityrtl', 'indent', '|',
                'justifyleft', 'justifycenter', 'justifyright', 'justifyjustify', '|', 'touppercase', 'tolowercase', '|',
                'link', 'unlink', 'anchor', '|', 'imagenone', 'imageleft', 'imageright', 'imagecenter', '|',
                'simpleupload', 'insertimage', 'emotion', 'attachment', 'map', 'insertcode', 'pagebreak', 'template', '|',
                'horizontal', 'date', 'time', 'spechars', 'wordimage', '|',
                'inserttable', 'deletetable', 'insertparagraphbeforetable', 'insertrow', 'deleterow', 'insertcol', 'deletecol', 'mergecells', 'mergeright', 'mergedown', 'splittocells', 'splittorows', 'splittocols', 'charts', '|',
                'print', 'preview', 'searchreplace', 'drafts', 'help'
            ]],
            serverUrl : baseUrl + '/Api/Ueditor/',
            // 不抓取遠程圖片
            catchRemoteImageEnable: false
        }

如此就能正常使用；

 

但是在測試階段發現了一個問題：使用單張圖片插入后，如果不在有任何操作，直接保存，再次瀏覽的時候會發現，圖片變成loading圖，而不是你上傳成功的圖片；

經過查找發現原因在於：使用單張圖片上傳時，編輯器會事先插入一張loading圖，當上傳成功后，使用JS直接修改loading圖的src屬性，使它指向已上傳成功的圖片，但是直接修改src這一操作並沒有觸發angular的digest，導致angular中的數據模型並沒有得到更新，還是保存的loading圖路徑；

 

知道原因后，這時候就想了怎么在插入的圖片上傳完成后執行一次檢測呢，也查了很多資料，試了很多方法：什么dom操作，什么提交前加空字符串，發現都沒有用，后來在網站找到了一個治標不治本的方法：

給編輯器內容的監聽事件添加一個延遲，保證在圖片上傳成功之后，在執行$apply，但是這方法有明顯的缺陷，我無法確定圖片上傳完成的時間，所以還是有bug；

上面方法的參考網站：http://blog.csdn.net/u014788227/article/details/53443034 

 

后來呢，想想也只能從圖片上傳的方法中來修改，才能保證不影響其他功能；

這是簡單上傳的部分代碼，也是bug出現的地方，為什么上傳圖片的時候插入的loading可以被angluar檢測到，那是不是在圖片插入完成后，利用插入loading圖的方法再插入一個空字符串，不改變數據又能讓angular檢測到呢？

所以如下，在ueditor-all.js中24533行代碼添加 

me.execCommand('inserthtml', '');

來觸發angluar的臟值檢測，然后就沒有然后了，圖片可以正常上傳顯示；

這種方法可能過於投機，對於網上那些什么修改控制器，添加服務的方法，真心看不懂，也沒試成功，所以暫時先用着這種方法吧，以后有長進了再來參謀參謀；