`
songzhan
  • 浏览: 250543 次
  • 性别: Icon_minigender_1
社区版块
存档分类
最新评论

ueditor使用配置总结 (转)

 
阅读更多
原文章地址:http://blog.csdn.net/dongzhouzhou/article/details/8446782

项目中使用了ueditor编辑器,刚开始的时候真的是一头雾水,不过后来总算是能够将ueditor整合到项目中了,现在把自己的配置过程记录一下:

一、首先得让编辑器能够在页面上显示出来,这个在官方文档写的非常的详细,可直接按照官方文档的说明即可成功配置,我按如下步骤配置:

(1)我下载的是jsp版本的,解压后放在项目中自己的某个位置即可,我放在如下:

(2)导入所需的文件,注意文件在项目中的路径

(3)创建编辑器实例及其DOM容器(使用script而不用textarea的好处在官方文档上有说明)


(4)在editor_config.js中查找URL变量配置编辑器在项目中的路径


经过以上步骤,编辑器即可在页面上显示。如果大小不合适,可在editor_config.js中进行配置:


二、然后就需要将在编辑器中所输入的数据在后台进行接收,即前后端交互,按如下步骤:

(1)如果是要将已有的数据在页面上进行显示,只需将需要显示的内容写在<script></script>标签之间即可,如:


(2)如果是新表单输入的内容,和(1)差不多,只不过不用写${editnews.content}即可,然后在action中以变量形式接收(struts2)或在servlet中使用request.getParameter("");的形式进行接收。具体的可见:ueditor前后端交互说明

经过以上步骤,即可完成前后端的文字数据交互。

三、图片的上传配置处理:

(1)首先确认将ueditor源代码包下的jsp文件夹中的commons-fileupload-1.2.2.jar放入项目中的lib下,并将Uploader类放在src中的某个包中

(2)配置editor_config.js中的图片上传部分:



其中,然后在imageUp.jsp中导入所需要的Uploader类:

[html] view plaincopy

    <%@ page import="cn.edu.hpu.filter.Uploader" %> 

经过以上配置,即完成了图片的上传配置,能够成功的上传图片到指定的文件夹。但是这里也存在一个问题就是:我们所上传的图片是放在tomcat的webapps下的项目中的一个文件夹,如果tomcat重新启动的话,这些文件是不会消失的,但如果是重新部署的话那所上传的所有的文件都会消失,原本想尝试用虚拟路径试试,上传图片后能够自动的传到本地磁盘上的不是tomcat下的某个文件夹,保证图片不会因为项目的重新部署而消失,但是没有成功,不知某位大牛知道解决方法?恳请赐教,感激不尽哪!

四、附件的上传配置,其实和图片的上传配置是一个道理,只需要在fileUp.jsp页面中导入所需的Uploader类即可。

这样就解决了ueditor的基本使用问题,当然还有很多可以定制的内容,这个等以后在实践中用到了再继续补充。


分享到:
评论

相关推荐

    百度UEditor使用说明

    下面是关于百度UEditor使用说明的详细知识点总结: 一、UEditor的下载和安装 在使用百度UEditor之前,需要从官网下载相应的包,并将其导入到项目中。下载的包中包含了UEditor的核心文件和相关的依赖项。在下载完成...

    百度富文本编辑器 ueditor 使用总结

    【百度富文本编辑器 ueditor 使用总结】 在Web开发中,富文本编辑器是一个不可或缺的工具,它允许用户以类似Word的方式编辑网页内容。百度的ueditor是一款功能强大的开源富文本编辑器,广泛应用于博客、论坛、CMS...

    百度Ueditor使用方法

    本文将详细介绍百度Ueditor 1.2.2.0版本的使用方法,包括前端页面配置与初始化、Java端文件上传处理以及自定义文件上传路径等关键步骤。 #### 二、前端页面配置与初始化 1. **配置UEditor路径** 在页面中引入...

    ueditor配置好的asp.net网站,能上传图片,flash等 是一个很好的例子

    【标题】"ueditor配置好的asp.net网站"是基于ASP.NET技术实现的一个集成富文本编辑器的示例项目。ueditor是一款广泛使用的开源富文本编辑器,它提供了丰富的功能,如图片上传、Flash插入等,使得用户在网页上能够...

    ueditor(单独使用上传图片)

    总结,ueditor在HTML页面中的独立图片上传功能涉及了前端编辑器的配置、图片的上传处理、API的调用,以及前后端的协作。理解这些知识点对于实现一个高效、安全的图片上传系统至关重要。通过正确配置ueditor,即便...

    ueditor-1.1.2_ueditor-1.1.2_ueditor_ueditor:jar:1.1.2_ueditor-1.

    在Java Web项目中使用ueditor-1.1.2.jar,通常需要以下步骤: 1. **引入依赖**:将JAR包加入到项目的类路径中,如在Maven项目中添加依赖配置。 2. **配置前端**:在HTML页面中引入UEditor的JavaScript和CSS资源,...

    vue-ueditor-wrap的ueditor

    Vue.js 是一个流行的前端JavaScript框架,用于构建用户界面。在Vue.js项目中,有时...通过下载UEditor并将其放入`public`目录,以及正确配置和使用vue-ueditor-wrap,你可以在Vue应用中创建功能完备的富文本编辑体验。

    ueditor所需jar包

    总结来说,ueditor jar包是实现网页富文本编辑的关键组件,需要正确地引入、配置并部署到项目中。开发者需要理解其功能特性,同时关注服务器端的接口实现和前端的集成工作,以确保ueditor在实际应用中的稳定性和用户...

    ueditor1.4.3在vs2013 .net环境下的配置

    - 如果需要自定义ueditor配置,可以传递参数到`UE.getEditor`函数中,例如设置初始内容、工具栏等。 6. **处理后端数据交互** - ueditor的图片、文件上传等功能需要与后端服务器进行交互。在ASP.NET项目中,我们...

    UEditor使用笔记(第1次使用记录)

    这篇“UEditor使用笔记(第1次使用记录)”可能是作者初次使用UEditor时的经验总结,包括安装、配置、基本使用以及遇到的问题与解决方法。 1. **UEditor的安装** 安装UEditor通常涉及下载源码包,解压后放入服务器...

    UEditor1.4.2

    总结来说,UEditor 1.4.2 是一个强大且灵活的富文本编辑器,其丰富的功能、良好的扩展性和易用性使其成为开发者在构建Web应用时的首选工具。通过理解并熟练掌握这些知识点,开发者能够更好地利用UEditor 构建出高效...

    百度编辑器ueditor-dev-1.5.0官方最新版utf8-asp.rar

    2. **可定制化**:UEditor 提供了丰富的配置选项和插件接口,开发者可以根据自己的需求进行自定义,包括编辑器的外观、功能模块、甚至扩展新的编辑功能。 3. **用户体验**:UEditor 注重用户体验,提供直观的编辑...

    ueditor-dev-1.5.0

    总结来说,ueditor 1.5.0版本是一个强大且易用的富文本编辑器,它的出现极大地提高了网页内容创作的效率。虽然在开发过程中需要依赖Node.js和Grunt,但这也正是现代Web开发的趋势,通过自动化工具可以使得项目管理和...

    Ueditor自定义下拉框问题

    ### Ueditor自定义下拉框及功能操作详解 #### 一、概述 Ueditor是一款由百度推出的开源富文本编辑器,具有丰富的插件和高度可定制化的...掌握这些技能后,你将能够更加灵活地使用Ueditor,满足各种不同的业务需求。

    Asp.net MVC 下使用百度 UEditor 编辑器

    总结来说,将百度UEditor集成到Asp.net MVC项目中,你需要完成以下步骤: 1. 引入UEditor的JavaScript和CSS文件。 2. 在视图中创建`&lt;textarea&gt;`并初始化UEditor。 3. 配置服务器端上传接口。 4. 根据项目需求进行...

    集成了ueditor富文本框配置简单方便主要解决图片视频文件上传问题

    三、ueditor配置与使用 ueditor的配置非常灵活,可以在初始化时通过JavaScript设置各项参数,例如: - `serverUrl`:设置上传文件的服务器地址。 - `imagePathFormat` 和 `videoPathFormat`:定义图片和视频的存储...

    Ueditor 1.4.3 Net上传图片文件配置Demo

    总结,Ueditor 1.4.3 Net上传图片文件配置涉及到前端编辑器的配置、服务器端接口的编写以及图片管理的策略。通过合理的配置和开发,你可以为用户提供一个强大而便捷的图片上传功能,提升他们的编辑体验。

    ueditor老版本

    - **editor_config.js**:这是ueditor的配置文件,开发者可以根据项目需求在此文件中设置编辑器的各种参数,如默认字体、图片上传路径、工具栏选项等。 - **CHANGELOG.TXT**:版本变更日志,记录了ueditor每次更新的...

    wordpress整合ueditor下载wp-ueditor2

    总结,通过整合UEditor,你可以为WordPress站点提供一个功能强大、易于使用的富文本编辑器,极大地提升内容创作者的工作效率。在实际操作中,根据自身需求进行调整和优化,可以让这个编辑器更好地服务于你的网站。...

    ueditor上传图片到ftp

    3. **ueditor配置FTP** 首先,你需要拥有一个运行中的FTP服务器,并知道服务器的地址、端口号、用户名和密码。然后,在ueditor的配置文件(通常是`config.js`)中,找到图片上传的相关配置项,如`imageActionName`...

Global site tag (gtag.js) - Google Analytics