1. 装配和使用CKEditor

2012-08-19

1. 安装和使用CKEditorCKEditor是一款实用的前端编辑器，核心是用JavaScript来编写，并且提供了丰富的插件可

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前端

1. 装配和使用CKEditor