富文本编辑器(UEditor)的使用
富文本编辑器(UEditor)
在平时开发Java Web项目的时候,往往会使用第三方插件来帮助我们更快的实现功能。
此文来自: 马开东云搜索 转载请注明出处 网址: http://makaidong.com
此文原标题: javaweb 集成UEditor 来源网址: http://makaidong.com/yrxperfect/7206_7923932.html
这里教大家使用百度开源的富文本编辑器(UEditor)来帮助我们更好的编写文本。
官网下载地址
http://ueditor.baidu.com/website/download.html
这里下载最新版的就可以了
解压出来是这样的
打开index.html的效果
好了 ,废话不多说,开始我们的正题。
1、配置编辑器环境
创建一个动态web工程
将解压出来的编辑器文件夹整个拷贝到WebContent
目录下
此时工程会报错,因为我们没有引用所需的jar包。
将utf8-jsp -> jsp->lib
目录下中的所有jar包拷贝到WEB-INF目录下的lib文件夹
中
在WebContent下创建一个index.jsp
的文件。
将utf8-jsp中的index.html
文件内容拷贝到index.jsp
注:使用插件时必须引入以下3个文件
<script type="text/javascript" charset="utf-8" src=" ueditor.config.js"></script>
<script type="text/javascript" charset="utf-8" src=" ueditor.all.min.js"> </script>
<script type="text/javascript" charset="utf-8" src=" lang/zh-cn/zh-cn.js"></script>
调用编辑器:
<script id="editor" type="text/plain" style="width:1024px;height:500px;"></script>
将引用js文件的相对路径补全
完成之后运行index.jsp或者右键工程运行
这样基本的配置就搭建好了。
2、获取编辑框的内容
我们来使用富文本编辑器随便写一些内容,然后点击获取内容
我们发现,在JavaScript中可以使用 editor.getContent()
获得整个p标签的内容,那我们怎么在java web中拿到内容呢?
回到index.jsp中
使用form表单将整个 编辑器包涵,并且加上用于提交表单的按钮
<body>
<div>
<form action="UeditorServlet">
<h1>完整demo</h1>
<script id="editor" type="text/plain" style="width:1024px;height:500px;"></script>
<input type="submit" value="提交"/>
</form>
</div>
<script type="text/javascript">
//实例化编辑器
//建议使用工厂方法getEditor创建和引用编辑器实例,如果在某个闭包下引用该编辑器,直接调用UE.getEditor('editor')就能拿到相关的实例
var ue = UE.getEditor('editor');
</script>
</body>
将多余的按钮以及js脚本都删除,保留一个实例化编辑器的方法
var ue = UE.getEditor('editor');
- 1
- 1
运行之后 编辑一段内容然后点击提交
http://localhost:8080/ueditor/index.jspeditorValue=%3Cp%3E%E6%88%91%E6%98%AF%E5%86%85%E5%AE%B9%3C%2Fp%3E
- 1
- 1
我们可以发现,在提交表单的时候数据是保存在editorValue
下的,知道原理之后我们就可以创建一个servlet来接收这个字段了
创建Servlet之后还需修改form表单中的action值
<form action="UeditorServlet" method="post">
- 1
- 1
UeditorServlet .Java中的doGet()
方法
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
request.setCharacterEncoding("UTF-8");
response.setCharacterEncoding("UTF-8");
String content = request.getParameter("editorValue");
if(content != null){
request.setAttribute("content",content);
request.getRequestDispatcher("content.jsp").forward(request, response);
}else{
response.getWriter().append("内容为空!");
}
}
Content.jsp页面就简单使用EL表达式接收数据即可
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>My JSP 'content.jsp' starting page</title>
</head>
<body>
<%
out.print(request.getRealPath(""));
%>
<div> ${content } </div>
</body>
</html>
运行index.jsp ,随便编辑一段文字提交
这时内容就已经传过来了。
3、配置图片路径
在没有配置图片上传路径的时候,添加一张图片时是显示不出来的
编辑utf8-jsp -> lib -> 下的config.json
文件
修改图片上传的路径 ()上传图片保存路径 去掉最前面的/
编辑utf8-jsp目录下的ueditor.config.js
在配置中加入编辑器的路径地址
配置完成之后重启toncat服务器并且运行index.jsp
,编写一条图文信息提交
提交之后的结果:
查看图片保存路径可以在jsp中使用以下代码,即可得到工程编译后的路径
<%
//图片保存的路径,可以到这个路径下查看
out.println(request.getRealPath("")); %>
- 1
获取到了根目录位置
简单的配置以及使用就介绍到这里吧。
相关的编辑器配置信息可到 utf8-jsp目录下的ueditor.config.js
文件中修改
富文本编辑器(UEditor)的使用相关推荐
- 百度富文本编辑器UEditor安装配置全过程
网站开发时富文本编辑器是必不可少的,他可以让用户自行编辑内容的样式然后上传到后台!下面我们来介绍如何安装使用百度富文本编辑器 一.下载并且设置百度富文本编辑器的样式 你可以去百度UEditor ...
- themyleaf 图片上传_springboot thymeleaf 整合 百度富文本编辑器UEditor进行图片上传
项目中需要使用到富文本编辑器,找来找去发现百度UEditor富文本编辑器在国内最为常用因此就尝试引入.编辑器官网是:http://ueditor.baidu.com/website/index.htm ...
- vue项目+富文本编辑器ueditor - 资源篇
资源地址: git源码 · 解说地址 git源码:源码下载地址 · [基于 vue-cli 2.x 的完整 DEMO] ueditor插件Demo演示地址 说明: 支持 vue-cli 2.x 支持 ...
- 富文本编辑器Ueditor实战(二)-图片上传
本文接前文富文本编辑器Ueditor实战(一),前文留了一个问题,就是图片上传功能无法使用,报后台配置错误的问题.那么应该如何配置图片上传功能呢?本文将使用jsp+tomcat的方式进行说明如何动态配 ...
- 百度富文本编辑器ueditor在https协议下无法正常插入动态地图
在浏览器https协议下,百度富文本编辑器ueditor有可能会无法正常插入动态地图.所谓"动态地图",就是在插入地图的时候,勾选右上角的"动态地图"选择框: ...
- 百度富文本编辑器ueditor支持上传mp3格式等音频文件的方法
百度富文本编辑器ueditor算得上比较强大的了,但是有一个比较令人难受的问题,就是不支持本地上传音频文件.ueditor自带的mp3功能是直接在百度音乐里面搜索加进去的,显而易见这个不是我们想要的, ...
- TP5.1框架中百度富文本编辑器UEditor的使用
在实际项目开发中最常使用到的工具之一就是富文本编辑器,使用富文本编辑器可以实现所见即所得的效果,且所有富文本编辑器里的内容(包括图片,视频,音乐等文件)全部可以带格式的存入数据库中且只需占用一个字段. ...
- java集成富文本编辑器UEditor
JAVA集成富文本编辑器UEditor 集成前说明 集成UEditor 一.UEditor下载 二.UEditor迁入项目 三.引入ueditor中的js 四.初始化UEditor 五.实现图片上传 ...
- 富文本编辑器——UEditor的使用——基础积累
富文本编辑器--UEditor的使用--基础积累 之前在做后台管理系统时,遇到了一个富文本编辑器的功能,用于新闻内容的编辑. 话不多说,直接上效果图: 全屏的效果及对应的功能菜单如下: 上面的菜单已经 ...
- Django下富文本编辑器Ueditor的配置和使用
1.前言 "人生苦短,我用Python",Python作为一门"万能"的脚本语言,深受各个技术层级的程序猿的喜爱,而Django作为最受欢迎的Python的We ...
最新文章
- 一言难尽,Jpa这个功能差点让我丢了工作
- python基础教程--代码集合(下)
- Jetbrains 系 IDE 编辑器的代码提示功能
- python 无法引入同级目录的方法_再见 virtualenv!K神教你轻松管理多个Python环境...
- 当程序员说“这代码写的可真烂”,他们的意思是“这烂代码不是我写的”。而当他们说这段代码有些“小问题”时,很可能这代码是他们自己写的...
- flask 允许内网访问
- 如何把文档扫描保存到Google Drive中
- 应用安全 - 操作系统安全 - Linux系统加固
- 专业音频测试软件应用比对,(精品文献)专业音频测试软件应用比对(升级版)_汤磊.pdf...
- RS485自动切换电路:数据收发原理
- python pygame实现简单的网游 1
- 多线程和高并发的区别
- iPhone照片备份与恢复
- Segmentation Measures
- 使用Transformer学习动态多层次的交通时空特征
- 2022当代科学技术前沿知识 课后测试
- 关闭Windows系统的应用程序或窗口的快捷键有哪些?
- 本世纪最好的NSA!
- GBase XDM 数据库ldapdelete命令讲解和示例分析
- MNIST | 基于朴素贝叶斯分类器的0-9数字手写体识别
热门文章
- js 获取url参数_小总结 - JS获取页面URL信息
- mysql_TCL语言(事务)
- idea jar包重新依赖_分布式架构系列:jar包依赖管理
- c语言i=5.6a=(int)i,(PSIM仿真)从零开始设计BOOST数字控制器
- Springboot的工作机制:2 @SpringBootApplication背后的秘密
- 嵌入式linux镜像制作,嵌入式Linux根文件系统制做步骤(笔记)
- dubbo k8s 服务发现_Dubbo-go 发布 1.5 版,朝云原生迈出关键一步
- 如何用.NET编写ActiveX 控件
- Selenium 2自动化测试实战5(模块调用)
- Ubuntu GitHub操作——使用仓库