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>