ckeditor与jsp集成、用js获取内容，已解决火狐不兼容的问题

669341085

浏览: 300531 次
性别:
来自: 成都

最近访客更多访客>>

lwjcanon

xiaohei445_qq

javaloving

1621326529

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

ckeditor

JSP jQuery JavaScript CSS ASP.net

非全部原创，部分内容来自：

http://www.icediary.net/article.asp?id=268

一、集成ckeditor

jsp文件

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib uri="/struts-tags" prefix="s"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    
    <title>发表话题</title>
    
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="This is my page">
	<!--
	<link rel="stylesheet" type="text/css" href="styles.css">
	-->
	<!-- 加载jquery -->
	<script type="text/javascript" src="plugin/jquery/jquery-1.4.2.min.js"></script>
	<!-- 加载ckeditor -->
	<script type="text/javascript" src="<%=basePath%>/plugin/ckeditor/ckeditor.js"></script>
	<!-- 加载自定义js -->
	<script type="text/javascript" src="js/bbs/publishTopic.js"></script>
	
  </head>
  
  <body>
  	<table>
  		<tr>
  			<td width="30%">
  				
  			</td>
  			<td width="70%">
  				
  			</td>
  		</tr>
  		<tr>
  			<td>
  				
  			</td>
  			<td>
  				<s:form name="pubContent" method="POST">
    				<s:textfield label="标题" id="topicTitle" name="topicTitle" size="80%"></s:textfield>
    				<s:textarea name="topicContent" id="topicContent" cols="100" rows="8" style="width:700px;height:200px;visibility:hidden;"></s:textarea>
    				<s:submit value="发表" onclick="return check();"></s:submit>
    			</s:form>
  			</td>
  		</tr>
    </table>
  </body>
</html>

publishTopic.js

$(document).ready(function initPage(){
	showEditor();
});

//加载编辑器ckeditor
function showEditor()
{
	CKEDITOR.replace( 'topicContent' );
}

//验证是否为空
function check()
{
	//验证标题
	var title=$("#topicTitle").val();
	if(null==title||""==title){
		alert("请您先输入话题标题！");
		return false;
	}
	
	//验证ckeditor是否为空,topicContent是textarea的name
	var content=CKEDITOR.instances.topicContent.getData();
	
	//如果是火狐浏览器
	function trim(str)
	{
    	return str.replace(/(^\s*)|(\s*$)/g,"");
	}//去掉空格
    content=content.replace("<br />","");
    content=content.replace("<br>","");
    content=trim(content);
	   
	if(null==content||""==content){
		alert("请你先输入话题内容！")
		return false;
	}
}

常用的一些配置，写在ckeditor的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 = 'ch';
	// config.uiColor = '#AADC6E';
	config.language = 'zh-cn';
	//config.skin = 'v2';
	//config.toolbar = 'Basic';
	//添加字体
	config.font_names = '宋体/宋体;黑体/黑体;仿宋/仿宋_GB2312;楷体/楷体_GB2312;隶书/隶书;幼圆/幼圆;'+ config.font_names ;
	// 当提交包含有此编辑器的表单时，是否自动更新元素内的数据
    config.autoUpdateElement = true;
};

分享到：