读书人

1. 装配和使用CKEditor

发布时间: 2012-08-19 21:09:48 作者: rapoo

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 %>" />...   

读书人网 >Web前端

热点推荐