简单的的fckeditor学习入门,只供自己参考,以后再补!(最好的学习方法就是看文档)
1.实现所有的Node节点都可以编辑,及fckeditor部署。
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
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>CKEditor Classic Editing Sample</title>
<!-- Make sure the path to CKEditor is correct. -->
<script src="ckeditor/ckeditor.js"></script>
</head>
<body>
<div id="tt" contenteditable="true">
<h1>Inline Editing in Action!</h1>
</div>
<script>
// Turn off automatic editor creation first.
CKEDITOR.disableAutoInline = true;
CKEDITOR.inline( 'tt' );
</script>
<form action="test_11.jsp">
<textarea name="content"></textarea>
<input type="submit" name="tijiao" value="提交"/>
</form>
<script type="text/javascript">
CKEDITOR.replace('content',{customConfig : '/fk/ckeditor/forum_config.js'} );
</script>
</body>
</html>
2.JSP页面中使用标签
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib uri="http://ckeditor.com" prefix="ckeditor" %>
<%
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>My JSP 'test_2.jsp' starting page</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">
-->
</head>
<body>
<form action="sample_posteddata.jsp" method="get">
<p>
<label for="editor1">Editor 1:</label>
<textarea cols="80" id="editor1" name="editor1" rows="10"></textarea>
</p>
<p>
<input type="submit" value="Submit" />
</p>
</form>
<ckeditor:replace replace="editor1" basePath="/fk/ckeditor/" />
</body>
</html>
3.自定义标签,及函数调用
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib uri="http://ckeditor.com" prefix="ckeditor" %>
<%@ page import="com.ckeditor.samples.*"%>
<%
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>My JSP 'test_2.jsp' starting page</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">
-->
</head>
<body>
<form action="sample_posteddata.jsp" method="get">
<p>
<label for="editor1">Editor 1:</label>
<textarea cols="80" id="editor1" name="editor1" rows="10"></textarea>
</p>
<p>
<input type="submit" value="Submit" />
</p>
</form>
<ckeditor:replace replace="editor1" basePath="/fk/ckeditor/"
config="<%= ConfigurationHelper.createConfig() %>"
events="<%= ConfigurationHelper.createEventHandlers() %>" />
</body>
</html>
package com.ckeditor.samples;
import java.util.ArrayList;
import java.util.List;
import com.ckeditor.CKEditorConfig;
import com.ckeditor.EventHandler;
import com.ckeditor.GlobalEventHandler;
public class ConfigurationHelper {
public static CKEditorConfig createConfig() {
CKEditorConfig config = new CKEditorConfig();
List<List<String>> list = new ArrayList<List<String>>();
List<String> subList = new ArrayList<String>();
subList.add("Source");
subList.add("-");
subList.add("Bold");
subList.add("Italic");
list.add(subList);
config.addConfigValue("toolbar", list);
config.addConfigValue("width","500");
return config;
}
public static EventHandler createEventHandlers() {
EventHandler handler = new EventHandler();
handler.addEventHandler("instanceReady","function (ev) { alert(\"Loaded: \" + ev.editor.name); }");
return handler;
}
public static GlobalEventHandler createGlobalEventHandlers() {
GlobalEventHandler handler = new GlobalEventHandler();
handler.addEventHandler("dialogDefinition","function (ev) { alert(\"Loading dialog window: \" + ev.data.name); }");
return handler;
}
}
4.表单提交及获得值
<form action="test_11.jsp">
<textarea name="content"></textarea>
<input type="submit" name="tijiao" value="提交"/>
</form>
<script type="text/javascript">
CKEDITOR.replace('content',{customConfig : '/fk/ckeditor/forum_config.js'} );
</script>
<body>
This is my JSP page. <br>
<%
String content=request.getParameter("content");
out.println(content);
System.out.println(content);
%>
</body>