CKEditor Java集成指南

最新推荐文章于 2024-08-03 04:40:22 发布

hekaijin_001

最新推荐文章于 2024-08-03 04:40:22 发布

阅读量1.7k

点赞数 1

分类专栏： CKEditor工具文章标签： CKEditor java ckeditor web应用

本文链接：https://blog.csdn.net/weixin_35751376/article/details/53744384

版权

CKEditor工具专栏收录该内容

1 篇文章 0 订阅

订阅专栏

CKEditor Java集成指南

内容：

系统需求
安装
    添加客户端CKEditor来源
    添加标记库(ckeditor-java-core)
        使用Maven2
        没用Maven
在页面上使用标签
    替代选择的文本区域元素
    替换文本区域所有元素
    创建CKEditor实例
    通用标签属性
        basePath
        配置
            新的CKEditor 3.6工具栏的语法
        时间戳
        初始化
        事件
            例子:
        globalEvents
    设置配置选项在一个Java类

系统需求
请注意,您至少需要 JRE 1.4和2.5 Servlet / JSP 2.1 使用集成。
安装

CKEditor添加到您的应用程序需要的是一个两步的过程:

下载独立CKEditor并把它放在web应用程序目录,
下载和安装服务器端集成(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所示。 x.y 表示工件版本, 3.6 <版本> < /版本> 。 CKEditor发布以来中央Maven存储库添加到指定的版本应该是自动下载。
没有Maven

如果你不使用Maven,你必须添加CKEditor jar 手动library。去CKEditor下载站点下载 ckeditor-java-core - 3. x.y * . jar 文件,并把它放在你的 / web - inf / lib 目录中。

请注意, 3. x.y 表示CKEditor发布的版本。
在页面上使用标签

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

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

CKEditor取代HTML 文本区域元素(s)的实例(s)。除非你使用 <ckeditor:editor> 标签(这将在稍后描述),你首先需要的是一个JSP页面的HTML 文本区域元素。
替代选择的文本区域元素

对于本文的目的,让我们假设页面看起来像这样:

<!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>

在上面的代码中可以看到, 行动的属性形式元素包含了 sample_posteddata.jsp 价值。这是一个 web . xml 映射是用于打印的样品和指向servlet CKEditor的内容,当页面提交。

接下来你需要添加CKEditor标签(<ckeditor:replace> 在这种情况下)页面。建议将它添加在最后,前关闭 < /body> 标签:

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

取代 一个€“指向HTML的名称或ID 文本区域 元素取代CKEditor实例。
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>

替换文本区域所有元素

的 < ckeditor:replaceAll > 标签代替所有文本区域元素在文档编辑器中可用的实例。或者它可以取代的文本区域元素有一个CSS类等于CKEditor的价值类名称属性。

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

这个标签的改动文本区域元素的CSS类 myclass CKEditor实例。
创建CKEditor实例

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

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

这个标签没有HTML 文本区域页面上的元素需要礼物。它创建内部和立即CKEditor实例所取代。上面的代码包含以下元素:

basePath 一个€“包含主CKEditor目录的路径。
编辑器 一个€“内部的名称 文本区域 元素。
价值 一个€“是默认的 文本区域 元素的值。
textareaAttributes 一个€“是a java.util.Map 与文本区域地图属性名称作为键,值和属性值作为地图。 例如:

<% 
    Map<String, String> attr = new HashMap<String, String>();
    attr.put("rows", "8");
    attr.put("cols", "50");
%>

通用标签属性

下面的列表提供了一些常用的标记属性。
basePath

basePath 一个€“包含主CKEditor目录的路径。

例如,如果CKEditor下可用 http://example.com/3rdparty/ckeditor/ , basePath 应该设置为属性 / 3 rdparty / ckeditor / 。
配置

配置一个€“这个参数包含CKEditor配置对象。可用选项的列表,请参阅 JavaScript API 。

存储在配置选项 CKEditorConfig 对象。他们是通过使用补充道 addConfigValue 方法:

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

该方法的第一个参数总是配置选项的名称的形式一个字符串。第二个是这个选项的值为一个字符串,布尔值、数字,可以使用列表,或者映射对象。无论使用什么类型,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);
%>

时间戳

时间戳一个€“这个参数存储特定CKEditor释放特定的价值,这有助于避免浏览器缓存问题,当一个新的客户端CKEditor版本上传到服务器。
初始化

初始化一个€“设置该参数真正的意味着 ckeditor.js 脚本从CKEditor已经包含在页面并没有需要添加一次。设置它假 ,另一方面,意味着 ckeditor.js 脚本应该添加到页面中。
事件

事件一个€“这个参数存储客户端事件侦听器列表的 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类

实例的配置、事件和全球事件可以被创建在一个小脚本,或在一个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() %>" />