spring ckeditor and prettify sample
POM.XML
web configuration
servlet configuration
ckeditor configuration
<dependency>
<groupId>org.springframework</groupId>
<artifactId>spring-core</artifactId>
<version>${spring.version}</version>
</dependency>
<dependency>
<groupId>org.springframework</groupId>
<artifactId>spring-web</artifactId>
<version>${spring.version}</version>
</dependency>
<dependency>
<groupId>org.springframework</groupId>
<artifactId>spring-webmvc</artifactId>
<version>${spring.version}</version>
</dependency>
<dependency>
<groupId>javax.servlet</groupId>
<artifactId>servlet-api</artifactId>
<version>2.5</version>
<scope>provided</scope>
</dependency>
web configuration
<servlet> <servlet-name>dispatcher</servlet-name> <servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class> <load-on-startup>1</load-on-startup> <init-param> <param-name>contextConfigLocation</param-name> <param-value>/WEB-INF/demo-servlet.xml</param-value> </init-param> </servlet>
servlet configuration
<bean class="org.springframework.web.servlet.view.InternalResourceViewResolver"> <property name="prefix"> <value>/WEB-INF/pages/</value> </property> <property name="suffix" value=".jsp" /> </bean>
ckeditor configuration
CKEDITOR.plugins.add('insertcode',
{
requires : [ 'dialog' ],
init : function(a)
{
var b = "insertcode";
a.addCommand(b, new CKEDITOR.dialogCommand(b));
a.ui.addButton("insertcode", {
label : a.lang.toolbar,
command : b,
icon : this.path + "images/code.png"
});
CKEDITOR.dialog.add(b, this.path + "dialogs/insertcode.js");
}
});
(function() {
CKEDITOR.dialog.add("insertcode", function(editor) {
var escape = function(value) {
return value.replace(/&/g, '&')
.replace(/</g, '<')
.replace(/>/g, '>')
.replace(/\"/g, '"')
.replace(/\'/g, ''');
};
return {
title : "Insert Code Dialog",
resizable : CKEDITOR.DIALOG_RESIZE_BOTH,
minWidth : 420,
minHeight : 350,
contents : [ {
id : "cb",
name : "cb",
label : "cb",
title : "resource code",
expand : true,
width : "500px",
height : "500px",
padding : 0,
elements : [
{
type : "select",
label : "Select Language :",
id : "lang",
required : true,
'default' : "java",
items : [ [ 'C#', 'csharp' ], [ 'C++', 'cpp' ],
[ 'CSS', 'css' ], [ 'Delphi', 'delphi' ],
[ 'Html', 'xhtml' ],
[ 'JavaScript', 'js' ], [ 'Java', 'java' ],
[ 'Perl', 'perl' ], [ 'PHP', 'php' ],
[ 'Python', 'py' ], [ 'Ruby', 'rails' ],
[ 'SQL', 'sql' ], [ 'Visual Basic', 'vb' ],
[ 'XML', 'xml' ] ]
}, {
type : 'textarea',
style : 'width:450px;height:350px',
label : 'Code',
id : 'code',
rows : 20,
'default' : ''
} ]
} ],
onOk : function() {
code = this.getValueOf('cb', 'code');
lang = this.getValueOf('cb', 'lang');
html = '' + escape(code) + '';
var i = 0;
var tmp = '';
var tclass = 'prettyprint';
while (html.indexOf('\n') != -1) {
var tnode = i % 2 ? 'nocode' : 'nocode1';
++i;
tmp += '<li class=\"' + tnode + '\"><pre class=\"' + tclass
+ ' lang=' + lang + '\">';
tmp += html.substring(0, html.indexOf('\n') + 1);
html = html.substr(html.indexOf('\n') + 1);
tmp += "</pre></li>";
}
tnode = i % 2 ? 'nocode' : 'nocode1';
tmp += "<li class=\"" + tnode + "\"><pre class=\"" + tclass
+ ' lang=' + lang + '\">' + html + "</pre></li>";
editor.insertHtml("<ol class=\"olcode\">" + tmp + "</ol>");
},
onLoad : function() {
}
};
});
})();
<script type="text/javascript" src="prettify/prettify.js"></script> <script src="ckeditor/ckeditor.js"></script> <link href="ckeditor/samples/sample.css" rel="stylesheet" /> <link href="prettify/prettify.css" type="text/css" rel="stylesheet" /> <style> </style> </head> <body> <form name="myform" action="<%=request.getContextPath()%>/home/add.html" method="post"> <textarea class="ckeditor" name="content"></textarea> <input type="submit" name="submit" /> </form> </body>