To support this feature, we will use the rich-text component library CKEditor
(http://ckeditor.com), which is a common rich-text JavaScript component, with integration with jQuery
UI. The files are in the folder /src/main/webapp/ckeditor of the sample source code.
First we need to include the required JavaScript files into the template page (default.jspx). Listing
17-43 shows the code snippet you need to add to the page.
Listing 17-43. Add CKEditor to Page Template
<!-- Other code omitted -->
<!-- jQuery and jQuery UI -->
<spring:url value="/resources/scripts/jquery-1.7.1.js" var="jquery_url" />
<spring:url value="/resources/scripts/jquery-ui-1.8.16.custom.min.js"
var="jquery_ui_url" />
<spring:url value="/resources/styles/custom-theme/jquery-ui-1.8.16.custom.css"
var="jquery_ui_theme_css" />
<link rel="stylesheet" type="text/css" media="screen" href="${jquery_ui_theme_css}" />
<script src="${jquery_url}" type="text/javascript"><jsp:text/></script>
<script src="${jquery_ui_url}" type="text/javascript"><jsp:text/></script>
<!-- CKEditor -->
<spring:url value="/resources/ckeditor/ckeditor.js" var="ckeditor_url" />
<spring:url value="/resources/ckeditor/adapters/jquery.js" var="ckeditor_jquery_url" />
<script type="text/javascript" src="${ckeditor_url}"><jsp:text/></script>
<script type="text/javascript" src="${ckeditor_jquery_url}"><jsp:text/></script>
<!-- Other code omitted -->
</html>
In Listing 17-43, the code to be added is highlighted in bold. We included two scripts, the core
CKEditor script and the adapter with jQuery.
The next step is to enable the CKEditor in the edit contact view. Listing 17-44 shows the change
required for the page (edit.jspx).
Listing 17-44. Add CKEditor to Edit Contact View
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Other code omitted -->
<script type="text/javascript">
$(function(){
$('#birthDate').datepicker({
dateFormat: 'yy-mm-dd',
changeYear: true
});
$("#contactDescription").ckeditor(
{
toolbar : 'Basic',
uiColor : '#CCCCCC'
Search WWH :
