CKEditor 3.6 Getting Started-calling __js through custom tags in a JSP

It programmer development must-all kinds of resources download list, the most complete IT resources in history, personal collection summary.

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 are 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 your Pom.xml file:

<dependency>
	<groupId>com.ckeditor</groupId>
	<artifactid>ckeditor-java-core </artifactId>
	<version>3.x.y</version>
</dependency>

Please note that 3.x.y denotes the artifact version, Like<version>3.6</version>. Since CKEditor releases are added to the "the" the "the" the "the" the repository version specified be should downloaded Y. without Maven

If You don't use Maven, your have to add the CKEditor jar library manually. Go to the CKEditor download site, download Theckeditor-java-core-3.x.y*.jar file, and put it in Your/web-inf/lib Director Y.

* Please note that 3.x.y denotes the version of a CKEditor release. Using the Tag on the Page

To-start using <ckeditor> tags in your JSP page, your need to declare the CKEditor tag library inside it:

<%@ taglib uri= "http://ckeditor.com" prefix= "CKEditor"%>

CKEditor replaces the HTML textarea element (s) with its instance (s). Unless you are using the<ckeditor:editor> tag (which'll be described later), the the ' the ' thing you need is a JSP pag E with an HtmlTextArea element. replacing Selected Textarea Element

For the purpose of this article let us assume 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 "%>
 

 

As seen in the code above, the action of the form element contains thesample_posteddata.jsp value. This is a web.xml mapping it used the samples and points to a servlet that prints the contents of CKEditor The He page is submitted.

Next you are have to add the CKEditor tag (<ckeditor:replace> in this case) to the page. It is recommended to add it in the end, just before the closing</body> tag:


<ckeditor:replace replace= "Editor1" basepath= "/ckeditor/"/>
 

Please, that's the CKEditor tag above contains two attributes:replace–points to the name or ID of the HTML textarea E Lement is the 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 are available in The/ckeditor/directory (http://example.com/c keditor/).

Please note this 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 "
%>
 
replacing all Textarea Elements

The <ckeditor:replaceAll> tag replaces all TEXTAREA elements available in the document with editor instances. Optionally it can replace only thetextarea elements this have a CSS class equal to the value of the Ckeditorclassname attr Ibute.


<ckeditor:replaceall basepath= "/ckeditor/" classname= "MyClass"/>
 

This is the tag changes all TEXTAREA elements with a CSS class of MyClass to 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 textarea element needs to is 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 TEXTAREA element. Value–is the default TEXTAREA element value. Textareaattributes–is a java.util.Map with 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", "M");
%>
 
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, the CKEditor is available under http://example.com/3rdparty/ckeditor/, Thebasepath attribute should are 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 Ckeditorconfig object. They are added by using Theaddconfigvalue method:


<% 
	ckeditorconfig settings = new Ckeditorconfig ();
	Settings.addconfigvalue ("width", "more");
%> <ckeditor:replace replace= "Editor1" basepath= "/ckeditor/" config= "<%=settings
%>"/>
 

 

The ' This ' 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'll try to map each value to a 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 is organized 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 ng problems when a new Client-side CKEditor version are uploaded to the server. initialized

Initialized–setting This parameter to true means which theckeditor.js script from CKEditor be already included in the Pag E and there is no need to add it again. Setting it tofalse, on the other hand, means this ckeditor.js script should to the page. Events

Events–this parameter stores the list of Client-side event listeners and is Ofcom.ckeditor.EventHandler type. Example:

Firstly, an instance of the EventHandler has to be created. Then You can add events by using Theaddevent method, where the The "the" and "parameter" is the CKEditor event keyword and the secon D 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 is 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 I s ofglobaleventhandler type.


<%
	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 into a scriptlet, or in a separated Java CLA Ss. This is 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 Ckedit
		Orconfig ();
		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 and can use the following expression:


<ckeditor:replace replace= "Editor1" basepath= "ckeditor/" config= "<%= configurationhelper.createconfig"
   () %> "
   events=" <%= configurationhelper.createeventhandlers ()%> "/>"
 

 

Example program:

<ck:editor> Label


<%@ page language= "java" import= "java.util.*" pageencoding= "Utf-8"%> <% @page import= "
   Com.ckeditor.CKEditorConfig "%> <%@ taglib uri=" http://ckeditor.com "prefix=" ck "%>  

<ck:replace> Tags:


<%@ page language= "java" import= "java.util.*" pageencoding= "Utf-8"%> <%@ taglib uri= "http://ckeditor.com"
    prefix= "ck"%>  

<ck:replaceAll> Tags:


<%@ page language= "java" import= "java.util.*" pageencoding= "Utf-8"%> <%@ taglib uri= "http://ckeditor.com"
    prefix= "ck"%>