Angularjs uses commands to call ueditor Baidu Editor

Angularjs uses commands to call ueditor Baidu Editor
Ueditor is a Baidu editor in Chinese, while angularjs is an excellent front-end JS framework. Next we will introduce the example of calling ueditor Baidu editor in angularjs. If you are interested, take a look.

For a long time, angularjs Rich Text editors are relatively difficult to do, mainly because third-party editors are difficult to integrate. Today I took the time to study and found that ueditor mainly loads two js files.

Ueditor. config. jsueditor. all. js

Can I load these two files asynchronously? The answer is yes. We create a service to load resources asynchronously and set the necessary callback method.
Service Code:

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

Call back by binding callback to the onload event.
Next is the instruction part:

Directives. directive ('ueditor', ['common', '$ rootScope', function (Common, $ rootScope) {return {restrict: 'ea ', require: 'ngmodel', link: function (scope, ele, attrs, ctrl) {$ rootScope. $ emit ('loading', 'initialize the editor... '); // broadcast loading event, you can delete var _ self = this, _ initContent, editor, editorReady = false, base ='/public/vendor/utf8_qiniu_ueditor-master ', // ueditor directory _ 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 ', 'justifright', 'justifyjustify ', 'rowspacingtop', 'rowspacingbottom ', 'lineheight',' | ', 'insertorderedlist', 'insertunorderedlist',' | ', 'link ', 'unlink ', '|', 'Expression']}); editor. ready (function () {editor. setHeight (500); editorReady = true; $ rootScope. $ emit ('loading', ''); // The editor is initialized. addListener ('contentchang', function () {// bidirectional binding 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 (ctr L. $ viewValue )? '': Ctrl. $ viewValue; editorHandler. setContent (_ initContent); // bidirectional binding}; editorHandler. init (); // event $ rootScope. $ on ('$ routeChangeStart', function () {editor & editor. destroy () ;}}}]);

Angularjs cannot automatically obtain the editor content. Therefore, you can only manually listen to the contentChange event for Bidirectional binding.
Template code: