`

Ckeditor简单的数据提交

 
阅读更多

主要在两个jsp页面之间的提交

index.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="ckeditor/ckeditor.js"></script>
<script type="text/javascript">
	window.onload = function() {
		CKEDITOR.replace('editor');
	};
</script>
</head>
<body>
	<form action="show.jsp" method="post">
		<textarea rows="" cols="" name="editor"></textarea>
		<br /> <input type="submit" value="提交"><input type="reset">
	</form>
</body>
</html>

 

展示显示内容的jsp页面

show.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>
	<%
		request.setCharacterEncoding("UTF-8");
		String data = request.getParameter("editor");
	%>
	<%=data%>
</body>
</html>

 

config.js

/*
 * Copyright (c) 2003-2010, CKSource - Frederico Knabben. All rights reserved.
 * For licensing, see LICENSE.html or http://ckeditor.com/license
 */

CKEDITOR.editorConfig = function(config) {
	// Define changes to default configuration here. For example:
	// config.language = 'fr';
	// config.uiColor = '#AADC6E';
	config.language = 'zh-cn';
	config.filebrowserBrowseUrl = 'ckeditor/uploader/browse.jsp';
	config.filebrowserImageBrowseUrl = 'ckeditor/uploader/browse.jsp?type=Images';
	config.filebrowserFlashBrowseUrl = 'ckeditor/uploader/browse.jsp?type=Flashs';
	config.filebrowserUploadUrl = 'ckeditor/uploader/upload.jsp';
	config.filebrowserImageUploadUrl = 'ckeditor/uploader/upload.jsp?type=Images';
	config.filebrowserFlashUploadUrl = 'ckeditor/uploader/upload.jsp?type=Flashs';
	config.filebrowserWindowWidth = '640';
	config.filebrowserWindowHeight = '480';
	config.toolbar_A = [
			['Source'],
			['Cut', 'Copy', 'Paste', 'PasteText', 'PasteFromWord', '-',
					'Print', 'SpellChecker', 'Scayt'],
			['Undo', 'Redo', '-', 'Find', 'Replace', '-', 'SelectAll',
					'RemoveFormat'],
			'/',
			['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'],
			['Maximize', 'ShowBlocks']];
	config.toolbar = 'A';
};

 

还有上传功能实现,可以参照前面的Ckeditor上传功能

 

设置完成后,加入一些上传的加包,就可以实现效果了

 

分享到:
评论
1 楼 jps7777777 2013-11-14  
        fdsgfds

相关推荐

    含有CKEditor的表单如何提交

    本文将详细介绍如何在表单中正确处理含有CKEditor的字段,确保数据能够完整地传送到服务器。 首先,理解CKEditor的工作原理至关重要。CKEditor实际上是在页面上创建了一个iframe,用于渲染编辑区域。当用户在编辑器...

    jsp中使用ckeditor

    总结起来,集成CKEditor到JSP项目中需要完成导入相关库、创建编辑器实例、配置编辑器、处理提交数据、处理响应和错误等步骤。通过这些操作,我们可以为用户提供一个功能强大且易于使用的富文本编辑界面。同时,不要...

    ckeditor插入数据库例子

    1. **捕获内容**:当用户完成编辑并提交时,我们需要从CKEditor获取编辑的内容。这通常通过JavaScript的`CKEDITOR.instances.editor1.getData()`函数实现,其中`editor1`是CKEditor实例的ID。 2. **数据预处理**:...

    CKEditor 3.6.2中文文档

    - **服务器端处理**: `name`属性用于标识`&lt;textarea&gt;`元素,以便服务器端代码能够正确识别和处理提交的数据。 #### 六、总结 CKEditor 3.6.2是一款功能强大且易于使用的所见即所得编辑器。通过本文介绍的知识点,...

    ckeditor demo

    下面我们将详细探讨如何在Java Web项目中简单地使用CKEditor。 首先,你需要在项目中引入CKEditor的资源。这通常包括JavaScript库和相关的CSS样式文件。你可以从CKEditor的官方网站下载最新版本,或者通过CDN链接...

    ckeditor-java-3.6.2

    在Java环境中,CKEditor通过JavaScript与服务器端交互,实现数据的提交和接收,广泛应用于内容管理系统、论坛、博客等Web应用中。CKEditor 3.6.2是该编辑器的一个特定版本,它在前一版本的基础上进行了优化和改进,...

    ckeditor-java-3.6.4.zip

    - Java集成:虽然CKEditor主要是JavaScript实现,但可以通过Java在服务器端处理CKEditor提交的数据,例如使用Java Servlet或Spring MVC框架来接收和处理编辑器内容。 - Java API:CKEditor可以与Java应用进行交互...

    ckeditor4音频视频上传自定义插件

    3. **文件上传处理**:上传音频或视频文件通常涉及到前端的文件API,如`FileReader`用于预览本地文件,`FormData`用于打包文件数据,以及`XMLHttpRequest`或现代的`fetch` API进行异步请求。我们需要构建一个表单...

    C# ckeditor 用法

    4. **处理CKEditor的提交数据** - 当用户在CKEditor中输入内容并提交表单时,你需要获取编辑器中的HTML内容。这可以通过JavaScript的`CKEDITOR.instances.editor1.getData()`实现。 - 在C#服务器端,你可以使用`...

    vueckeditor是一个用于Vuejs2的Ckeditor编辑器

    Vue-ckeditor是将Ckeditor与Vue.js 2结合的插件,它使得在Vue项目中集成高级文本编辑功能变得简单。 Vue-ckeditor的主要知识点包括: 1. **安装**:首先,你需要通过npm或yarn在项目中安装vue-ckeditor。通常,...

    CKEditor 上传文件(Servlet实现)

    在CKEditor的文件上传场景中,Servlet将接收编辑器发送的文件数据,并将其保存到服务器的指定位置。 1. **CKEditor配置**: - 在CKEditor的配置文件(config.js)中,我们需要设置允许上传的文件类型、最大文件...

    ckeditor_4.1.2_standard+ckeditor_aspnet_3.6.4

    CKEditor ASP.NET 版本为 .NET 开发者提供了一种简便的方式将 CKEditor 集成到他们的 ASP.NET 项目中,使得用户可以在Web表单上进行富文本编辑,同时保持服务器端的控制和数据处理能力。 集成 CKEditor ASP.NET,...

    ckeditor_4.8.0 asp.net源码

    同时,你还需要考虑服务器端的数据处理,如接收编辑器提交的内容,进行安全检查,防止XSS攻击,并将其持久化到数据库中。此外,如果需要使用到上传功能,还需要配置文件上传的处理逻辑和服务器的临时目录。 总的来...

    django-ckeditor-master.zip

    CKEditor通过JavaScript API进行交互,可以轻松地与你的后端进行数据同步。在上面的HTML代码中,`CKEDITOR.replace('my-editor')`初始化了ID为`my-editor`的textarea为CKEditor实例。富文本内容会自动与`name=...

    net ckeditor 带视频上传

    在.NET项目中,CKEditor可以通过JavaScript API与C#或VB.NET后端代码进行交互,实现数据的提交和处理。 2. **.NET集成**:将CKEditor集成到.NET项目中,一般需要在ASP.NET页面中引用CKEditor的JavaScript库,然后在...

    ckeditor3.2编译器

    5. **事件监听**:利用ckeditor的事件系统,可以监听编辑器的各种行为,如内容更改、提交前的验证等。 6. **数据交互**:通过API获取或设置编辑器内容,与服务器进行数据交换。 在提供的`ckeditor用法.txt`文件中,...

    ckeditor的用法以及DLL

    用户可以通过CKEditor输入评论内容,前端通过AJAX将内容提交到服务器,服务器存储评论并在页面上展示。 总结,CKEditor是一个强大且灵活的富文本编辑器,通过DLL文件可以更好地集成到Windows环境下的应用程序中。...

    ckeditor富文本编辑器

    CKEditor就像一个在你网页中的文本区域(textarea)一样工作,它提供了一个简单易写的用户界面、版式和丰富的文字输入区域。但用文本区域要实现同样的效果,并不容易,它需要用户输入html代码。 但是,实际上,...

    CKEditor3.53_Finder_for_java2.1整合所有文件

    3. **创建服务器端接口**:利用Finder for java2.1提供的Java API,创建接收和处理CKEditor数据的服务器端接口。 4. **交互逻辑**:在客户端,CKEditor会将用户编辑的内容以HTTP请求的形式发送到服务器;服务器接收...

    ckeditor实例

    CKEditor编辑的内容是存储在内存中的,当需要保存或加载数据时,可以使用`getData()`和`setData()`方法。例如,当用户提交表单时,可以获取编辑器中的内容: ```javascript var editorContent = CKEDITOR.instances....

Global site tag (gtag.js) - Google Analytics