JavaWEB之(CKeditor插件&SmartUpload组件)

1.CKeditor插件

下载官方网站：WYSIWYG HTML Editor with Collaborative Rich Text Editing

富文本编辑器：

很多小伙伴想知道富文本编辑器长什么样？小伙伴们，如下图哦。

 使用步骤：
            1.进入CKeditor官网下载（Full版本）
            2.将下载的文件解压后  复制到webContent根目录下
            3.将指定的JSP页面中通过script标签引入插件js文件
            4.找到页面中指定的textarea标签  设置name属性和id属性
            5.编写脚本（JS），通过CKEDITOR对象（该对象来源于ckeditor.js中）调用replace方法
                来将textarea标签替换成富文本编辑器  【 根据name属性来进行替换的】

注意事项：通过富文本编辑器所保存的内容  都会携带对应样式标签

下面是小编简记的步骤，有兴趣的小伙伴可以参考一下。

富文本编辑器步骤：
1.下载
2.解压
3.引入
4.设置texttarea
5.替换

案例：

需求：利用CKeditor插件来将HTML的textarea替换成富文本编辑器风格 

<form action = "success.jsp" method = "post">
		<textarea name = "ncontent" id = "ncontent">
		
		
		</textarea>
		<input type = "submit" value = "跳转"/>
	</form>
	
	<script type="text/javascript">
	CKEDITOR.replace('ncontent', {
		toolbar: 'Basic',//设置基础工具栏
		uiColor: '#9AB8F3',//颜色
		language: 'zh-cn',//语言
		width: '800',//宽度
		height: '200',//高度
		toolbar: 'Full'//工具栏  full  全部
});

跳转的sucees.jsp页面：

<%
		request.setCharacterEncoding("UTF-8");
		String ncontent = request.getParameter("ncontent");
		//System.out.println(ncontent);
	%>

2.文件上传

SmartUpload组件：

 

    文件上传步骤：

（1）实例化组件SmartUpload  拿到钥匙
（2）调用初始化的方法initialize  来激活该组件
（3）可以省略：设置对应限制方法

（4）调用upload方法暂时将文件上传到服务器内存上
（5）根据所选中的文件得到对应的文件名称拼接到指定的路径下进行服务器的本地保存
        File类中的方法

下面是小编简记的步骤，有兴趣的小伙伴可以参考一下。

 文件上传步骤：
1.实例化（组件SmartUpload）
2.激活拿到钥匙后（方法initialize）
3.写入内存（upload方法）
4.保存服务端

上传页面

<form enctype="multipart/form-date" action="doFileUpload.jsp"  method="post">
账号：<input type='text' name='username'>
<input type='file' name='myFile'>
<input type='submit' value='文件上传'>

 文件上传加载页面

<%
		SmartUpload su = new SmartUpload();
		//pageContext 内置对象之一 代表当前页面
		su.initialize(pageContext);

		//可以省略：设置对应限制方法
		su.setAllowedFilesList("jpg,png,jpeg");//允许上传的文件类型
		su.setDeniedFilesList("doc,avi,mp4");//禁止上传的文件类型

		//设置组件上传文件时的编码格式
		su.setCharset("utf-8");

		//调用upload方法写入服务器内存上
		su.upload();
		//su.getFiles() 获取一组文件
		File file = su.getFiles().getFile(0);

		//定义一个变量保存当前服务器中项目的路径
		String path = "upload//";

		if (!file.isMissing()) {//选中文件了
			//想要将图片保存到服务器本地中
			path += file.getFileName();
		}
		//最终保存到服务器本地中
		//out.println(path);//path.jpg
		file.saveAs(path, SmartUpload.SAVE_AUTO);

		//根据pageContext获取当前项目的根目录
		//String path = pageContext.getRequest().getServletContext().getContextPath();

		/*
		 通过request内置对象获取输入项  null
				
				该表单上有文件上传
				
				必须要通过smartupload组件中提供的request对象获取
		*/

		//根据smartupload组件获取request对象
		Request rq = su.getRequest();
		//获取用户名
		String username = rq.getParameter("username");
		out.println("username=" + username);
		//运行结果：username=admin
	%>

文件上传保存的路径：

File类及方法：

saveAs(String destFilePathName)	将文件保存，参数destFilePathName是保存的文件名
isMissing( )	判断用户是否选择了文件，即对应表单项是否为空，返回值为boolean类型
public String getFiledName( )	获取表单中当前上传文件所对应的表单项的名称
public String getFileName( )	获取上传文件的文件名称，不包含路径

 SmartUpload类及方法：

public final void initialize(PageContext pageContext) 执行上传和下载的初始化工作，必须实现

public int save(String pathName) 指定允许上传的文件扩展名，接收一个扩展名列表，以逗号分隔

public void setMaxFileSize(long filesize) 设定每个文件允许上传的最大长度

public  void setTotalMaxFileSIze(long totalfilesize)设定允许上传文件的总长度