CKeditor的引用

来源：互联网发布：中国科学院论文数据库编辑：程序博客网时间：2024/05/18 04:24

最近在看如何使用CKeditor，在官网上学了几种方法，特地记录！给英文不是很好的朋友一点小小的帮助！

至于CKeditor是什么，它有什么优点及缺点我就不多说了，网上一大把！

第一步：到CKeditor官网下载最新版的CKeditor的压缩包（http://ckeditor.com/download），我下的是4.1.1，完整版！

同时，我学的是Java，所以要在Java web引入的话，还要下载CKEditor 3.6.4 for Java 这是一个Jar包，引入其中的core包到工程的lib目录下就搞定！

插播：把下载的CKeditor压缩包解压缩之后，可以选择去掉一些不必要的东西，比如sample文件夹，还有一些不要的语言包，我只保留英语和中文。。。这样，精简一些！

第二步：把这个解压缩之后的文件夹放到webroot目录下！

第三步：引入，见下面代码！（四种引入方式）

先引入js脚本

[html] view plain copy
<script type="text/javascript" src="CKedit/ckeditor.js"></script>  

[html] view plain copy
-------------------------------------------------------------------------  

[html] view plain copy
<%@page import="com.ckeditor.EventHandler"%>  
<%@page import="java.util.Date"%>  
<%@page import="com.ckeditor.CKEditorConfig"%>  
<%@page import="java.util.Map" %>  
<%@page import="java.util.HashMap"%>  
<%@ page language="java" contentType="text/html; charset=UTF-8"  
    pageEncoding="UTF-8"%>  
<%@ taglib uri="http://ckeditor.com" prefix = "ckeditor" %>  
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">  
<html>  
<head>  
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">  
<title>CK edit</title>  
<script type="text/javascript" src="CKedit/ckeditor.js"></script>  
<!-- solution1   
<script type="text/javascript">  
window.onload = function(){  
    CKEDITOR.replace('editor1');  
};  
</script>  
-->  
  
  
  
<script type="text/javascript">  
var data = CKEDITOR.instances.editable.getData();  
console.log(data);  
</script>  
</head>  
<body>  
<h2>CKedit Demo1</h2>  
<form method="post">  
<textarea name="editor1"></textarea>  
<script type="text/javascript">  
CKEDITOR.replace('editor1');  
</script>  
<input type="submit">  
</form>   
<hr>  
<h2>CKedit Demo2</h2>  
<div id="editable" contenteditable = "true">  
    <h1>Inline Editing in Action!</h1>  
    <p>The div element that contains this text is now editable.</p>  
</div>  
<script>  
CKEDITOR.disableAutoInline = true;  
CKEDITOR.inline("editable");  
</script>  
  
<hr>  
<h2>CKeditor Demo3</h2>  
<form method="post">  
<p>  
    <label for = "editor3">Editor3:</label>  
    <textarea rows="30" cols="80" id = "editor3" name="editor3"></textarea>  
</p>  
  
  
<p><input type="submit"></p>  
  
  
  
  
  
  
</form>  
  
<hr>  
<h2>CKeditor Demo4</h2>  
<%  
    Map<String,String> attr = new HashMap<String,String>();  
    attr.put("rows","30");  
    attr.put("cols", "80");  
  
%>  
<%  
  
    CKEditorConfig settings = new CKEditorConfig();  
    settings.addConfigValue("width", "780");  
    settings.addConfigValue("height","500");  
  
%>  
<%  
    Date timestampValue = new Date();  
%>  
  
<%  
    EventHandler eventHandler = new EventHandler();  
    eventHandler.addEventHandler("instanceReady", "function(ev){alert(\"Loaded:\"+ev.editor.name);}");  
  
%>  
  
  
<ckeditor:editor textareaAttributes="<%=attr %>" editor="editor4" basePath="/CKeditor/" config="<%=settings %>" timestamp="<%=timestampValue.toString() %>" initialized="true" events="<%=eventHandler %>"></ckeditor:editor>  
  
<ckeditor:replace replace="editor3" basePath="/CKedit/"></ckeditor:replace>  
</body>  
</html>  

第一种：在body里加入textarea标签（其实CKeditor就是把这个标签替代了。。。）

在head里加入脚本

[html] view plain copy
<script type="text/javascript">  
window.onload = function(){  
    CKEDITOR.replace('editor1');  
};  

这样就引入了。。

这里也可以是这样

[html] view plain copy
<form method="post">  
<textarea name="editor1"></textarea>  
<script type="text/javascript">  
CKEDITOR.replace('editor1');  
</script>  
<input type="submit">  
</form>   

第二种：

[html] view plain copy
<div id="editable" contenteditable = "true">  
    <h1>Inline Editing in Action!</h1>  
    <p>The div element that contains this text is now editable.</p>  
</div>  
<script>  
CKEDITOR.disableAutoInline = true;  
CKEDITOR.inline("editable");  
</script>  

这种就是能实现自动隐藏编辑框，当鼠标点击文本区域自动显示编辑框。。。。

第三种：在Jsp页面中引入，适合Java web工程

[html] view plain copy
<form method="post">  
<p>  
    <label for = "editor3">Editor3:</label>  
    <textarea rows="30" cols="80" id = "editor3" name="editor3"></textarea>  
</p>  
  
<p><input type="submit"></p>  
  
</form>

[html] view plain copy
<ckeditor:replace replace="editor3" basePath="/CKedit/"></ckeditor:replace>  

要记得在页面导入标签库

[html] view plain copy
<%@ taglib uri="http://ckeditor.com" prefix = "ckeditor" %>  

第四种：完全用Java脚本和标签实现

[html] view plain copy
<%  
    Map<String,String> attr = new HashMap<String,String>();  
    attr.put("rows","30");  
    attr.put("cols", "80");  
  
%>  
<%  
  
    CKEditorConfig settings = new CKEditorConfig();  
    settings.addConfigValue("width", "780");  
    settings.addConfigValue("height","500");  
  
%>  
<%  
    Date timestampValue = new Date();  
%>  
  
<%  
    EventHandler eventHandler = new EventHandler();  
    eventHandler.addEventHandler("instanceReady", "function(ev){alert(\"Loaded:\"+ev.editor.name);}");  
  
%>  
  
  
<ckeditor:editor textareaAttributes="<%=attr %>" editor="editor4" basePath="/CKeditor/" config="<%=settings %>" timestamp="<%=timestampValue.toString() %>" events="<%=eventHandler %>"></ckeditor:editor>  

参数说明：attr是个map集合，存储这个textarea的属性

basePaht就是你的Ckeditor文件夹路径

config对这个编辑器的参数设置，比如我这里设置他的宽度为780，高度为500

timstamp，一个时间戳，防止客户端重复提交

events用于绑定事件

配置数据还可以在config.js这个文件里配置不过这种配置是全局的，针对所有的！

关于单独配置，我试了一下它帮助文档提供的方法，没有起作用，可能是我弄错了。不过也有可能是它错了，因为关于事件绑定它的那个方法就是错误的。请知道的朋友告知一下！谢谢！

关于如何把编辑器中的数据发送过去，可以通过Ajax，也可以指定表单的action通过request对象传到服务器

他提供了一个

[html] view plain copy
var data = CKEDITOR.instances.editable.getData();  

-----------------------------------------------------------------------------------------------------------------------------------------

仅以此记录，作为以后参考！更加详细的使用最好看官方帮助文档

http://docs.ckeditor.com/

http://docs.cksource.com/CKEditor_3.x/Developers_Guide/Java/Integration

0 0