CKeditor富文本的使用与插件SmartUpload上传图片

嘴强程序员

已于 2022-04-10 23:31:16 修改

阅读量621

点赞数

文章标签： javascript jquery eclipse java oracle

于 2022-04-10 23:25:19 首次发布

本文链接：https://blog.csdn.net/qq_62898618/article/details/124088212

版权

CKeditor富文本编辑器的使用

所需js 文件文件密码:897z

效果图

概述

富文本编辑器（Rich Text Editor，RTE）是一种可内嵌于浏览器，所见即所得的文本编辑器。它提供类似于Office Word 的编辑功能，方便那些不太懂HTML用户使用，富文本编辑器的应用非常广泛，它的历史与图文网页诞生的历史几乎一样长。

常见的富文本编辑器有

ckeditor（***）

Kindeditor

ueditor

wangEditor

SmartMarkUP

Control.Editor

EditArea

Free Rich Text Editor

CKeditor介绍

ckeditor是一款由javascript编写的富文本网页编辑器，它可以填写文字、插入图片、视频、Excel等富媒体信息，也可以在源码方式下填写内容，在各个网站中应用非常广泛。

快速入门

1.进入官网，下载full版本（这个代表的是使用全部功能，如果是simple或者standed，可能会有些功能不能用）

2.解压之后得到如下的文件目录【其中核心文件是ckeditor.js（必须），配置文件是config.js（可选）】

3.解压后复制到工程的webContent目录下

4.在指定JSP页面引用CKEDITOR的JS文件并且替换TEXTAREA标签
<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>

<script src="ckeditor/ckeditor.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
	window.onload = function(){
		//根据textarea标签的name属性替换成富文本编辑器
		CKEDITOR.replace("ncontent");
	}
</script>
</head>
<body>
	<textarea name="ncontent"></textarea>
</body>
</html>
CKEDITOR.replace()配置
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="ckeditor/ckeditor.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			window.onload = function() {
				CKEDITOR.replace('ncontent', {
					toolbar: 'Basic',
					uiColor: '#9AB8F3',
					language: 'zh-cn',
					width: '800',
					height: '200',
					toolbar: 'Full'
				});
			}
		</script>
	</head>
	<body>
		<textarea name="ncontent" id="ncontent">12312</textarea>

		
		<button id="btn" type="button">test1</button>
	</body>
</html>
config.js文件配置

需要可下载文件

富文本编辑器.zip - 蓝奏云

SmartUpload插件上传文件

所需文件 jar包 smartupload.zip - 蓝奏云

[问题]图片上传是到数据库还是到服务器？
   文件路径保存到数据库中，而把文件上传到服务器【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);

拼接在url网址上的参数还是用request对象 form

中的input或别的值用Request req = su.getRequest();

----sname没有加载进去
【解决方式】
Request req = su.getRequest();
String sname = req.getParameter("sname");
out.print(uname);