xheditor 是一款比较好用的文本编辑器,具体如何使用这里不在说了,网上有很多,也可以查看自带demos文件。这里说说文件的上传。
页面
<script type="text/javascript" src="<c:url value="/js/jquery.js"/>"></script> <script type="text/javascript" src='<c:url value="/xheditor/xheditor-1.2.2.min.js"/>'></script> <script type="text/javascript" src='<c:url value="/xheditor/xheditor_lang/zh-cn.js"/>'></script><%--中文显示--%> <textarea id="editor01" rows="40" cols="80" name="XXX" class="w_all" >编辑</textarea><%--w_al 是所有的功能--%>
js注意之前要导jquery的js文件,
/* upFile 表示上传地址 这里面一定要把:html5Upload : false,不然action无法获取数据 */ $(document).ready(function() { $('#editor01').xheditor({ html5Upload : false, upMultiple : '1', upLinkUrl : "upFile?immediate=1", upLinkExt : "zip,rar,txt", upImgUrl : "upFile?immediate=1", upImgExt : "jpg,jpeg,gif,png", upFlashUrl : "upFile?immediate=1", upFlashExt : "swf", upMediaUrl : "upFile?immediate=1", upMediaExt : "avi" }); });
java代码;采用struts2
import java.io.File; import java.io.IOException; import java.util.UUID; import org.apache.commons.io.FileUtils; import org.apache.struts2.ServletActionContext; import com.opensymphony.xwork2.ActionSupport; public class UpFile extends ActionSupport { //文件名必须是filedata,因为xheditor的name值为filedata private File filedata; private String filedataContentType; private String filedataFileName; /** * 上传文件 */ public String execute() { String saveRealFilePath = ServletActionContext.getServletContext() .getRealPath("/upload");//保存上传资料的目录 File fileDir = new File(saveRealFilePath); /** * 如果文件夹不存在创建一个文件夹 */ if (!fileDir.exists()) { fileDir.mkdirs(); } /** * 判断文件名是否存在 */ if (filedataFileName == null) return null; /** * 随机生成一同类型,文件名不重复的文件 */ String newName = UUID.randomUUID() + filedataFileName.substring(filedataFileName.lastIndexOf(".")); File savefile = new File(saveRealFilePath + "/" + newName); try { // 复制文件 FileUtils.copyFile(filedata, savefile); //回写json数据 ServletActionContext.getResponse().getWriter() .println(getJson("", "/upload/" + newName)); ; } catch (IOException e) { throw new RuntimeException(e); } return null; } public File getFiledata() { return filedata; } public String getFiledataContentType() { return filedataContentType; } public String getFiledataFileName() { return filedataFileName; } /** * 获取返回json数据 * @param err * @param newFileName * @return */ public String getJson(String err, String newFileName) { //json的格式很重要** return "{\"err\":\"" + err + "\",\"msg\":\"" + ServletActionContext.getRequest().getContextPath() + File.separatorChar + newFileName + "\"}"; } public void setFiledata(File filedata) { this.filedata = filedata; } public void setFiledataContentType(String filedataContentType) { this.filedataContentType = filedataContentType; } public void setFiledataFileName(String filedataFileName) { this.filedataFileName = filedataFileName; } }
相关推荐
本文将详述如何使用xhEditor与Struts2框架相结合,实现图片上传功能。xhEditor是一款开源的JavaScript富文本编辑器,它提供了丰富的编辑功能,如字体样式设置、颜色调整、图片和文件上传等。而Struts2则是一个强大的...
本篇文章将详细讲解如何结合JQuery和JSP实现XHEditor的图片上传功能。 首先,我们需要了解XHEditor的基本用法。XHEditor是基于jQuery的,因此在项目中必须先引入jQuery库。在HTML页面中,通过`<script>`标签引入...
在ASP.NET中实现Xheditor的图片上传功能,一般会涉及以下步骤: 1. **配置Xheditor**:在HTML页面中引入Xheditor的JavaScript和CSS文件,并设置编辑器的配置项,如工具栏、皮肤等。其中,需要配置图片上传的相关...
xhEditor文件上传的Java实现提供了一种灵活、易用的在线富文本编辑器解决方案,支持图片上传、文件上传等多种功能。开发者可以根据需要,选择合适的编辑器插件和参数设置,实现个性化的编辑器功能。
本实例将详细介绍如何在项目中集成和使用XHEditor,以及实现文件上传功能。 首先,**XHEditor** 是一个高效且强大的富文本编辑器,它提供了许多常见的编辑功能,如字体样式、颜色设置、插入图片和链接等。由于其...
本话题主要关注如何在XHEditor在线编辑器下,通过ASP(Active Server Pages)实现远程图片的自动上传到服务器的功能。 首先,XHEditor是一款强大的JavaScript富文本编辑器,它提供了丰富的编辑功能,如文字格式化、...
通过内置的上传功能,用户无需离开编辑器界面就能完成图片的上传,提高了工作效率。 **视频上传**功能进一步扩展了xheditor的能力,使得用户可以将本地视频文件嵌入到文档中,为内容创作提供了更多可能。视频上传...
【xheditor jsp完整实例】是一个基于XHEditor的Web富文本编辑器的应用示例,主要用于在Java服务器页面(JSP)上实现用户友好的文本编辑功能。XHEditor是一款开源的JavaScript富文本编辑器,它提供了丰富的API和...
本案例涉及的是将xheditor富文本编辑器与Struts2框架整合,实现图片上传功能。xheditor是一款强大的JavaScript在线编辑器,提供了丰富的文本编辑功能,而Struts2是一个流行的Java Web框架,用于构建MVC(模型-视图-...
它包含了xhEditor的核心功能,如文本格式化、图片上传、链接插入等,开发者可以通过它深入理解编辑器的工作原理并进行自定义扩展。 xhEditor的特点包括但不限于: - **多语言支持**:xhEditor支持多种语言,便于...
在网页上实现类似QQ的表情插入功能,xhEditor提供了一个简单而高效的方式。下面将详细介绍xhEditor的主要特点、功能以及如何实现表情插入等操作。 1. **主要特点** - **轻量级**: xhEditor体积小巧,加载速度快,...
- **事件监听**:利用API接口监听编辑器的事件,如内容改变、图片上传等,以实现特定功能。 **3. 示例与实践** xheditor压缩包内通常包含示例文件,这些文件展示了如何在实际项目中使用编辑器。通过查看和运行示例...
3. **上传功能**:xheditor内置了图片和文件上传功能,但需要开发者配置服务器端的上传接口以完成实际的文件存储。 五、总结 xheditor以其简洁的API、丰富的功能和高度的可扩展性,成为了许多Web开发者在构建富...
在这款小巧而功能强大的编辑器中,开发者可以为网站用户提供类似于Microsoft Word的编辑体验,实现文字编辑、格式化、图片上传、链接插入等多种功能。本文将深入探讨XHEditor1.1.14的核心特性、使用方法以及常见问题...
参数值:接收用户上传的服务器端程序URL,默认留空为禁用超链接上传功能,具体使用方法请参考demo8演示文件 注:可使用内置变量:{editorRoot},代表当前编辑器的根路径,例:{editorRoot}upload.php upLinkExt:...
1. **简洁的API接口**:XHEditor 1.2.2提供了一套简单易懂的API接口,开发者可以方便地进行功能扩展和定制,实现与后端数据的交互。 2. **丰富的编辑功能**:包括文本格式化、字体调整、段落处理、图片上传、超链接...
3. **高度可定制**:xheditor允许开发者自定义工具栏,根据项目需求选择合适的编辑功能,实现个性化配置。 4. **兼容性好**:全面支持主流浏览器,确保在不同环境下都能稳定运行。 5. **安全可控**:提供防XSS攻击...
总的来说,XHEditor是一个功能强大的富文本编辑器,它提供的API和示例可以帮助开发者轻松地在项目中实现文本编辑功能。通过深入研究和实践,你可以熟练地运用XHEditor来提升用户体验,打造专业的Web内容编辑平台。
4. **插件化设计**: 具有良好的扩展性,可以通过安装插件来实现更多高级功能,如图片上传、视频插入等。 5. **支持多种编辑模式**: 可切换为源代码模式、可视化模式和预览模式,满足不同用户需求。 6. **完善的API...