angularjs利用指令呼叫ueditor百度編輯器
阿新 • • 發佈:2019-01-11
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>