ios文件profile

转载

jowvid 2024-09-29 14:50:16

文章标签 ios文件profile ckeditor web应用应用 html 文章分类 iOS 移动开发

CKEditor在jsp中的应用

　　CKEditor即大名鼎鼎的FCKeditor终于在最近发布新版本了，与增加版本号不同，这次完全把它改名了，更名为CKeditor。这应该是和它的开发公司CKSource的名字有关吧，该公司的另一个产品为CKFinder（一个Ajax文件管理器），这次可能为了保持一致，将FCK更改为CK，但是版本号继承了下来，为CKeditor3.0版。

使用CKEditor是非常简单的，下面介绍如何在jsp中使用它。

1、到官网上下载最新的发行包http://ckeditor.com或者去这个网站也行http://ckeditor.com.cn/

2、解压后将起复制到自己web工程的WebRoot下(哪个目录都无所谓，我这里为方便)下。

(左志超自己加的：并把ckeditor for java 下载下来，把ckeditor-java-core-3.3.5包下的所有*.jar文件复制到WEB-INF/LIB文件夹下)

3、部署工程，启动应用服务器。如果想看一下效果的话可以

访问http://localhost:8080/应用名/ckeditor/index.html

4、写两个jsp页面。

a.jsp
<%@page pageEncoding="utf-8"%>
<html>
  <head>
   <title>My Editor...</title>
   <script type="text/javascript"src="ckeditor/ckeditor.js"></script>
  </head>
  <body>  <formaction="b.jsp" method="post">
    <p>
     <label for="editor1">
      Editor 1:
     </label>
     <br />
     <textarea cols="80" id="editor1"name="editor1" rows="10">我自己的编辑器。。。。。。</textarea>
     <script type="text/javascript">
  CKEDITOR.replace('editor1');
 </script>
    </p>
    <p>
     <input type="submit"value="Submit" />
    </p>
   </form>
  </body>
 </html> b.jsp
<%@page pageEncoding="utf-8"%>
<html>
  <head>
   <title></title>
  </head>
  <body>
 <%=request.getParameter("editor1") %>
  </body></html>

可以看到在页面加载的时候会执行js代码的CKEDITOR.replace('editor1')，就是加载编辑器。

实验成功后就可以写点东西，改改样式提交给b.sjp，在b.jsp中打印出来就行了。

5、中文乱码的问题
在编辑框中直接输入中文提交的话b.jsp可能会输出乱码，是因为应用服务器默认的解码方式是iso8859，而我们设置的是utf8，解决办法有：

a>b.jsp页面中取得数据时转码：

<%=newString(request.getParameter("editor1").getBytes("ISO-8859-1"),"utf8")%>。
b>可以在web.xml中添加过滤器，设置页面统一编码为utf8。
c>还有其它方式没有试过，可以到网上查一下。

Java上CKEditor集成指南

内容 · 系统需求 · 安装 · 添加客户端CKEditor · 添加标签库（ckeditor-Java-core） · 使用maven2 · 没有Maven · 页面上使用标签 · 更换选择的textarea元素 · 更换所有的textarea元素 · 创建一个CKEditor实例 · 常见的标记属性 · basePath · config · 新的CKEditor 3.6工具栏语法 · timestamp · initialized · event · 例如： · globalEvents · 在一个Java类中设置配置选项

系统需求

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

安装

将CKEditor添加到您的应用程序，有两步的过程：

1. 下载独立CKEditor和放置在Web应用程序目录。

2. 下载并安装服务器端集成（用于JavaCKEditor）。

添加客户端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主目录的路径。

的textarea

的textarea

· 　textareaAttributes -是一个 java.util.Map 存储在Map keys里面的textarea的属性名，而属性值则存为Mapvalues。例如：

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配置对象。有关该属性可用选项的列表，请参阅JavaScript的 API。

将配置选项存储在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和globalevents可以被创建在一个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() %>" />

本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。

上一篇：opencv查找模板显示角度

下一篇：无法加载ingress账户数据

提问和评论都可以，用心的回复会被更多人看到评论

发布评论

相关文章

官方博客	全部文章	热门标签	班级博客
了解我们	网站地图	意见反馈

鸿蒙开发者社区	51CTO学堂
51CTO	软考资讯