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

Naraseny

已于 2022-05-14 22:53:37 修改

阅读量325

点赞数

分类专栏： web java JS 文章标签： javascript html html5

于 2022-05-14 22:50:28 首次发布

本文链接：https://blog.csdn.net/qq_62881798/article/details/124775725

版权

java 同时被 3 个专栏收录

45 篇文章 0 订阅

订阅专栏

31 篇文章 1 订阅

订阅专栏

web

24 篇文章 0 订阅

订阅专栏

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

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

CKEDITOR.replace()配置：

config.js文件配置：

SmartUpload插件上传文件

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>
 
		<!-- 1.点击获取被选中的内容 -->
		<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);

Naraseny

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
CKeditor富文本的使用与插件SmartUpload上传图片

CKeditor富文本编辑器的使用所需js 文件文件密码:897z效果图：富文本编辑器是什么？富文本编辑器（Rich Text Editor，RTE）是一种可内嵌于浏览器，所见即所得的文本编辑器。它提供类似于Office Word 的编辑功能，方便那些不太懂HTML用户使用，富文本编辑器的应用非常广泛，它的历史与图文网页诞生的历史几乎一样长。常见的富文本编辑器有？ ckeditor（***） Kindeditor ueditor wang..
复制链接

扫一扫