angular-ueditor:
(function() {
"use strict";
(function() {
var NGUeditor;
NGUeditor = angular.module("ng.ueditor", []);
NGUeditor.directive("ueditor", [
function() {
return {
restrict: "C",
require: "ngModel",
scope: {
config: "=",
ready: "="
},
link: function($S, element, attr, ctrl) {
var _NGUeditor, _updateByRender;
_updateByRender = false;
_NGUeditor = (function() {
function _NGUeditor() {
this.bindRender();
this.initEditor();
return;
}
/**
* 初始化編輯器
* @return {[type]} [description]
*/
_NGUeditor.prototype.initEditor = function() {
var _UEConfig, _editorId, _self;
_self = this;
if (typeof UE === 'undefined') {
console.error("Please import the local resources of ueditor!");
return;
}
_UEConfig = $S.config ? $S.config : {};
_editorId = attr.id ? attr.id : "_editor" + (Date.now());
element[0].id = _editorId;
this.editor = new UE.ui.Editor(_UEConfig);
this.editor.render(_editorId);
return this.editor.ready(function() {
_self.editorReady = true;
_self.editor.addListener("contentChange", function() {
ctrl.$setViewValue(_self.editor.getContent());
if (!_updateByRender) {
if (!$S.$$phase) {
$S.$apply();
}
}
_updateByRender = false;
});
if (_self.modelContent && _self.modelContent.length > 0) {
_self.setEditorContent();
}
if (typeof $S.ready === "function") {
$S.ready(_self.editor);
}
$S.$on("$destroy", function() {
if (!attr.id && UE.delEditor) {
UE.delEditor(_editorId);
}
});
});
};
_NGUeditor.prototype.setEditorContent = function(content) {
if (content == null) {
content = this.modelContent;
}
if (this.editor && this.editorReady) {
this.editor.setContent(content);
}
};
_NGUeditor.prototype.bindRender = function() {
var _self;
_self = this;
ctrl.$render = function() {
_self.modelContent = (ctrl.$isEmpty(ctrl.$viewValue) ? "" : ctrl.$viewValue);
_updateByRender = true;
_self.setEditorContent();
};
};
return _NGUeditor;
})();
new _NGUeditor();
}
};
}
]);
})();
}).call(this);
Ueditor是百度提供的在線編輯器,功能非常豐富,angular-ueditor 是一款整合了 angular 和 UEditor 的插件。目的是為了更方便的在angular基礎上使用UEditor。
安裝非常方便:
(1)首先到官網下載百度ueditor1_4_3-utf8-jsp.zip
(2)解壓ueditor1_4_3-utf8-jsp.zip到自己的工程web目錄,將jsp/lib目錄下的jar包剪切到WEB-INF/lib目錄下,這些jar是用來進行文件上傳操作的,如果缺少的話是無法進行文件上傳動作的。
(3)下載angular-ueditor-master.zip,解壓縮后,將其中的angular-ueditor.js拷貝到自己的工程web目錄中
(4)在單頁面應用中需要增加的js文件
<script type="text/javascript" src="ueditor/ueditor.config.js"></script>
<script type="text/javascript" src="ueditor/ueditor.all.js"></script>
<script type="text/javascript" src="angular-ueditor.js"></script>
(5)在app.js中將angular-ueditor引入到模塊;在html應用中并綁定ng-model
angular.module('app', ['ng.ueditor'])
......
<div class="ueditor" ng-model="content"></div>
(6)上傳圖片默認路徑的修改(參考www . suchso . com/UIweb/baidu-UEditor-image-upload-config-url.html)
所有的上傳配置選項都在一個文件中配置,這個文件就是ueditor/jsp/config.json,例如imagePathFormat表示了文件上傳到什么目錄下。
"imagePathFormat": "./ueditor/jsp/upload/image/{yyyy}{mm}{dd}/{time}{rand:6}"