JSP页面使用富文本控件ckeditor提交表单数据

最新推荐文章于 2021-08-29 21:43:26 发布

忙碌的布谷鸟

最新推荐文章于 2021-08-29 21:43:26 发布

阅读量1w

点赞数 1

分类专栏： HTML+JavaScript Java 文章标签： jsp html import java button action

本文链接：https://blog.csdn.net/guoquanyou/article/details/6798748

版权

Java 同时被 2 个专栏收录

52 篇文章 0 订阅

订阅专栏

HTML+JavaScript

37 篇文章 0 订阅

订阅专栏

ckeditor环境搭建，请参考 JSP中使用CKEditor3.6入门教程

JSP页面使用富文本控件ckeditor提交表单数据

JSP页面使用富文本控件ckeditor自定义样式

JSP使用ckeditor和ckfinder实现富文本及上传功能

表单页面代码如下：

<%@ page language="java" import="java.util.*" pageEncoding="gbk"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
	<head>
		<script type="text/javascript"
			src="<%=request.getContextPath()%>/ckeditor/ckeditor.js"></script>
		<script type="text/javascript">
	//<![CDATA[   
	CKEDITOR.replace('content', {
		toolbar : 'Full',
		skin : 'kama'
	});
	//]]>  
	function test() {
		//JavaScript判空，如果确定
		var editor_data = CKEDITOR.instances.content.getData();
		if(editor_data==null||editor_data==""){
			alert("数据为空不能提交");
		}else{
			if(confirm(editor_data)){
			document.myform.submit();
			}
		}		
	}
</script>
		<title>ckeditor富文本测试-- by jCuckoo</title>
	</head>
	<body>
	<form action="doTest.jsp" name="myform" method="post">
		<textarea class="ckeditor" cols="80" id="content" name="content"
			rows="10">   
         CKEditor Test......(此处的内容会在编辑器中显示)--by jCuckoo</textarea>
     <input type="button" οnclick="test()" value="提交数据"/>
     </form>
	</body>
</html>

效果如下：

点击提交按钮时，进行非空验证，如果不是空，弹出确认窗口。

处理数据页面doTest.jsp

<%@ page language="java" import="java.util.*" pageEncoding="gbk"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>获取传递的数据 -- by jCuckoo</title>
  </head>
  <body>
  	<%request.setCharacterEncoding("gbk"); %>
    <%=request.getParameter("content") %>
  </body>
</html>

提交后，数据显示效果如下：

忙碌的布谷鸟

关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
2
评论
JSP页面使用富文本控件ckeditor提交表单数据

ckeditor环境搭建，请参考 JSP中使用CKEditor3.6入门教程 JSP页面使用富文本控件ckeditor提交表单数据JSP页面使用富文本控件ckeditor自定义样式JSP使用ckeditor和ckfinder实现富文本及上传功能表
复制链接

扫一扫