`

百度ueditor使用心得

 
阅读更多
包自己下载,此处有提供;
ueditor难度在于图片和附件的上传配置。
1、
<script type="text/javascript" src="ueditor/ueditor.config.js" ></script> 
<script type="text/javascript" src="ueditor/ueditor.all.js" ></script>

2、编辑框的实例化,js代码:
var describe = UE.getEditor('myEditor');

html代码:
<div id="myEditor" style="height:100px;"></div>

3、需注意到的是为编辑框赋值:
var examContentAnalysis = UE.getEditor('myEditor8');   
	examContentAnalysis.ready(function(){
		examContentAnalysis.setContent('${tmEduExamContent.examContentAnalysis}');
	});


4、图片上传配置:
导入ueditor.config.js,再项目中导入commons-fileupload-1.2.1.jar和ueditor.jar包
首先配置URL为你的ueditor针对项目下的相对目录
var URL;
	URL = window.UEDITOR_HOME_URL = "/TMRemoteEdu/ueditor/";
    URL = window.UEDITOR_HOME_URL || (function(){

其次配置图片保存目录
 //图片上传配置区
        ,imageUrl:URL+"jsp/imageUp.jsp"             //图片上传提交地址
        ,imagePath:URL + "/upload/"                     //图片修正地址,引用了fixedImagePath,如有特殊需求,可自行配置
        //,imageFieldName:"upfile"                   //图片数据的key,若此处修改,需要在后台对应文件修改对应参数
        //,compressSide:0                            //等比压缩的基准,确定maxImageSideLength参数的参照对象。0为按照最长边,1为按照宽度,2为按照高度
        //,maxImageSideLength:900                    //上传图片最大允许的边长,超过会自动等比缩放,不缩放就设置一个比较大的值,更多设置在image.html中

        //附件上传配置区
        ,fileUrl:URL+"jsp/fileUp.jsp"               //附件上传提交地址
        ,filePath:URL + "/upload/"                   //附件修正地址,同imagePath
        //,fileFieldName:"upfile"                    //附件提交的表单名,若此处修改,需要在后台对应文件修改对应参数
 //图片在线管理配置区
        ,imageManagerUrl:URL + "jsp/imageManager.jsp"       //图片在线管理的处理地址
        ,imageManagerPath:URL + "/upload/" 

然后就是jsp页面的处理
imageUp.jsp如下:
 up.setSavePath("../upload");

fileUp.jsp如下:
up.setSavePath("../upload"); //保存路径

5、图片本地管理要修改:
imageManager.jsp
public String getRealPath(HttpServletRequest request,String path){
	ServletContext application = request.getSession().getServletContext();
	String str = application.getRealPath(request.getServletPath());
	return new File(new File(str).getParent()).getParent() + path;
}

然后如下:
String path = "\\upload";
	String imgStr ="";
	String realpath = getRealPath(request,path)+"/";
	List<File> files = getFiles(realpath,new ArrayList());
	for(File file :files ){
		imgStr+=file.getPath().replace(getRealPath(request,path),"")+"ue_separate_ue";
	}
	if(imgStr!=""){
        imgStr = imgStr.substring(0,imgStr.lastIndexOf("ue_separate_ue")).replace(File.separator, "/").trim();
    }
	out.print(imgStr);
分享到:
评论

相关推荐

    百度UEditor使用说明

    百度UEditor使用说明 百度UEditor是中国搜索引擎巨头百度公司推出的富文本编辑器,旨在帮助开发者快速构建富文本编辑功能。下面是关于百度UEditor使用说明的详细知识点总结: 一、UEditor的下载和安装 在使用百度...

    百度ueditor编辑器.zip

    百度ueditor编辑器百度ueditor编辑器百度ueditor编辑器百度ueditor编辑器百度ueditor编辑器百度ueditor编辑器百度ueditor编辑器百度ueditor编辑器百度ueditor编辑器百度ueditor编辑器

    百度Ueditor最新版使用实例

    在"百度Ueditor最新版使用实例"中,我们可以学习到如何有效地利用这个编辑器来提升用户体验,以及如何进行配置和优化。 首先,要理解百度Ueditor的基本架构。它由前端界面和后端服务两部分组成。前端负责展示编辑器...

    百度ueditor官方包

    **百度UEditor官方包详解** 百度UEditor是一款由百度公司开发的开源富文本编辑器,它为网页开发者提供了强大的在线文字编辑功能。该编辑器以其稳定性、易用性和丰富的功能集而广受好评,适用于各类网站和应用的后台...

    百度ueditor完整包

    这个"百度ueditor完整包"包含了所有必要的组件和资源,使得用户能够在自己的网站上快速集成并使用这款编辑器。 UEditor的主要特点在于它的易用性和灵活性。它支持多种格式的文字输入,如HTML、Markdown等,同时提供...

    spring boot thymeleaf 整合 百度Ueditor 集成demo

    在本文中,我们将深入探讨如何将Spring Boot、Thymeleaf和百度Ueditor进行整合,以便在Web应用程序中实现一个功能强大的富文本编辑器。这个集成的Demo将帮助开发者解决后端配置问题,确保文件上传功能正常运行。 ...

    百度ueditor编辑器

    **百度UEditor编辑器详解** 百度UEditor是一款由百度公司开发的专业级富文本编辑器,它以其强大功能和易用性在Web应用中广受欢迎。UEditor专为满足现代网络编辑需求而设计,提供丰富的文本格式化选项,支持多媒体...

    百度ueditor使用.doc

    【百度Ueditor使用详解】 Ueditor是由百度开发的一款强大的Web富文本编辑器,它提供了丰富的功能,便于用户在网页上创建、编辑和格式化文本。本文将深入探讨如何使用和二次开发Ueditor。 **一、Ueditor的部署与...

    百度Ueditor

    **百度Ueditor** 百度Ueditor是一款由百度公司开发的开源富文本在线编辑器,它专为Web应用设计,提供了一种简洁、高效的HTML文本编辑体验。这个编辑器以易用性和强大功能著称,广泛应用于各类网站、博客、论坛以及...

    百度ueditor编辑器jsp版本

    【百度UEditor编辑器JSP版本详解】 UEditor是由百度公司旗下的Web前端研发部精心打造的一款强大而易用的富文本Web编辑器。其主要目标是提供一个轻量级、高性能且用户友好的编辑工具,使得用户在网页上能够轻松进行...

    asp.net 百度UEditorDemo

    综合来看,这个"asp.net 百度UEditorDemo"项目是一个使用ASP.NET和.NET Framework 4.0开发的Web应用示例,主要展示了如何在VS2010 SP1环境下集成和使用百度UEditor这个富文本编辑器,以提供用户友好的在线文本编辑...

    百度ueditor编辑器 word导入功能(asp.net版本)

    百度Ueditor是一款强大的在线编辑器,它提供了丰富的功能,包括图片上传、表格制作、代码编辑等。在本案例中,我们关注的是"百度ueditor编辑器的word导入功能",特别是在ASP.NET环境下。 百度Ueditor的Word导入功能...

    百度 UEditor

    作为一个开源项目,UEditor遵循MIT协议,这意味着用户可以自由地使用、修改和分发其源代码,极大地促进了社区的贡献与二次开发。 **1. 轻量化设计** UEditor的设计理念之一就是轻量级,这意味着它在保证功能齐全的...

    百度ueditor支持本地与FTP上传图片

    当用户选择图片上传时,UEditor会通过FTP协议将图片文件传输到指定的FTP服务器上,同样返回图片的URL供编辑器使用。 **配置文件详解** `config.json`是百度UEditor的配置文件,用于设置编辑器的各种行为和功能。...

    百度UEditor 整合135所需要的文件

    百度UEditor是由百度公司开发的一款开源JavaScript富文本编辑器,支持多种浏览器环境。它提供了丰富的API和插件系统,允许开发者根据需求自定义编辑器功能。UEditor的主要特点包括:所见即所得、实时预览、图片上传...

    使用vue-ueditor-wrap组件时导入的百度ueditor资源包

    wrap组件时导入的百度ueditor资源包,如果要恢复百度ueditor图片组件的功能,就去UEditor/dialogs/image/image.html 里面取消屏蔽23,24,25行代码,如果需要查看组件使用放法,请去我主页查看:uve 使用百度ueditor自定义...

    百度Ueditor在线富文本编辑器

    通过以上介绍,我们可以看到百度Ueditor是一个功能强大、易于使用的在线富文本编辑器,无论是个人博客还是企业级项目,都能从中受益。其完善的API文档和丰富的示例代码,使得开发者能够快速地进行集成和二次开发,...

Global site tag (gtag.js) - Google Analytics