%3cp%3e 修改 值 html,UEditor在JavaWeb中的应用
富文本编辑器(UEditor)
在平时开发Java Web项目的时候,往往会使用第三方插件来帮助我们更快的实现功能。
这里教大家使用百度开源的富文本编辑器(UEditor)来帮助我们更好的编写文本。
官网下载地址
这里下载最新版的就可以了
解压出来是这样的
打开index.html的效果
好了 ,废话不多说,开始我们的正题。
1、配置编辑器环境
创建一个动态web工程
将解压出来的编辑器文件夹整个拷贝到WebContent目录下
此时工程会报错,因为我们没有引用所需的jar包。
将utf8-jsp -> jsp->lib目录下中的所有jar包拷贝到WEB-INF目录下的lib文件夹中
在WebContent下创建一个index.jsp的文件。
将utf8-jsp中的index.html文件内容拷贝到index.jsp
注:使用插件时必须引入以下3个文件
调用编辑器:
将引用js文件的相对路径补全
完成之后运行index.jsp或者右键工程运行
这样基本的配置就搭建好了。
2、获取编辑框的内容
我们来使用富文本编辑器随便写一些内容,然后点击获取内容
我们发现,在javaScript中可以使用 editor.getContent()获得整个p标签的内容,那我们怎么在java web中拿到内容呢?
回到index.jsp中
使用form表单将整个 编辑器包涵,并且加上用于提交表单的按钮
完整demo
提交
将多余的按钮以及js脚本都删除,保留一个实例化编辑器的方法
var ue = UE.getEditor('editor');
运行之后 编辑一段内容然后点击提交
http://localhost:8080/ueditor/index.jspeditorValue=%3Cp%3E%E6%88%91%E6%98%AF%E5%86%85%E5%AE%B9%3C%2Fp%3E
我们可以发现,在提交表单的时候数据是保存在editorValue下的,知道原理之后我们就可以创建一个servlet来接收这个字段了
创建Servlet之后还需修改form表单中的action值
UeditorServlet .java中的doGet()方法
/** * 用于接收form表单中的editorValue值 *@see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response) */
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
//设置请求和响应的编码统一为UTF-8
request.setCharacterEncoding("UTF-8");
response.setCharacterEncoding("UTF-8");
//拿到编辑器的内容
String content = request.getParameter("editorValue");
//如果不为空
if(content != null){
//将内容设置进属性
request.setAttribute("content",content);
//转发到content.jsp
request.getRequestDispatcher("content.jsp").forward(request, response);
}else{
response.getWriter().append("内容为空!");
}
}
Content.jsp页面就简单使用EL表达式接收数据即可
Insert title here
${content }
运行index.jsp ,随便编辑一段文字提交
这时内容就已经传过来了。
3、配置图片路径
在没有配置图片上传路径的时候,添加一张图片时是显示不出来的
编辑utf8-jsp -> jsp -> lib -> 下的config.json文件
修改图片上传的路径
编辑utf8-jsp目录下的ueditor.config.js
在配置中加入编辑器的路径地址
配置完成之后重启toncat服务器并且运行index.jsp,编写一条图文信息提交
提交之后的结果:
查看图片保存路径可以在jsp中使用以下代码,即可得到工程编译后的路径
//图片保存的路径,可以到这个路径下查看
out.println(request.getRealPath(""));
%>
获取到了根目录位置
简单的配置以及使用就介绍到这里吧。
相关的编辑器配置信息可到 utf8-jsp目录下的ueditor.config.js文件中修改
%3cp%3e 修改 值 html,UEditor在JavaWeb中的应用相关推荐
- ueditor 编辑html文件名,UEditor编辑器自定义上传图片或文件路径的修改方法,ueditor修改方法...
UEditor编辑器自定义上传图片或文件路径的修改方法,ueditor修改方法 使用ueditor编辑器,附件默认在ueditor/php/upload/, 我的附件地址是网站根目录下/data/u ...
- 3、JavaWeb中Service层的作用、MyBatis的重要组件、mybatis-config.xml中的别名映射、properties配置、#{}和${}的区别、获取插入数据的主键值
文章目录 1.Service层的作用 2.MyBatis重要组件 Resources SqlSessionFactoryBuilder SqlSessionFactory SqlSession 针对上 ...
- 单一修改高程值lisp_浅谈AutoCAD中修改高程的四种方法
浅谈 AutoCAD 中修改高程的四种方法 摘 要: 在使用 AutoCAD 进行数字化成图工作中,经常遇到线划的标高不为零,及高程点的值与实地不符,需要对其进行修改等情况,结合实 际工作经验,简单介 ...
- python字典修改键所对应值_python - 将键值替换为相同字典中与不同键对应的值
我对Python脚本没有经验,但作为项目中的一项要求,我不得不构建代码,这是我遇到的问题 -python - 将键值替换为相同字典中与不同键对应的值 我有以下值的字典它来自一个UNIX脚本设置我已经在 ...
- tomcat temp 大量 upload 文件_问题:JavaWeb中实现文件上传的方式有哪些?
问题:JavaWeb中实现文件上传的方式有哪些? 上回我们说了下文件下载的方式有哪些,这次我们从不同的环境下简单来说说文件上传的方式有哪些. 文件上传的方式 Servlet2.5 方式 Servlet ...
- java-web中的分层1-dao
今天看了一下java-web中分层的相关的知识,其实对于我们初学者来说,一个好的分层结构不仅仅能让我们很好的清楚自己的逻辑,而且对以后项目的合作也是很重要的,其实我们在网上看一下有很多关于分层的例子, ...
- java web.xml 监听器_十:JavaWeb中的监听器(一)
2.1.基本概念 JavaWeb中的监听器是Servlet规范中定义的一种特殊类,它用于监听web应用程序中的ServletContext, HttpSession和 ServletRequest等域 ...
- JavaWeb中的乱码解决方法总结
JavaWeb中的乱码解决方法总结 get请求提交中文(参数放在url中) 原因:服务器获取解析url的时候不知道编码规则 修改Tomcat服务器的安装路径下的conf目录下的配置文件server.x ...
- JavaWeb中的Session、SessionListener、在线人数统计
2019独角兽企业重金招聘Python工程师标准>>> JavaWeb中的Session 在JavaWeb中使用HttpSession(以下简称session)对象来表示一个会话. ...
- 初学JavaWeb,前端css要不要了解一下啊?一文学会JavaWeb中css的简单应用
文章目录 一.设置CSS样式 二.CSS代码语法 三.CSS选择器 四.css文档手册分享 关于JavaWeb中的HTML:<你是不是已经超纲了?一文解决JavaWeb中要求的HTML,是什么样 ...
最新文章
- 浅析Linux IO
- [Silverlight]使用DoubleAnimation为对象添加动画效果
- php empty();和isset();
- [Java基础]IO流小结
- python断言失败_python异常处理、断言
- Vue 3 源码公布
- vue 后台管理系统-创建项目
- 登录验证和EasyUI的初识
- word 计算机内存不足,word文档保存提示内存不足怎么办
- html中sbsolute属性值,html中absolute
- ubuntu 22.04设置字体为Garuda(mac字体Lucida Grande的开源替代)
- 用excel解蓝桥杯(2018年第九届蓝桥杯A组)
- 2020届IC企业校招部分笔试题
- unity gpu instancing
- 前端技术探索 - 你不知道的JS 沙箱隔离
- 根据圆的面积公式计算圆周率
- Python二级考试试题汇总(史上最全)
- Django Web 官方 中文文档 开发手册
- Mysql联合索引失效,需注意索引的最左原则
- 工厂(Factory)模式
热门文章
- Win64 驱动签名
- 线代 006 克拉默法则 线性方程组求解
- dell服务器开启64位支持,dell服务器虚拟化开启(戴尔bios设置虚拟化)
- 经典网页设计:30个独具匠心的单页网站设计案例
- python中np是什么意思_python中np的作用是什么
- VS2015 LoadLibrary加载DLL失败的解决方案,GetLastError()返回值193
- php的seeder是什么,Laravel学习笔记之Seeder填充数据小技巧
- Android7.1.1新增Shortcuts快捷方式,让App更加快捷方便
- 《辛德勒的名单》观后感
- 2020 EBC徒步功课做好 好好工作心态,Android并发原理解析