现在的位置: 首页 > 综合 > 正文

CKEditor 3.6 入门

2018年05月23日 ⁄ 综合 ⁄ 共 12995字 ⁄ 字号 评论关闭
文章目录

内容

系统需求

http://www.cnblogs.com/jse7en/archive/2012/04/14/2447433.html

请注意,你至少需要JRE 1.4和Servlet的2.5/JSP 2.1使用整合。

安装

将CKEditor添加到您的应用程序,有两步的过程:

  1. 下载独立CKEditor和放置在Web应用程序目录。
  2. 下载并安装服务器端集成(用于Java CKEditor)。

添加客户端CKEditor

官方CKEditor下载页面下载CKEditor的最新版本。将它放置在你的web应用程序的目录里。

添加标签库(ckeditor-java-core)

当你想添加CKEditor库,你可以选择使用Maven或手动添加。

使用Maven2

如果您的应用程序使用Maven,你可以添加以下的依赖在你的pom.xml文件里:

<dependency>
    <groupId>com.ckeditor</groupId>
    <artifactId>ckeditor-java-core</artifactId>
    <version>3.x.y</version>
</dependency>

请注意,3.xy表示版本,例如<version> 3.6</version> 。当CKEditor版本添加到Maven中,将自动下载指定版本。

没有Maven

如果你不使用Maven,你必须手动添加CKEditor jar库。在CKEditor下载网站,下载的ckeditor-java-core- 3.xy* .jar文件,并把它放在在你的/
WEB-INF/lib
目录。

*请注意,3.xy表示一个CKEditor发布的版本。

在页面上使用标签

要在JSP页面中使用<ckeditor>标签,你需要在页面中声明CKEditor标记库:

<%@ taglib uri="http://ckeditor.com" prefix="ckeditor" %>

在以下的实例中CKEditor取代HTML中textarea的元素。除非你正在使用的<ckeditor:editor>标签(将在后面介绍),你首先需要的是一个带有HTMLtextarea的元素的JSP页面

更换所选择的textarea元素

我们的目的是这样的:让我们假设有个页面看起来像这样:

复制代码
<!DOCTYPE unspecified PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<%@page pageEncoding="UTF-8" contentType="text/html; charset=UTF-8"%>
<html>
    <body>
        <form action="sample_posteddata.jsp" method="get">
            <p>
                <label for="editor1">Editor 1:</label>
                <textarea cols="80" id="editor1" name="editor1" rows="10"></textarea>
            </p>
            <p>
                <input type="submit" value="Submit" />
            </p>
        </form>
    </body>    
</html>
复制代码

正如在上面的代码中所看到的,该页面的table元素的属性包含sample_posteddata.jsp这个值,这一个在样例中应用的 web.xml映射,当页面被提交,链接到servlet,输出出CKEditor的内容。

接下来,你必须在页面中添加CKEditor标签(<ckeditor:replace>在这种情况下)。建议添加在底部</ BODY>标记之前:

<ckeditor:replace replace="editor1" basePath="/ckeditor/" />

请注意,上面的CKEditor标签包含两个属性:

  • replace-一个CKEditor实例映射到将取代的HTML textarea元素的name或ID的 
  •   basePath -CKEditor主目录的路径。

