CKEditor 3.6入门--在 jsp 中通过自定义标签调用
2012-12-03 21:57
465 查看
IT程序员开发必备-各类资源下载清单,史上最全IT资源,个人收藏总结!
Developer's Guide : http://docs.cksource.com/CKEditor_3.x/Developers_Guide----Java Integration Guide :
CKEditor for Java Integration Guide
Adding Tag Library (ckeditor-java-core)
When you want to add the CKEditor library, you can choose between using Maven and adding it manually.Using Maven2
If your application uses Maven, you can add the following dependency to yourpom.xmlfile:
<dependency> <groupId>com.ckeditor</groupId> <artifactId>ckeditor-java-core</artifactId> <version>3.x.y</version> </dependency>
Please note that
3.x.ydenotes the artifact version, like
<version>3.6</version>.Since CKEditor releases are added to the central Maven repository, the specified version should be downloaded automatically.
Without Maven
If you do not use Maven, you have to add the CKEditorjarlibrary manually. Go to the CKEditor download site, download the
ckeditor-java-core-3.x.y*.jarfile, and put it in your
/WEB-INF/libdirectory.
*Please note that
3.x.ydenotes the version of a CKEditor release.
Using the Tag on the Page
To start using<ckeditor>tags in your JSP page, you need to declare the CKEditor tag library inside it:
<%@ taglib uri="http://ckeditor.com" prefix="ckeditor" %>
CKEditor replaces the HTML
textareaelement(s) with its instance(s). Unless you are using the
<ckeditor:editor>tag (which will be described later), the first thing you need is a JSP page with an HTML
textareaelement.
Replacing Selected Textarea Element
For the purpose of this article let us assume that the page looks like this:<!DOCTYPE unspecified PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <%@page pageEncoding="UTF-8" contentType="text/html; charset=UTF-8"%> <html> <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> </body> </html>
As seen in the code above, the
actionattribute of the
formelement contains the
sample_posteddata.jspvalue. This is a
web.xmlmapping that is used in the samples and points to a servlet that prints the contents of CKEditor, when the page is submitted.
Next you have to add the CKEditor tag (
<ckeditor:replace>in this case) to the page. It is recommended to add it at the end, just before the closing
</body>tag:
<ckeditor:replace replace="editor1" basePath="/ckeditor/" />
Please note that the CKEditor tag above contains two attributes:
replace– points to the name or ID of the HTML
textareaelement that is to be replaced with a CKEditor instance.
basePath– contains the path to the main CKEditor directory.
For the purpose of this document it is assumed that CKEditor is available in the
/ckeditor/directory (
http://example.com/ckeditor/).
Please note that other tag attributes are also available. Refer to the
Common Tag Attributes section below for a full description.
Below is the full source code of our sample page:
<!DOCTYPE unspecified PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <%@page pageEncoding="UTF-8" contentType="text/html; charset=UTF-8"%> <%@ taglib uri="http://ckeditor.com" prefix="ckeditor" %> <html> <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="/ckeditor/" /> </body> </html>
Replacing All Textarea Elements
The<ckeditor:replaceAll>tag replaces all
textareaelements available in the document with editor instances. Optionally it can replace only the
textareaelements that have a CSS class equal to the value of the CKEditor
className
attribute.
<ckeditor:replaceAll basePath="/ckeditor/" className="myclass"/>
This tag changes all
textareaelements with a CSS class of
myclassto CKEditor instances.
Creating a CKEditor Instance
The<ckeditor:editor>tag creates a CKEditor instance.
<ckeditor:editor textareaAttributes="<%=attr %>" basePath="/ckeditor/" editor="editor1" value="Type here" />
For this tag no HTML
textareaelement needs to be present on a page. It is created internally and immediately replaced with a CKEditor instance. The code above contains the following elements:
basePath– contains the path to the main CKEditor directory.
editor– is the name of the internal
textareaelement.
value– is the default
textareaelement value.
textareaAttributes– is a
java.util.Mapwith textarea attribute names serving as map keys, and attribute values serving as map values. For example:
<% Map<String, String> attr = new HashMap<String, String>(); attr.put("rows", "8"); attr.put("cols", "50"); %>
Common Tag Attributes
The list below presents some of the commonly used tag attributes.basePath
basePath– contains the path to the main CKEditor directory.
If, for example, CKEditor is available under
http://example.com/3rdparty/ckeditor/, the
basePathattribute should be set to
/3rdparty/ckeditor/.
config
config– this parameter contains the CKEditor configuration object. For the list of available options, please refer to theJavaScript
API.
Configuration options are stored in the
CKEditorConfigobject. They are added by using the
addConfigValuemethod:
<% CKEditorConfig settings = new CKEditorConfig(); settings.addConfigValue("width","500"); %> <ckeditor:replace replace="editor1" basePath="/ckeditor/" config="<%=settings %>" />
The first parameter of this method is always the name of a configuration option in the form of a string. The second one is the value of this option for which a String, Boolean, Number, List, or Map object can be used. No matter what type is used, CKEditor
will try to map each value to an acceptable form. For example, the code below:
<% CKEditorConfig settings = new CKEditorConfig(); settings.addConfigValue("toolbar","[[ 'Source', '-', 'Bold', 'Italic' ]]"); %>
is equal to:
<% CKEditorConfig settings = 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); settings.addConfigValue("toolbar", list); %>
New CKEditor 3.6 Toolbar Syntax
As of CKEditor 3.6, toolbar buttons can beorganized into groups. Each group has its own name and a set of buttons that it includes. The new definition can also be expressed in two ways.
The code below:
<% CKEditorConfig settings = new CKEditorConfig(); settings.addConfigValue("toolbar","[{name: 'document', items: ['Source', '-', 'NewPage']}, '/', {name: 'styles', items: ['Styles','Format']} ]"); %>
is equal to:
<% CKEditorConfig settings = new CKEditorConfig(); List<Object> mainList = new ArrayList<Object>(); HashMap<String, Object> toolbarSectionMap = new HashMap<String, Object>(); List<String> subList = new ArrayList<String>(); subList.add("Source"); subList.add("-"); subList.add("NewPage"); toolbarSectionMap.put("name", "document"); toolbarSectionMap.put("items", subList); mainList.add(toolbarSectionMap); mainList.add("/"); toolbarSectionMap = new HashMap<String, Object>(); subList = new ArrayList<String>(); subList.add("Styles"); subList.add("Format"); toolbarSectionMap.put("name", "styles"); toolbarSectionMap.put("items", subList); mainList.add(toolbarSectionMap); settings.addConfigValue("toolbar", mainList); %>
timestamp
timestamp– this parameter stores the value specific for a particular CKEditor release, which helps to avoid browser caching problems when a new client-side CKEditor version is uploaded to the server.
initialized
initialized– setting this parameter to
truemeans that the
ckeditor.jsscript from CKEditor is already included in the page and there is no need to add it again. Setting it to
false, on the other hand, means
that the
ckeditor.jsscript should be added to the page.
events
events– this parameter stores the list of client-side event listeners and is of
com.ckeditor.EventHandlertype.
Example:
Firstly, an instance of theEventHandlerhas to be created. Then you can add events by using the
addEventmethod, where the first parameter is the CKEditor event keyword and the second one is the JavaScript function in the form of
a concatenated string.
<% EventHandler eventHandler = new EventHandler(); eventHandler.addEvent("instanceReady","function (ev) { alert(\"Loaded: \" + ev.editor.name); }"); %>
In order to use the events on a page, the following expression can be added:
<ckeditor:editor basePath="/ckeditor/" editor="editor1" events="<%=eventHandler %>"/>
globalEvents
globalEvents– this parameter stores the list of client-side event listeners that are used by all CKEditor instances and is of
GlobalEventHandlertype.
<% GlobalEventHandler globalEventHandler = new GlobalEventHandler(); globalEventHandler.addEvent("dialogDefinition","function (ev) { alert(\"Loading dialog window: \" + ev.data.name); }"); %>
Setting configuration options in a Java class
Instances of the configuration, events, and global events can be created either in a scriptlet, or in a separated Java class. Here is an example: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.addEvent("instanceReady","function (ev) { alert(\"Loaded: \" + ev.editor.name); }"); return handler; } public static GlobalEventHandler createGlobalEventHandlers() { GlobalEventHandler handler = new GlobalEventHandler(); handler.addEvent("dialogDefinition","function (ev) { alert(\"Loading dialog window: \" + ev.data.name); }"); return handler; } }
To access this class on a JSP page you can use the following expression:
<ckeditor:replace replace="editor1" basePath="ckeditor/" config="<%= ConfigurationHelper.createConfig() %>" events="<%= ConfigurationHelper.createEventHandlers() %>" />
例子程序:
<ck:editor>标签
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%> <%@page import="com.ckeditor.CKEditorConfig"%> <%@ taglib uri="http://ckeditor.com" prefix="ck"%> <html> <head> <script type="text/javascript"> //不知道为什么对于通过标签调用editor的方式不能通过 CKEDITOR.replace()的方式自定义editor配置属性,但是对于通过javascript调用editor的方式则可以 window.onload = function() { alert( CKEDITOR.basePath ); CKEDITOR.replace( 'editor2', { // customConfig : '../ckeditor/custom/myckeditor.js' toolbar : 'Basic', uiColor : '#9AB8F3' }); // CKEDITOR.replace( 'editor1' ); }; function getData(){ var editor_data = CKEDITOR.instances.editor2.getData(); alert(editor_data); } </script> </head> <body> 演示<ck:editor>的标签的作用 <br> <% Map<String, String> attr = new HashMap<String, String>(); attr.put("rows", "8"); attr.put("cols", "50"); request.setAttribute("attr",attr); CKEditorConfig settings = new CKEditorConfig(); settings.addConfigValue("width","200"); settings.addConfigValue("toolbar","[[ 'Source', '-', 'Bold', 'Italic' ]]"); //settings.addConfigValue("uiColor","#9AB8F3"); settings.addConfigValue("enterMode","CKEDITOR.ENTER_BR"); settings.addConfigValue("shiftEnterMode","CKEDITOR.ENTER_P"); request.setAttribute("settings",settings); %> <!-- 这里basePath和editor是必选项,其中 editor : is the name of the internal textarea element. basePath : contains the path to the main CKEditor directory. --> <ck:editor editor="editor1" config="${settings}" textareaAttributes="${attr}" basePath="${pageContext.request.contextPath}/ckeditor/" value="please input content here!"></ck:editor> <ck:editor editor="editor2" textareaAttributes="${attr}" basePath="${pageContext.request.contextPath}/ckeditor/" value="please input content here!"></ck:editor> <input type="button" value="editor2" onclick="getData()" > </body> </html>
<ck:replace>标签:
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%> <%@ taglib uri="http://ckeditor.com" prefix="ck"%> <html> <head> </head> <body> 演示<ck:replace>的标签的作用 <br> <% Map<String, String> attr = new HashMap<String, String>(); attr.put("rows", "8"); attr.put("cols", "50"); request.setAttribute("attr",attr); %> <html> <body> <form action="sample_posteddata.jsp" method="get"> <p style="width: 900;height:300;"> <label for="editor1">Editor 1:</label> <textarea cols="80" name="editor1" rows="10"></textarea> </p> <p> <input type="submit" value="Submit" /> </p> </form> <!-- replace – points to the name or ID of the HTML textarea element that is to be replaced with a CKEditor instance. basePath – contains the path to the main CKEditor directory. --> <ck:replace replace="editor1" basePath="ckeditor/" ></ck:replace> </body> </html> </body> </html>
<ck:replaceAll>标签:
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%> <%@ taglib uri="http://ckeditor.com" prefix="ck"%> <html> <head> </head> <body> 演示<ck:replaceAll>的标签的作用 <br> <% Map<String, String> attr = new HashMap<String, String>(); attr.put("rows", "8"); attr.put("cols", "50"); request.setAttribute("attr",attr); %> <html> <body> <form action="sample_posteddata.jsp" method="get"> <p style="width: 900;height:300;"> <label for="editor1">Editor 1:</label> <textarea cols="80" id="editor1" rows="10"></textarea> </p> <p style="width: 900;height:300;"> <label for="editor1">Editor 2:</label> <textarea cols="80" name="editor2" rows="10"></textarea> </p> <p> <input type="submit" value="Submit" /> </p> </form> <!--这里不需要写className属性即可--> <ck:replaceAll basePath="ckeditor"></ck:replaceAll> </body> </html> </body> </html>
相关文章推荐
- CKEditor 3.6入门--通过 javascript 调用CKEditor 编辑器
- JSP自定义标签——调用数据库(通过id号搜索相关信息)
- JSP自定义标签之简单标签入门
- JSP自定义标签开发入门
- 通过引入SiteMesh的JSP标签库,解决Freemarker与SiteMesh整合时,自定义SiteMesh标签的问题
- JavaWeb总结二十三、jsp自定义标签开发入门
- JSP自定义标签快速入门
- javaweb学习总结(二十三)——jsp自定义标签开发入门
- JSP自定义标签开发入门
- JSP自定义标签开发入门实例
- JSP自定义标签开发入门
- JSP自定义标签开发入门
- 通过引入SiteMesh的JSP标签库,解决Freemarker与SiteMesh整合时,自定义SiteMesh标签的问题
- JSP自定义标签开发入门
- javaweb学习总结23:jsp自定义标签开发入门
- JSP自定义标签开发入门
- JSP自定义标签开发入门
- JSP自定义标签开发入门