CKeditor的引用

太过爱你忘了你带给我的痛 2021-09-11 06:44 361阅读 0赞

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

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

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

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

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

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

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

先引入js脚本

**\[html\]**  [view plain][]   [copy][view plain]

1.  **<****script** type="text/javascript" src="CKedit/ckeditor.js"**>****</****script****>**

**\[html\]**  [view plain][]   [copy][view plain]

1.  \-------------------------------------------------------------------------

**\[html\]**  [view plain][]   [copy][view plain]

1.  **<**%@page import="com.ckeditor.EventHandler"%**>**  
2.  **<**%@page import="java.util.Date"%**>**  
3.  **<**%@page import="com.ckeditor.CKEditorConfig"%**>**  
4.  **<**%@page import="java.util.Map" %**>**  
5.  **<**%@page import="java.util.HashMap"%**>**  
6.  **<**%@ page language="java" contentType="text/html; charset=UTF-8"  
7.      pageEncoding="UTF-8"%**>**  
8.  **<**%@ taglib uri="http://ckeditor.com" prefix = "ckeditor" %**>**  
9.  <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"**>**  
10. **<****html****>**  
11. **<****head****>**  
12. **<****meta** http-equiv="Content-Type" content="text/html; charset=UTF-8"**>**  
13. **<****title****>**CK edit**</****title****>**  
14. **<****script** type="text/javascript" src="CKedit/ckeditor.js"**>****</****script****>**  
15. <!-- solution1   
16. **<****script** type="text/javascript"**>**  
17. window.onload = function()\{  
18.     CKEDITOR.replace('editor1');  
19. \};  
20. **</****script****>**  
21. \--**>**  
22.   
23.   
24.   
25. **<****script** type="text/javascript"**>**  
26. var data = CKEDITOR.instances.editable.getData();  
27. console.log(data);  
28. **</****script****>**  
29. **</****head****>**  
30. **<****body****>**  
31. **<****h2****>**CKedit Demo1**</****h2****>**  
32. **<****form** method="post"**>**  
33. **<****textarea** name="editor1"**>****</****textarea****>**  
34. **<****script** type="text/javascript"**>**  
35. CKEDITOR.replace('editor1');  
36. **</****script****>**  
37. **<****input** type="submit"**>**  
38. **</****form****>**   
39. **<****hr****>**  
40. **<****h2****>**CKedit Demo2**</****h2****>**  
41. **<****div** id="editable" contenteditable = "true"**>**  
42.     **<****h1****>**Inline Editing in Action!**</****h1****>**  
43.     **<****p****>**The div element that contains this text is now editable.**</****p****>**  
44. **</****div****>**  
45. **<****script****>**  
46. CKEDITOR.disableAutoInline = true;  
47. CKEDITOR.inline("editable");  
48. **</****script****>**  
49.   
50. **<****hr****>**  
51. **<****h2****>**CKeditor Demo3**</****h2****>**  
52. **<****form** method="post"**>**  
53. **<****p****>**  
54.     **<****label** for = "editor3"**>**Editor3:**</****label****>**  
55.     **<****textarea** rows="30" cols="80" id = "editor3" name="editor3"**>****</****textarea****>**  
56. **</****p****>**  
57.   
58.   
59. **<****p****>****<****input** type="submit"**>****</****p****>**  
60.   
61.   
62.   
63.   
64.   
65.   
66. **</****form****>**  
67.   
68. **<****hr****>**  
69. **<****h2****>**CKeditor Demo4**</****h2****>**  
70. **<**%  
71.     Map**<****String**,String**>** attr = new HashMap**<****String**,String**>**();  
72.     attr.put("rows","30");  
73.     attr.put("cols", "80");  
74.   
75. %**>**  
76. **<**%  
77.   
78.     CKEditorConfig settings = new CKEditorConfig();  
79.     settings.addConfigValue("width", "780");  
80.     settings.addConfigValue("height","500");  
81.   
82. %**>**  
83. **<**%  
84.     Date timestampValue = new Date();  
85. %**>**  
86.   
87. **<**%  
88.     EventHandler eventHandler = new EventHandler();  
89.     eventHandler.addEventHandler("instanceReady", "function(ev)\{alert(\\"Loaded:\\"+ev.editor.name);\}");  
90.   
91. %**>**  
92.   
93.   
94. **<****ckeditor:editor** textareaAttributes="<%=attr %>" editor="editor4" basePath="/CKeditor/" config="<%=settings %>" timestamp="<%=timestampValue.toString() %>" initialized="true" events="<%=eventHandler %>"**>****</****ckeditor:editor****>**  
95.   
96. **<****ckeditor:replace** replace="editor3" basePath="/CKedit/"**>****</****ckeditor:replace****>**  
97. **</****body****>**  
98. **</****html****>**

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

在head里加入脚本

**\[html\]**  [view plain][]   [copy][view plain]

1.  **<****script** type="text/javascript"**>**  
2.  window.onload = function()\{  
3.      CKEDITOR.replace('editor1');  
4.  \};

这样就引入了。。

这里也可以是这样

**\[html\]**  [view plain][]   [copy][view plain]

1.  **<****form** method="post"**>**  
2.  **<****textarea** name="editor1"**>****</****textarea****>**  
3.  **<****script** type="text/javascript"**>**  
4.  CKEDITOR.replace('editor1');  
5.  **</****script****>**  
6.  **<****input** type="submit"**>**  
7.  **</****form****>**

第二种：

**\[html\]**  [view plain][]   [copy][view plain]

1.  **<****div** id="editable" contenteditable = "true"**>**  
2.      **<****h1****>**Inline Editing in Action!**</****h1****>**  
3.      **<****p****>**The div element that contains this text is now editable.**</****p****>**  
4.  **</****div****>**  
5.  **<****script****>**  
6.  CKEDITOR.disableAutoInline = true;  
7.  CKEDITOR.inline("editable");  
8.  **</****script****>**

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

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

**\[html\]**  [view plain][]   [copy][view plain]

1.  **<****form** method="post"**>**  
2.  **<****p****>**  
3.      **<****label** for = "editor3"**>**Editor3:**</****label****>**  
4.      **<****textarea** rows="30" cols="80" id = "editor3" name="editor3"**>****</****textarea****>**  
5.  **</****p****>**  
6.    
7.    
8.  **<****p****>****<****input** type="submit"**>****</****p****>**  
9.    
10.   
11.   
12.   
13.   
14.   
15. **</****form****>**

**\[html\]**  [view plain][]   [copy][view plain]

1.  **<****ckeditor:replace** replace="editor3" basePath="/CKedit/"**>****</****ckeditor:replace****>**

要记得在页面导入标签库

**\[html\]**  [view plain][]   [copy][view plain]

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

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

**\[html\]**  [view plain][]   [copy][view plain]

1.  **<**%  
2.      Map**<****String**,String**>** attr = new HashMap**<****String**,String**>**();  
3.      attr.put("rows","30");  
4.      attr.put("cols", "80");  
5.    
6.  %**>**  
7.  **<**%  
8.    
9.      CKEditorConfig settings = new CKEditorConfig();  
10.     settings.addConfigValue("width", "780");  
11.     settings.addConfigValue("height","500");  
12.   
13. %**>**  
14. **<**%  
15.     Date timestampValue = new Date();  
16. %**>**  
17.   
18. **<**%  
19.     EventHandler eventHandler = new EventHandler();  
20.     eventHandler.addEventHandler("instanceReady", "function(ev)\{alert(\\"Loaded:\\"+ev.editor.name);\}");  
21.   
22. %**>**  
23.   
24.   
25. **<****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][view plain]

1.  var data = CKEDITOR.instances.editable.getData();

\-----------------------------------------------------------------------------------------------------------------------------------------

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

[http://docs.ckeditor.com/][http_docs.ckeditor.com]

[http://docs.cksource.com/CKEditor\_3.x/Developers\_Guide/Java/Integration][http_docs.cksource.com_CKEditor_3.x_Developers_Guide_Java_Integration]

[http_ckeditor.com_download]: http://ckeditor.com/download
[Java]: http://lib.csdn.net/base/javase
[Java 1]: http://lib.csdn.net/base/java
[view plain]: http://blog.csdn.net/jackwang_378/article/details/9058237#
[http_docs.ckeditor.com]: http://docs.ckeditor.com/
[http_docs.cksource.com_CKEditor_3.x_Developers_Guide_Java_Integration]: http://docs.cksource.com/CKEditor_3.x/Developers_Guide/Java/Integration