ueditor中文是百度編輯器，而angularjs是一款優秀的前端JS框架了，下面我們來介紹在angularjs呼叫ueditor百度編輯器例子,有興趣的可一起來看看。

一直以來，angularjs的富文字編輯器都比較難做，主要是第三方的編輯器很難整合進來，今天花時間研究了一下，發現ueditor主要載入兩個js檔案

ueditor.config.js

ueditor.all.js

能不能把這兩個檔案非同步載入呢？答案是肯定的。我們新建一個服務用來非同步載入資源，並設定必要的回撥方法。
服務程式碼：

services.factory('Common', [
  '$http'
 
, '$q', function($http, $q) {
   return {
    loadScript: function(url, callback) {
     var head = document.getElementsByTagName("head")[0];
     var script = document.createElement("script");
     script.setAttribute("type", "text/javascript");
     script.setAttribute("src", url);
     script.setAttribute("async"
 
, true);
     script.setAttribute("defer", true);
     head.appendChild(script);
     //fuck ie! duck type
     if (document.all) {
      script.onreadystatechange = function() {
       var state = this.readyState;
       if (state === 'loaded' || state === 'complete') {
        callback && callback();
       }
      }
     }
     else
 
 {
      //firefox, chrome
      script.onload = function() {
       callback && callback();
      }
     }
    },
    loadCss: function(url) {
     var ele = document.createElement('link');
     ele.href = url;
     ele.rel = 'stylesheet';
     if (ele.onload == null) {
      ele.onload = function() {
      };
     }
     else {
      ele.onreadystatechange = function() {
      };
     }
     angular.element(document.querySelector('body')).prepend(ele);
    }
   }
  }
 ]);

通過繫結callback到 onload 事件來實現回撥。
接下來是指令部分：

directives.directive('ueditor', [
  'Common',
  '$rootScope',
  function(Common, $rootScope) {
   return {
    restrict: 'EA',
    require: 'ngModel',
    link: function(scope, ele, attrs, ctrl) {
     $rootScope.$emit('loading', '初始化編輯器...');//廣播loading事件，可以刪除
     var _self = this,
       _initContent,
       editor,
       editorReady = false,
       base = '/public/vendor/utf8_qiniu_ueditor-master', //ueditor目錄
       _id = attrs.ueditor;
     var editorHandler = {
      init: function() {
       window.UEDITOR_HOME_URL = base + '/';
       var _self = this;
       if (typeof UE != 'undefined') {
        editor = UE.getEditor(_id, {
         toolbars: [
          [
           'fontsize', '|',
           'blockquote', 'horizontal', '|',
           'removeformat', '|',
           'insertimage', '|',
           'bold', 'italic', 'underline', 'forecolor', 'backcolor', '|',
           'justifyleft', 'justifycenter', 'justifyright', 'justifyjustify',
           'rowspacingtop', 'rowspacingbottom', 'lineheight', '|',
           'insertorderedlist', 'insertunorderedlist', '|',
           'link', 'unlink', '|',
           'emotion'
          ]
         ]
        });
        editor.ready(function() {
         editor.setHeight(500);
         editorReady = true; 
                                                                        $rootScope.$emit('loading', '');//編輯器初始化完成
         editor.addListener('contentChange', function() {//雙向繫結
          if (!scope.$$phase) {
           scope.$apply(function() {
            ctrl.$setViewValue(editor.getContent());
           });
          }
         });
        });
       }
       else {
        Common.loadScript(base + '/ueditor.config.js', null);
        Common.loadScript(base + '/ueditor.all.min.js', function() {
         _self.init();
        });
       }
      },
      setContent: function(content) {
       if (editor && editorReady) {
        editor.setContent(content);
       }
      }
     };
     ctrl.$render = function() {
      _initContent = ctrl.$isEmpty(ctrl.$viewValue) ? '' : ctrl.$viewValue;
      editorHandler.setContent(_initContent);//雙向繫結
     };
     editorHandler.init();
     //事件
     $rootScope.$on('$routeChangeStart', function() {
      editor && editor.destroy();
     });
    }
   }
  }
 ]);

由於angularjs無法自動獲得編輯器內容，只能手動監聽 contentChange事件來實現雙向繫結。
模板程式碼：

<div ueditor="editor" ng-required="true" ng-model="material.content.content" id="editor"></div>