Angularjs use instructions to invoke Ueditor Baidu editor Example

All along, Angularjs Rich text editor is more difficult to do, mainly Third-party editor is difficult to integrate in, today took time to study, found that ueditor mainly loaded two JS files

Ueditor.config.js
Ueditor.all.js

Can I load these two files asynchronously? The answer is yes. We create a new service to load the resource asynchronously and set the necessary callback methods.

Service Code:

The code is as follows

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

The callback is implemented by binding callback to the OnLoad event.

Next is the instruction section:

The code is as follows

Copy Code

Directives.directive (' Ueditor ', [ ' Common ', ' $rootScope ', function (Common, $rootScope) { return { Restrict: ' EA ', Require: ' Ngmodel ', Link:function (Scope, Ele, Attrs, ctrl) { $rootScope. $emit (' Loading ', ' Initialize 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 ', ' justifyright ', ' justifyjustify ', ' Rowspacingtop ', ' rowspacingbottom ', ' lineheight ', ' | ', ' Insertorderedlist ', ' insertunorderedlist ', ' | ', ' Link ', ' unlink ', ' | ', ' Emotion ' ] ] }); Editor.ready (function () { Editor.setheight (500); Editorready = true; $rootScope. $emit (' Loading ', ');//editor Initialization complete Editor.addlistener (' Contentchange ', 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 (CTRL. $viewValue)? ': Ctrl. $viewValue; Editorhandler.setcontent (_initcontent);/bi-directional binding }; Editorhandler.init (); Event $rootScope. $on (' $routeChangeStart ', function () { Editor && Editor.destroy (); }); } } } ]);

Because Angularjs cannot automatically get editor content, you can only monitor Contentchange events manually to achieve two-way binding.

Template code:

The code is as follows	Copy Code
<div ueditor= "Editor" ng-required= "true" ng-model= "Material.content.content" id= "editor" ></div>