angularjs整合ueditor簡介
UEditor是一個富文本web編輯器，具有輕量，可定製，注重用戶體驗等特點，開源基於MIT協議，允許自由使用和修改代碼,本文介紹的是Ueditor與angular JS整合的方法
Ueditor 1.4.3.3(jsp版本) 漏洞修復 ,修復方法見下文
|
1 |
Ueditor第二次加載Dom渲染失敗的問題 |
|
2 |
多圖上傳-在線管理 谷歌瀏覽器下圖片使用絕對路徑資源禁止訪問的問題 |
|
3 |
Controller.jsp圖片判斷問題 |
|
4 |
刪除一些早已失效的功能，如圖片在線搜索、谷歌地圖等 |
前端——添加JS依賴
<script language="javascript" src="ueditor/ueditor.config.js"></script>
<script language="javascript" src="ueditor/ueditor.all.js"></script>
<script language="javascript" src="ueditor/ueditorDirective.js"></script>
前端——添加Module
var myAppModule= angular.module('app', ['ueditor.directive']);
後端——添加jar包
把ueditor/jsp/lib中的jar下添加到項目工程中，如果你的工程是maven工程，建議您建立user Libraries,並且加入到Deloyment Assembly中
注意:commons-io-2.4.jar爲必須，不能小於這個版本，否則報錯，因爲沒有ueditor所需的方法，如果你的commons-io小於這個版本，請升級
ueditor中的 controller.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
import="com.baidu.ueditor.ActionEnter"
pageEncoding="UTF-8"%>
<%@ page trimDirectiveWhitespaces="true" %>
<%
request.setCharacterEncoding( "utf-8" );
response.setHeader("Content-Type" , "text/html");
String rootPath = application.getRealPath( "/" );
String action = request.getParameter("action");
String result = new ActionEnter( request, rootPath ).exec();
if( action!=null &&
(action.equals("listfile") || action.equals("listimage") ) ){
rootPath = rootPath.replace("\\", "/");
result = result.replaceAll(rootPath, "");
}
out.write( result );
%>ueditor中的 image.html 隱藏早已失效的在線搜索功能（display:none）
<div id="tabhead" class="tabhead">
<span class="tab" data-content-id="remote"><var id="lang_tab_remote"></var></span>
<span class="tab focus" data-content-id="upload"><var id="lang_tab_upload"></var></span>
<span class="tab" data-content-id="online"><var id="lang_tab_online"></var></span>
<span class="tab" data-content-id="search" style="display:none"><var id="lang_tab_search"></var></span>
</div>ueditorDirective.js
(function() {
'use strict';
var page = angular.module('ueditor.directive', []);
page.directive('ueditor', [
'$templateCache',
function($templateCache) {
return {
restrict : 'AE',
template : '<script id="ueditorId" name="content" type="text/plain">這裏寫你的初始化內容</script>',
scope : false,
compile: function(element, attr) {
return {
pre: function(scope, iElement, iAttrs, controller) {
var editorFunctions=[ 'fullscreen', 'source', '|', 'undo', 'redo', '|', 'bold',
'italic', 'underline', 'fontborder', 'strikethrough', 'superscript', 'subscript',
'removeformat', 'formatmatch', 'autotypeset', 'blockquote', 'pasteplain', '|',
'forecolor', 'backcolor', 'insertorderedlist', 'insertunorderedlist', 'selectall',
'cleardoc', '|', 'rowspacingtop', 'rowspacingbottom', 'lineheight', '|', 'customstyle',
'paragraph', 'fontfamily', 'fontsize', '|', 'directionalityltr', 'directionalityrtl',
'indent', '|', 'justifyleft', 'justifycenter', 'justifyright', 'justifyjustify', '|',
'touppercase', 'tolowercase', '|', 'link', 'unlink', 'anchor', '|', 'imagenone',
'imageleft', 'imageright', 'imagecenter', '|', 'simpleupload', 'emotion', 'scrawl',
'insertframe', 'pagebreak', '|', 'horizontal', 'date', 'time', 'spechars', '|',
'inserttable', 'deletetable', 'insertparagraphbeforetable', 'insertrow', 'deleterow',
'insertcol', 'deletecol', 'mergecells', 'mergeright', 'mergedown', 'splittocells',
'splittorows', 'splittocols', 'charts', '|', 'preview', 'searchreplace', 'drafts'] ;
scope.ueditorId=attr.id;
scope.config={};
if(attr.config!=''&&attr.config!=undefined){
scope.config=$.parseJSON(attr.config);
editorFunctions=editorFunctions.concat($.parseJSON(attr.config).functions);
}
UE.delEditor(scope.ueditorId);
var editor = UE.getEditor(scope.ueditorId,{
toolbars: [editorFunctions] ,
initialContent : scope.config.content?scope.config.content:'',
focus: scope.config.focus?scope.config.focus:false,
indentValue:scope.config.indentValue?scope.config.indentValue:'2em',
initialFrameWidth:scope.config.initialFrameWidth?scope.config.initialFrameWidth:1000, //初始化編輯器寬度,默認1000
initialFrameHeight:scope.config.initialFrameHeight?scope.config.initialFrameHeight:320, //初始化編輯器高度,默認320
readonly : scope.config.readonly?scope.config.readonly:false ,//編輯器初始化結束後,編輯區域是否是隻讀的，默認是false
enableAutoSave: scope.config.enableAutoSave?scope.config.enableAutoSave:true, //啓用自動保存
saveInterval: scope.config.saveInterval?scope.config.saveInterval:500, //自動保存間隔時間， 單位ms
fullscreen : scope.config.fullscreen?scope.config.fullscreen:false,//是否開啓初始化時即全屏，默認關閉
imagePopup: scope.config.imagePopup?scope.config.imagePopup:true, //圖片操作的浮層開關，默認打開
allHtmlEnabled:scope.config.allHtmlEnabled?scope.config.allHtmlEnabled:false //提交到後臺的數據是否包含整個html字符串
});
editor.ready(function(){
});
scope.ueditorSetContent=function(id,value){
var editor = UE.getEditor(id);
editor.setContent(value);
}
scope.ueditorGetContent=function(id){
var editor = UE.getEditor(id);
return editor.getContent();
}
scope.ueditorGetContentTxt=function(id){
var editor = UE.getEditor(id);
return editor.getContentTxt();
}
},
post: function(scope, iElement, iAttrs, controller) {
}
}
}
}
} ]);
})();
構建ueditor結構
<div ueditor id="container" config="{{config}}" ></div>
<div ueditor id="container2" config="{{config2}}" ></div>
ueditor指令屬性必須。 id必須,指定了編輯器的唯一標識。config可以省略,爲ueditor的配置項。
配置ueditor
最簡配置示例:初始化富文本內容即可
$scope.config={
content : '<p>test1</p>',
};
完整配置示例 :
$scope.config={
//初始化編輯器內容
content : '<p>test1</p>',
//是否聚焦 focus默認爲false
focus : true,
//首行縮進距離,默認是2em
indentValue:'2em',
//初始化編輯器寬度,默認1000
initialFrameWidth:1000,
//初始化編輯器高度,默認320
initialFrameHeight:320,
//編輯器初始化結束後,編輯區域是否是隻讀的，默認是false
readonly : false ,
//啓用自動保存
enableAutoSave: false,
//自動保存間隔時間， 單位ms
saveInterval: 500,
//是否開啓初始化時即全屏，默認關閉
fullscreen : false,
//圖片操作的浮層開關，默認打開
imagePopup:true,
//提交到後臺的數據是否包含整個html字符串
allHtmlEnabled:false,
//額外功能添加 functions :['map','insertimage','insertvideo','attachment',
,'insertcode','webapp','template',
'background','wordimage']
};額外功能描述
|
屬性 |
描述 |
|
|
打印功能 |
|
insertimage |
具有在線圖片管理、批量上傳、插入在線圖片這三個功能 |
|
insertvideo |
具有批量上傳、插入網絡視頻這兩個功能 |
|
attachment |
批量上傳附件和附件在線管理功能 |
|
map |
百度地圖功能 |
|
insertcode |
代碼編輯器功能 |
|
template |
模板功能 |
|
background |
設置當前富文本編輯的背景 |
|
wordimage |
圖片轉存功能 |
注意：上傳圖片/視頻/附件保存在web目錄/uedito/jsp/upload文件夾下
全局配置請修改ueditor.config.js文件，配置非常多，不在文檔中一一列舉，文件中配置用法已註釋
上傳配置請修改config.json文件,配置非常多，文件中配置用法已註釋
Ueditor方法
.ueditorSetContent(id,value)
設置對應ueditor編輯器的內容，注意：這個方法不能在初始化之前使用
.ueditorGetContent(id)
獲取ueditor編輯器中的全部內容
.ueditorGetContentTxt(id)
獲取ueditor編輯器中的文本內容
Demo
Html
<pre name="code" class="html"> <div ueditor id="container" config="{{config}}" ></div>
<div ueditor id="container2" config="{{config2}}" style="margin-top:20px" ></div>
<button ng-click="getContent('container')" >獲取container內容</button>
<button ng-click="getContent('container2')" >獲取container2內容</button>
<br/> <br/>
<button ng-click="getContentTxt('container')" >獲取container內容Txt</button>
<button ng-click="getContentTxt('container2')" >獲取container2內容Txt</button>
<br/> <br/>
<button ng-click="setContent()" >設置container內容</button>
<button ng-click="setContent2()" >設置container2內容</button>
JS
$scope.config={
//初始化編輯器內容
content : '<p>test1</p>',
//是否聚焦 focus默認爲false
focus : true,
//首行縮進距離,默認是2em
indentValue:'2em',
//初始化編輯器寬度,默認1000
initialFrameWidth:1000,
//初始化編輯器高度,默認320
initialFrameHeight:320,
//編輯器初始化結束後,編輯區域是否是隻讀的，默認是false
readonly : false ,
//啓用自動保存
enableAutoSave: false,
//自動保存間隔時間， 單位ms
saveInterval: 500,
//是否開啓初始化時即全屏，默認關閉
fullscreen : false,
//圖片操作的浮層開關，默認打開
imagePopup:true,
//提交到後臺的數據是否包含整個html字符串
allHtmlEnabled:false, functions :['map','insertimage','insertvideo','attachment','insertcode','template', 'background', 'wordimage']
};
$scope.config2={
functions :['map']
};
$scope.getContent=function(id){
var content=$scope.ueditorGetContent(id);
alert(content);
}
$scope.getContentTxt=function(id){
var content=$scope.ueditorGetContentTxt(id);
alert(content);
}
$scope.setContent=function(){
$scope.ueditorSetContent("container","111111");
}
$scope.setContent2=function(){
$scope.ueditorSetContent("container2","222222");
}