JavaWeb(CKeditor&SmartUpload)

最新推荐文章于 2024-05-14 23:27:17 发布

顾轻舟。

最新推荐文章于 2024-05-14 23:27:17 发布

阅读量1k

点赞数

分类专栏： JavaWeb 文章标签： web

本文链接：https://blog.csdn.net/qq_64001795/article/details/124082435

版权

本文详细介绍了如何在JavaWeb中使用CKeditor作为富文本编辑器，以及配合SmartUpload实现文件上传。CKeditor的使用步骤包括下载、配置和在JSP中引入。SmartUpload的文件上传过程包括设置上传类型、大小限制、字符编码等，同时解决了混合表单中非文件类表单控件的获取问题。

摘要由CSDN通过智能技术生成

5、CKEDITOR.replace()配置

1.3 表单必须用enctype属性进行封装：

案例：文件上传

2、下载文件的方法：

3、关于在servlet中写smartupload的问题：

4、注意事项：

一、富文本编辑器

1、概念：

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

2、常用的富文本编辑器

①ckeditor----------------------今日选择
②Kindeditor
③ueditor
④wangEditor
⑤SmartMarkUP
⑥Control.Editor
⑦EditArea
⑧Free Rich Text Editor

3、CKeditor介绍

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

4、CKeditor的使用步骤

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

https://ckeditor.com

在官网内下载解压引入

(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>
<!-- 引入ckeditor.js  -->
<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>

5、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>

6、config.js文件配置

下面是config.js文件里的一些常用设置
CKEDITOR.editorConfig = function( config ) {
    // Define changes to default configuration here. For example:
    // config.language = 'fr';
    // config.uiColor = '#AADC6E';
  	// 介面语言，默认为 'en'
	config.language = 'zh-cn';
    // 设置宽高
    config.width = 400;
    config.height = 400;
    // 编辑器样式，有三种：'kama'（默认）、'office2003'、'v2'
    config.skin = 'v2';
    // 背景颜色
    config.uiColor = '#FFF';


    // 工具栏（基础'Basic'、全能'Full'、自定义）plugins/toolbar/plugin.js
    config.toolbar = 'Basic';
    config.toolbar = 'Full';

    这里可以用下面方式自定义工具栏，然后用上面方式调用。参照下面config.toolbar_Full ，写一个config.toolbar_XXX=[具体工具栏配置]；

    然后就可以通过config.toolbar="XXX";调用自己配置的工具栏

    注意，自定义的工具栏名是有区分大小写的，Basic与BASIC是不一样的。

    config.toolbar_Full = [
    ['Source','-','Save','NewPage','Preview','-','Templates'],
    ['Cut','Copy','Paste','PasteText','PasteFromWord','-','Print', 'SpellChecker', 'Scayt'],
    ['Undo','Redo','-','Find','Replace','-','SelectAll','RemoveFormat'],
    ['Form', 'Checkbox', 'Radio', 'TextField', 'Textarea', 'Select', 'Button', 'ImageButton', 'HiddenField'],
    '/',
    ['Bold','Italic','Underline','Strike','-','Subscript','Superscript'],
    ['NumberedList','BulletedList','-','Outdent','Indent','Blockquote'],
    ['JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock'],
    ['Link','Unlink','Anchor'],
    ['Image','Flash','Table','HorizontalRule','Smiley','SpecialChar','PageBreak'],
    '/',
    ['Styles','Format','Font','FontSize'],
    ['TextColor','BGColor']
    ];


    //工具栏是否可以被收缩
    config.toolbarCanCollapse = true;
    //工具栏的位置
    config.toolbarLocation = 'top';//可选：bottom
    //工具栏默认是否展开
    config.toolbarStartupExpanded = true;
    // 取消 “拖拽以改变尺寸”功能 plugins/resize/plugin.js
    config.resize_enabled = false;
    //改变大小的最大