富文本编辑器
思维导图
一、富文本编辑器
1.概述
富文本编辑器,Rich Text Editor, 简称 RTE, 是一种可内嵌于浏览器,所见即所得的文本编辑器,类似于 Microsoft Word 的编辑功能。
2.常用富文本编辑器
①ckeditor------------------------------------今日选择
②Kindeditor
③ueditor
④wangEditor
⑤SmartMarkUP
⑥Control.Editor
⑦EditArea
⑧Free Rich Text Editor
3.CKeditor的使用步骤
[步骤1] 官网https://ckeditor.com/ 下载-解压-引入
[步骤2]
<script type="text/javascript" src = "../ckeditor/ckeditor.js"></script>
<script type="text/javascript">
CKEDITOR.replace("ncontent");
</script>
富文本编辑器原图
SmartUpload上传文件
思维导图:
========================================
1.使用第三方上传插件:smartUpload
2.明确:
a.数据库表中的列中存的是文件路径;
图片也要传到服务器上(将本地文件传到服务器项目中,然后将路径存入表字段中)
3.步骤:
第一:在项目中导入jspsmartupload.jar文件包
第二:在<form>表单中添加表单属性:enctype="multipart/form-data"
第三:了解file类与smartupload类中的方法
======================================================
表单必须用enctype属性进行封装:
<form action="" method="post" enctype="multipart/form-data">
//表示表单将按照二进制的方式提交
在使用smartUpload时必须严格按照如上程序进行:
SmartUpload smart=new SmartUpload(); //实例化SmartUpload上传组件
smart.initialize(pageContext); //初始化上传操作
smart.upload(); //上传准备
smart.save("upload"); //将上传文件保存在upload文件夹中
2.限制文件的上传类型
允许上传类型:
samrt.setAllowedFilesList("gif,jpg,doc,rar");
不允许上传类型:
samrt.setDeniedFilesList("jsp,asp,php,aspx");
3.限制文件上传的大小
smart.setMaxFileSize(2*1024*1024);
4.设置字符编码
smart.setCharset("utf-8");
//设置字符编码(如果未设,当请求中含有中文时会报:java.lang.NullPointerException: charsetName),准备上传
5.混合表单
当一个表单使用了enctype封装后,其他的非文件类的表单控件的内容就无法通过request内置对象取得,此时必须通过SmartUpload类中提供的getRequest()方法取得全部的请求参数。
String uname=smart.getRequest().getParameter("uname");
注意:该句代码一定要在执行完upload()方法之后才可以使用
6.为上传文件自动命名
如果多个用户上传的文件名称一样,则肯定会发生覆盖的情况,为了避免这类问题,可以采用为上传文件自动命名的方式。为防止重名,自动命名可以采用如下的格式:
IP地址 + 时间戳 + 三位随机数
public String getIPTimeRand(){
//实例化StringBuffer对象,用来做文件名拼接
StringBuffer buf=new StringBuffer();
//获得本机的IP地址
InetAddress addr = InetAddress.getLocalHost();
ip=addr.getHostAddress().toString;//获得本机IP
address=addr.getHostName()toString;//获得本机名称
//获得当前时间戳
SimpleDateFormat date=new SimpleDateFormat("yyyyMMddHHmmssSSS");
date.format(new Date());
//获得一个3位数的随机数
Random r=new Random();
for(int i=0; i<3; i)
buf.append(r.nextInt(10));
}
return buf;
}
文件名得到了,我们需要得到上传文件的后缀名:getFileExt()
a. 得到上传文件名:
String file=smart.getFiles().getFile(0).getFileName();
//获得第一个上传文件
b. 得到上传文件的后缀名:
String ext=smart.getFiles().getFile(0).getFileExt();
//获得第一个上传文件的文件后缀
c. 拼凑文件名:
String fileName=getIPTimeRand()+"."+ext;
d. 由于此时要用新的文件名称保存上传文件,所以要通过smart.getFiles().getFile(0).saveAs()方法进行手工保存。具体代码:
smart.getFiles().getFile(0).saveAs(getServletContext().getRealPath("/")+"upload"+java.io.File.separator+fileName);
//file.saveAs(路径,上传方式);
7.批量上传
如要完成批量上传,则肯定需要循环的方式进行,那么就必须通过如下方法取得上传文件数量。
smart.getFiles().getCount();
<form>表单代码:
<form action="smartupload.jsp" method="post" enctype="multipart/form-data">
文件1:<input type="file" name="pic1"><br/>
文件2:<input type="file" name="pic2"><br/>
文件3:<input type="file" name="pic3"><br/>
<input type="submit" value="上传" >
<input type="reset" value="重置">
</form>
smartupload.jsp代码:
<%
SmartUpload smart=new SmartUpload();
smart.initialize(pageContext);
smart.upload();
for(int i=0; i<smart.getFiles().getCount(); i++){
smart.save("upload");
}
%>
================================================================
关于在servlet中写smartupload的问题:
如果fckeditor在servlet中怎么写?使用了JspFactory.getDefaultFactory()方法
<要注意抛异常>。
PageContext context = JspFactory.getDefaultFactory().getPageContext(this, request, response, null, true, 8*1024, true);
一共七个参数:
第一个参数是传递一个Servlet,在servlet中传递this就可以了;
第二个和第三个参数是request与response不多说明了;
第四个参数是发生错误后的url路径地址,如果没有可以键入null;
第五个参数是是否需要session,这里可以写入true;
第六个参数是缓存大小,我用了8*1024,也可以用JspWriter.DEFAULT_BUFFER;
第七个参数是是否需要刷新,键入ture;