ANGULARJS integrated Baidu Ueditor Editor tutorial

We first create a addscript function to dynamically load the JS script.

/**
* Dynamic load JS file file
* @param URL
* @param callback
*/
function Addscript (url,callback) {
var elt = document.createelement ("script");
elt.src = URL;
ELT.ANYSC = true;
if (elt.onload==null) {
Elt.onload = function () {
typeof callback== ' function ' &&callback ();
}
}else{
Elt.onreadystatechange = function () {
if (elt.readystate== "Loaded" | | | | elt.readystate== "complete") {
typeof callback== ' function ' &&callback ();
}
}
}
document.getElementsByTagName ("Body") [0].appendchild (ELT);
}

and write Angularjs instructions.

Directivesapp.directive (' Ueditor ',
function () {
return{
Restrict: ' EA ',
Require: ' Ngmodel ',
Scope: {
Height: ' @? '
},
Link:function (scope, element, attr, ctrl) {
var _self = this,
_initcontent,
Editor
Editorready = False,
BaseURL = "/assets/vendor/jquery_plugin/ueditor/1.4.3/"; Write your UE path

var Fexue = {
Initeditor:function () {
var _self = this;
if (typeof UE!= ' undefined ') {
Editor = new UE.ui.Editor ({
Initialcontent: _initcontent,
Toolbars: [
[' Source ', ' undo ', ' Redo ', ' bold ', ' Italic ', ' Removeformat ', ' formatmatch ', ' autotypeset ', ' blockquote ',
' Pasteplain ', ' | ', ' ForeColor ', ' BackColor ', ' insertorderedlist ', ' insertunorderedlist '
],
InitialFrameHeight:scope.height | | 120,
Autoheightenabled:false,
Wordcount:false,
Elementpathenabled:false
});


Editor.render (Element[0]);
Editor.ready (function () {
Editorready = true;
_self.setcontent (_initcontent);

Editor.addlistener (' Contentchange ', function () {
Scope. $apply (function () {
Ctrl. $setViewValue (Editor.getcontent ());
});
});
});
} else {

Addscript (BaseURL + ' ueditor.config.js ');
Addscript (BaseURL + ' ueditor.all.min.js ', function () {
_self.initeditor ();
})
}
},
Setcontent:function (content) {
if (editor && Editorready) {
Editor.setcontent (content);
}
}
};

/**
* When model changes are worth the time assigned.
*/
Ctrl. $render = function () {
_initcontent = Ctrl. $isEmpty (CTRL. $viewValue)? ': Ctrl. $viewValue;
Fexue.setcontent (_initcontent);
};

Fexue.initeditor ();
}
}
}
)

Well, the UE's encapsulation is complete.

Regarding the UE width cannot 100% the question, I wrote in the CSS in my project as follows:

* * Repair the width of Baidu 100% problem/

#edui1 {width:100%!important; margin-bottom:10px;} /* This ID is the editor ID * *
#edui1_iframeholder {width:100%!important}/* This ID is the editor editable region ID * *