1. 安装和使用CKEditor
CKEditor是一款实用的前端编辑器,核心是用JavaScript来编写,并且提供了丰富的插件可供使用。
1. 下载
从官网http://ckeditor.com/download下载CKEditor3.6.3包,以及支持Java的war包:
ckeditor_3.6.3.zip
ckeditor-java-3.6.2.war
2. 解压
解压ckeditor_3.6.3.zip到项目的Web根目录下,解压ckeditor-java-3.6.2.war并覆盖Web根目录的META-INF和WEB-INF等文件夹和文件。
3. 启动工程
打开浏览器访问,查看调用CKEditor的几种方式:
a. 替换存在的textarea标签:
replace的值要和textarea的id或name相同
basePath后面要以/结尾:
basePath有两种寻址方式:
相对url路径,如: basePath="../../ckeditor/"
web根目录路径,如果ckeditor放在根目录下,则basePath="${pageContext.servletContext.contextPath}/ckeditor/"
<%@ taglib prefix="ckeditor" uri="http://ckeditor.com" %><html> <head> <link rel="stylesheet" type="text/css" href="ckeditor/_samples/sample.css" /> </head> <body> <form action="assets/sample_posteddata.jsp" method="post"> <label for="editor1">Editor1</label> <textarea id="editor1" rows="10" cols="80"></textarea> </form> <ckeditor:replace replace="editor1" basePath="ckeditor/" /> </body></html>
b. 替换所有存在的textarea标签:
和a类似,不同的是标签。
... <ckeditor:replaceAll basePath="ckeditor/" /> ...
c. 用Java代码生成:
editor属性的值不能和页面中其它的id相同
...<%@ page import="java.util.Map" import="java.util.HashMap" %><%@ page import="com.ckeditor.CKEditorConfig" %>...<label for="editor1">Editor1</label><%String value = "My first [b]CKEditor[/b] Java tag";Map<String, String> attr = new HashMap<String, String>();attr.put("rows", "8");attr.put("cols", "50");CKEditorConfig settings = new CKEditorConfig();settings.addConfigValue("Width", "500");settings.addConfigValue("Toolbar", "Default");%><ckeditor:editor editor="editor1" basePath="ckeditor/"config="<%=settings %>" textareaAttributes="<%=attr %>"value="<%=value %>" />...