JavaWEB（CKeditor&SmartUpload）

富文本编辑器&文件上传与下载

一、富文本编辑器

            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>

              4.效果图

 二、SmartUpload插件

[问题]：图片上传是到数据库还是到服务器？

文件路径保存到数据库中，而把文件上传到服务器【tomcat】的硬盘中。 

[使用步骤]

①环境准备：使用SmartUpload组价需要在项目中引入jspsmartupload.jar文件
    --将jspsmartupload.jar添加到web-inf\lib目录下

②需要设置表单的enctype属性--设置enctype属性后表单必须以post方式提交。
    --<form enctype = "multipart/form-data" method = "post">

③jsp smartupload.jar包中的File类
    --封装了单个上传文件所包含的所有信息
    saveAS() | isMissing() | getFieldName() | getFileName()

案例：文件上传

案例：文件上传
<form action = "doAddFile.jsp" enctype="multipart/form-data" method = "post">
		<input type = "file" name = "file"/>
		<input type = "submit" value = "上传"/>	
</form>

<%
	//声明并实例化SmartUpload对象
	SmartUpload su = new SmartUpload();
	su.initialize(pageContext);//初始化SmartUpload对象
	
	//定义文件上传类型
	String allowed = "gif,jpg,doc,rar";
	//定义不许上传类型
	String denied = "jsp,asp,php,aspx,html,htm,exe,bat";
	//设置上传文件大小
	int file_size = 10*1024*1024;
	File file = null;
	try{
		//定义允许上传文件类型   
		su.setAllowedFilesList(allowed);
		//不允许上传文件类型   
		su.setDeniedFilesList(denied);		
		//单个文件最大限制   
		su.setMaxFileSize(file_size);						
		su.setCharset("utf-8");
		//开始文件上传
		su.upload();//服务器的内存中
		
		//得到第一个上传的文件
		//System.out.println(su.getFiles().getSize());
		file = su.getFiles().getFile(0);
		String path = null;
		if(!file.isMissing()){//如果上传了文件
			path = "upload\\";//文件保存的路径
			path+=file.getFileName();//加上了文件名
			file.saveAs(path, SmartUpload.SAVE_VIRTUAL);
		}
		System.out.println(path);
		
	}catch(Exception e){
		e.printStackTrace();
	}


%>

效果图

点击选择文件后

 

 使用文件上传时，表单中其他输入项怎么获取

表单其它输入项怎么获取
姓名：<input type = "text" name = "sname"/>
获取sname
String sname = request.getParameter("sname");
out.print(sname);
----sname没有加载进去
【解决方式】
Request req = su.getRequest();
String sname = req.getParameter("sname");
out.print(uname);