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");
} 
扫一扫
1129
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