本文件的目的:假设CKEditor是在/ ckeditor /目录(http://example.com/ckeditor/)。

请注意,也可用其他标记属性。请参阅第一个完整的描述通用标签属性的

下面是我们的示例页面的完整的源代码:

复制代码
<!DOCTYPE unspecified PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<%@page pageEncoding="UTF-8" contentType="text/html; charset=UTF-8"%>
<%@ taglib uri="http://ckeditor.com" prefix="ckeditor" %>
<html>
    <body>
        <form action="sample_posteddata.jsp" method="get">
            <p>
                <label for="editor1">Editor 1:</label>
                <textarea cols="80" id="editor1" name="editor1" rows="10"></textarea>
            </p>
            <p>
                <input type="submit" value="Submit" />
            </p>
        </form>
    <ckeditor:replace replace="editor1" basePath="/ckeditor/" />
    </body>    
</html>
复制代码

 

更换所有的textarea元素

<ckeditor:replaceAll>标签用Editor实例取代文件中的所有textarea的元素。它可以选择只更换一个CSS Class的值与CKEditor 的className属性的值相等的textarea元素

<ckeditor:replaceAll basePath="/ckeditor/" className="myclass"/>

这个标签用CKEditor实例替换所有Class为MyClass的textarea元素

创建一个CKEditor实例

<ckeditor:editor>标签创建一个CKEditor实例。

<ckeditor:editor textareaAttributes="<%=attr %>" basePath="/ckeditor/" editor="editor1" value="Type here" />

对于这个么有HTML textarea元素的标签,必须在当前页面上创建并立即用CKEditor实例取代。上面的代码包含以下元素:

  •  basePath -包含到CKEditor主目录的路径。
  • editor-是内部的textarea元素的名称
  • value -是默认的textarea元素值。
  •  textareaAttributes -是一个 java.util.Map 存储在Map keys里面的textarea的属性名,而属性值则存为Map values。例如:
<% 
    Map<String, String> attr = new HashMap<String, String>();
    attr.put("rows", "8");
    attr.put("cols", "50");
%>

常见的标记属性

下面的列表列出一些常用的标签属性。

basePath

basePath -包含CKEditor主目录的路径。

例如,如果在CKEdito下r的http://example.com/3rdparty/ckeditor/中basePath属性应设置为/ 3rdparty/ckeditor
/

 

config

config -此参数包含CKEditor配置对象。有关该属性可用选项的列表,请参阅JavaScriptAPI

将配置选项存储在CKEditorConfig对象的。他们使用添加addConfigValue方法:

<% 
    CKEditorConfig settings = new CKEditorConfig();
    settings.addConfigValue("width","500");
%>
<ckeditor:replace replace="editor1" basePath="/ckeditor/" config="<%=settings %>" />

这种方法的第一个参数始终是一个字符串形式的配置选项的名称。第二个可以使用String,Boolean,Number,List,或Map对象其中一个。无论使用何种类型,CKEditor将尝试将每个值映射到一个可以接受的形式。例如,下面的代码:

<% 
    CKEditorConfig settings = new CKEditorConfig();
    settings.addConfigValue("toolbar","[[ 'Source', '-', 'Bold', 'Italic' ]]");
%>

等同于

复制代码
<% 
    CKEditorConfig settings = new CKEditorConfig();
    List<List<String>> list = new ArrayList<List<String>>();
    List<String> subList = new ArrayList<String>();
    subList.add("Source");
    subList.add("-");
    subList.add("Bold");
    subList.add("Italic");
    list.add(subList);
    settings.addConfigValue("toolbar", list);
%>
复制代码

 

新的CKEditor 3.6工具栏语法

在CKEditor 3.6中,工具栏按钮可以组织成组每个组都有自己的名字和它包含的一组按钮。这个新的定义可以表现在两个方面。

下面的代码:

<%
    CKEditorConfig settings = new CKEditorConfig();
    settings.addConfigValue("toolbar","[{name: 'document', items: ['Source', '-', 'NewPage']},
    '/', {name: 'styles', items: ['Styles','Format']} ]");
%>

 

等同于:

复制代码
<%
    CKEditorConfig settings = new CKEditorConfig();
    List<Object> mainList = new ArrayList<Object>();                
    HashMap<String, Object> toolbarSectionMap = new HashMap<String, Object>();
    List<String> subList = new ArrayList<String>();
    subList.add("Source");
    subList.add("-");
    subList.add("NewPage");    
    toolbarSectionMap.put("name", "document");    
    toolbarSectionMap.put("items", subList);    
    mainList.add(toolbarSectionMap);        
    mainList.add("/");
    toolbarSectionMap = new HashMap<String, Object>();
    subList = new ArrayList<String>();
    subList.add("Styles");                
    subList.add("Format");
    toolbarSectionMap.put("name", "styles");    
    toolbarSectionMap.put("items", subList);
    mainList.add(toolbarSectionMap);                
    settings.addConfigValue("toolbar", mainList);
%>
复制代码

 

 

timestamp

 

timestamp -此参数存储一个特定的CKEditor的发行的值,这有助于避免浏览器缓存的问题,当一个新的客户端CKEditor版本上传到服务器时,它的价值就体现了。

 

initialized

initialized  - 设置这个值为true意味着ckeditor.js脚本已经包含在页面里面了,有没有必要再次添加。另一方面,将它设置为false,意味着,ckeditor.js脚本应该被添加到页面中。

Event

Event -此参数存储客户端的事件监听器列表这是com.ckeditor.EventHandler类型。

例如:

首先,创建一个EventHandler实例然后,您可以通过使用事件的addEvent方法,其中第一个参数是CKEditor事件关键字,第二个是JavaScript函数中的一个连接字符串。

<% 
    EventHandler eventHandler = new EventHandler();
    eventHandler.addEvent("instanceReady","function (ev) { alert(\"Loaded: \" + ev.editor.name); }");
%>

为了使用页面上的事件,可以添加以下表达式:

<ckeditor:editor basePath="/ckeditor/" editor="editor1" events="<%=eventHandler %>"/>

globalEvents

globalEvents -此参数存储着可被所有CKEditor实例使用的是客户端事件监听器列表,是个GlobalEventHandler类型。

<%
    GlobalEventHandler globalEventHandler = new GlobalEventHandler();
    globalEventHandler.addEvent("dialogDefinition","function (ev) { alert(\"Loading dialog window: \" + ev.data.name); }");
%>

 

在一个Java类中设置配置选项

configuration, events和global events可以被创建在一个scriptlet实例,或在一个独立的Java类。下面是一个例子:

复制代码
package com.ckeditor.samples;
 
import java.util.ArrayList;
import java.util.List;
 
import com.ckeditor.CKEditorConfig;
import com.ckeditor.EventHandler;
import com.ckeditor.GlobalEventHandler;
 
public class ConfigurationHelper {
 
 
    public static CKEditorConfig createConfig() {
        CKEditorConfig config = new CKEditorConfig();
        List<List<String>> list = new ArrayList<List<String>>();
        List<String> subList = new ArrayList<String>();
        subList.add("Source");
        subList.add("-");
        subList.add("Bold");
        subList.add("Italic");
        list.add(subList);
        config.addConfigValue("toolbar", list);
        config.addConfigValue("width","500");
        return config;
    }
 
    public static EventHandler createEventHandlers() {
        EventHandler handler = new EventHandler();
        handler.addEvent("instanceReady","function (ev) { alert(\"Loaded: \" + ev.editor.name); }");
        return handler;
    }
 
    public static GlobalEventHandler createGlobalEventHandlers() {
        GlobalEventHandler handler = new GlobalEventHandler();
        handler.addEvent("dialogDefinition","function (ev) {  alert(\"Loading dialog window: \" + ev.data.name); }");
        return handler;
    }
}
复制代码

 

要在JSP页面上访问这个类,你可以使用以下表达式:

<ckeditor:replace replace="editor1" basePath="ckeditor/"
   config="<%= ConfigurationHelper.createConfig() %>"
   events="<%= ConfigurationHelper.createEventHandlers() %>" />
 
 
 
 
另外一个见面找到的:
 
 

第一步:载入 CKEditor

http://ckeditor.com/download 下载ckeditor的最新版本(我下了个5月9号发布的3.6),解压后将 ckeditor 文件夹复制到web工程的根目录下。在要使用CKEditor的页面<head>块中插入以下代码,将其引入:

 

Html代码 复制代码 收藏代码
  1. <head>  
  2.     ...   
  3.     <script type="text/javascript" src="/ckeditor/ckeditor.js"></script>  
  4. </head>  

 

 

第二部:创建 CKEditor 实例

 

首先,在页面中插入一个<textarea>节点:

 

Html代码 复制代码 收藏代码
  1. <textarea id="editor1" name="editor1">&lt;p&gt;Initial value.&lt;/p&gt;</textarea>  

 

如果你想让编辑器在初始化时,显示诸如从数据库等处查出的数据,只需要将他们插入<textarea>节点中,如上面<p>节点中的内容。

 

创建好<textarea>后,用 CKEditor API 替换原来的HTML节点,如下:

 

Html代码 复制代码 收藏代码
  1. <script type="text/javascript">  
  2.     CKEDITOR.replace( 'editor1' );   
  3. </script>  

 

或者在 window.onload 中:

 

Html代码 复制代码 收藏代码
  1. <script type="text/javascript">  
  2.     window.onload = function()   
  3.     {   
  4.         CKEDITOR.replace( 'editor1' );   
  5.     };   
  6. </script>  

 

第三步:更改config.js

config.js是 CKEditor 的主配置文件,更改config.js来定制自己的 CKEditor 样式:

 

Js代码 复制代码 收藏代码
  1. /*  
  2. Copyright (c) 2003-2011, CKSource - Frederico Knabben. All rights reserved.  
  3. For licensing, see LICENSE.html or http://ckeditor.com/license  
  4. */  
  5.   
  6. CKEDITOR.editorConfig = function( config )   
  7. {   
  8.     // Define changes to default configuration here. For example:   
  9.     // config.language = 'fr';   
  10.     // config.uiColor = '#AADC6E';   
  11.     config.language = 'zh-cn'// 配置语言   
  12.     config.uiColor = '#FFF'// 背景颜色   
  13.     config.width = 'auto'// 宽度   
  14.     config.height = '300px'// 高度   
  15.     config.skin = 'office2003';// 界面v2,kama,office2003   
  16.     config.toolbar = 'MyToolbar';// 工具栏风格(基础'Basic'、全能'Full'、自定义)plugins/toolbar/plugin.js   
  17.     config.toolbarCanCollapse = false;// 工具栏是否可以被收缩   
  18.     config.resize_enabled = false;// 取消 “拖拽以改变尺寸”功能 plugins/resize/plugin.js   
  19.        
  20.     //自定义的工具栏       
  21.     config.toolbar_MyToolbar =   
  22.     [   
  23.         ['Source','-','Save','Preview','Print'],   
  24.         ['Cut','Copy','Paste','PasteText','PasteFromWord','-','Scayt'],   
  25.         ['Undo','Redo','-','Find','Replace','-','SelectAll','RemoveFormat'],   
  26.         ['Image','Flash','Table','HorizontalRule','Smiley','SpecialChar','PageBreak'],   
  27.         '/',   
  28.         ['Styles','Format'],   
  29.         ['Bold','Italic','Strike'],   
  30.         ['NumberedList','BulletedList','-','Outdent','Indent','Blockquote'],   
  31.         ['Link','Unlink','Anchor'],   
  32.         ['Maximize','-','About']   
  33.     ];   
  34. };  

 

 

第四步:提交编辑器内容

 

可以将 CKEditor 实例看作一个<textarea>处理,在表单提交时, CKEditor 实例中的内容被提交到服务器,可以通过<textarea> 的名称获得其内容。

 

如果需要在客户端获得 CKEditor 实例的内容,可以通过调用 CKEditor API,在表单提交前对其进行处理,如下:

 

Html代码 复制代码 收藏代码
  1. <script type="text/javascript">  
  2.     var editor_data = CKEDITOR.instances.editor1.getData();   
  3. </script>  

 

一个完整的例子:

Html代码 复制代码 收藏代码
  1. <%@ page language="java" import="java.util.*" pageEncoding="GB18030"%>  
  2. <%   
  3. String path = request.getContextPath();   
  4. String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";   
  5. %>  
  6.   
  7. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">  
  8. <html>  
  9.   <head>  
  10.     <base href="<%=basePath%>">  
  11.        
  12.     <title>CKEditor</title>  
  13.     <meta http-equiv="pragma" content="no-cache">  
  14.     <meta http-equiv="cache-control" content="no-cache">  
  15.     <meta http-equiv="expires" content="0">       
  16.     <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">  
  17.     <meta http-equiv="description" content="This is my page">  
  18.     <!--  
  19.     <link rel="stylesheet" type="text/css" href="styles.css">  
  20.     -->  
  21.     <script type="text/javascript" src="ckeditor/ckeditor.js"></script>  
  22.   </head>  
  23.      
  24.   <body>  
  25.         <form id="form1" name="form1" method="post" action="display.jsp">  
  26.             <table width="650" height="400" border="0" align="center">  
  27.                 <tr>  
  28.                     <td valign="top">  
  29.                         内容:   
  30.                     </td>  
  31.                     <td>  
  32.                         <textarea id="editor1" name="editor1">&lt;p&gt;Initial value.&lt;/p&gt;</textarea>  
  33.                         <script type="text/javascript">  
  34.                             CKEDITOR.replace( 'editor1' );   
  35.                         </script>  
  36.                     </td>  
  37.                 </tr>  
  38.                 <tr>  
  39.                     <td></td>  
  40.                     <td>  
  41.                         <input type="submit" name="Submit" value="提交" />  
  42.                         <input type="reset" name="Reset" value="重置" />  
  43.                     </td>  
  44.                 </tr>  
  45.             </table>  
  46.         </form>  
  47.     </body>  
  48. </html>  
  49. http://wuhongyu.iteye.com/blog/1051419#
【上篇】
【下篇】

抱歉!评论已关闭.