ckeditor与jsp集成、用js获取内容，已解决火狐不兼容的问题
程序员文章站
2022-07-14 17:05:30
...
非全部原创，部分内容来自：
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;
};