fckeditor使用说明.docx
- 文档编号:16269910
- 上传时间:2023-07-12
- 格式:DOCX
- 页数:14
- 大小:21.66KB
fckeditor使用说明.docx
《fckeditor使用说明.docx》由会员分享,可在线阅读,更多相关《fckeditor使用说明.docx(14页珍藏版)》请在冰点文库上搜索。
fckeditor使用说明
FCKeditor至今已经到了2.3.1版本了,对于国内的WEB开发者来说,也基本上都已经“闻风知多少”了,很多人将其融放到自己的项目中,更有很多大型的网站从中吃到了甜头。
1、使用FCKeditor的API
FCKeditor编辑器,提供了非常丰富的API,用于给EndUser实现很多想要定制的功能,比如最基本的数据验证,如何在提交的时候用JS判断当前编辑器区域内是否有内容,FCK的API提供了GetLength()方法;
再比如如何ü疟鞠騀CK里插入内容,使用InsertHTML()等;
还有,在用户定制功能时,中间步骤可能要执行FCK的一些内嵌操作,那就用ExecuteCommand()方法。
详细的API列表,请查看FCKeditor的Wiki。
而常用的API,请查看FCK压缩包里的_samples/html/sample08.html。
此处就不贴代码了。
2.自定义工具条
/* Source="页面源码"
DocProps="页面属性"
Save="保存"
NewPage="新建"
Preview="预览"
Templates="模版"
Cut="剪切"
Copy="拷贝"
Paste="粘贴"
PasteText="粘贴为无格式的文本"
PasteWord="粘贴Word格式"
Print="打印"
SpellCheck="拼写检查,要装插件"
Undo="撤消"
Redo="重做"
Find="查找"
Replace="替换"
SelectAll="全选"
RemoveFormat="清除格式(清除现在文本的格式)"
Form="表单域"
Checkbox="复选"
Radio="单选"
TextField="单行文本"
Textarea="多行文本"
Select="列表"
Button="按钮"
ImageButton="图像区域"
HiddenField="隐藏域"
Bold="加粗"
Italic="倾斜"
Underline="下划线"
StrikeThrough="删除线"
Subscript="下标"
Superscript="上标"
OrderedList="删除/插入项目列表"
UnorderedList="删除/插入项目符号"
Outdent="减少缩进"
Indent="增加缩进"
JustifyLeft="左对齐"
JustifyCenter="居中对齐"
JustifyRight="右对齐"
JustifyFull="分散对齐"
Link="链接"
Unlink="删除链接"
Anchor="插入/删除锚点"
Image="上传图片"
Flash="上传动画"
Table="插入表格"
Rule="插入水平线"
Smiley="插入表情"
SpecialChar="插入特殊字符"
PageBreak="插入分页符"
Style="样式"
FontFormat="格式"
FontName="字体"
FontSize="大小"
TextColor="字体颜色"
BGColor="背景色"
FitWindow="全屏编辑"
About="关于我们"
*/
示例:
FCKConfig.ToolbarSets["Default"] = [//Default工具条的名称
[’Source’,’DocProps’,’-’,’Save’,’NewPage’,’Preview’,’-’,’Templates’],
[’Cut’,’Copy’,’Paste’,’PasteText’,’PasteWord’,’-’,’Print’,’SpellCheck’],
[’Undo’,’Redo’,’-’,’Find’,’Replace’,’-’,’SelectAll’,’RemoveFormat’],
[’Form’,’Checkbox’,’Radio’,’TextField’,’Textarea’,’Select’,’Button’,’ImageButton’,’HiddenField’],
’/’,
[’Bold’,’Italic’,’Underline’,’StrikeThrough’,’-’,’Subscript’,’Superscript’],
[’OrderedList’,’UnorderedList’,’-’,’Outdent’,’Indent’],
[’JustifyLeft’,’JustifyCenter’,’JustifyRight’,’JustifyFull’],
[’Link’,’Unlink’,’Anchor’],
[’Image’,’Flash’,’Table’,’Rule’,’Smiley’,’SpecialChar’,’PageBreak’],
’/’,
[’Style’,’FontFormat’,’FontName’,’FontSize’],
[’TextColor’,’BGColor’],
[’FitWindow’,’-’,’About’]
] ;
FCKEditor使用说明详解:
FCKeditor介绍
FCKeditor这个开源的HTML文本编辑器可以让web程序拥有如MSWord这样强大的编辑功
能.FCKeditor支持当前流行的浏览器如IE5.5+,Firefox1.0+,Mozilla1.3+与Netscape7+等。
FCKeditor官司方网址:
FCKeditor在线DEMO:
FCKeditor下载直址:
(该版本为2.3.2),最新版已经是2.4了。
2.FCKeditor.java介绍
不能直接在JSP项目中使用,需要FCKeditor.java库的支持。
FCKeditor.java是针对对JAVA中使用FCKeditor由SimoneChiaretta开发的FCKeditor的JAVA实现。
下载地址:
(最近版本为2.3)
3.在JAVA项目中使用FCKeditor在线编辑器
开发环境:
JDK5.0+
--[if!
supportLists]-->Eclipse3.2.1+WTP1.5.2
(1)新建一个WEB工程:
(2)解压FCKeditor_2.3.2.zip包,将其中的edit文件夹到项目中的WebRoot目录
(3)解压FCKeditor_2.3.2.zip包,将其中的fckconfig.js、fckeditor.js、fckstyles.xml、fcktemplates.xml文件夹到项目中的WebRoot目录
(4)解压FCKeditor.java-2.3.zip包,将其中的\web\WEB-INF\lib下的两个jar文件到项目的WebRoot\WEB-INF\lib目录
(5)解压FCKeditor.java-2.3.zip包,将其中的\src下的FCKeditor.tld文件到项目的WebContent\WEB-INF目录
(6)删除WebContent\edit目录下的_source文件夹(以“_”开始的文件,在项目中无用)
完成后的目录结构下如:
说明:
图中的input.jsp和display.jsp两个是我写的测试集成FCKeditor的JSP文件。
∙修改WebContent/WEB-INF/web.xml文件,加入FCKeditor的配置信息,如下:
xml代码
1.xml version="1.0" encoding="UTF-8"?
>
2. 3. xmlns=" 4. xmlns: xsi="http: //www.w3.org/2001/XMLSchema-instance" 5. xsi: schemaLocation=" 6. --display-name> 7. 8. --servlet-name> 9. 10. com.fredck.FCKeditor.connector.ConnectorServlet 11. --servlet-class> 12. 13. --param-name> 14. -- 此为文件浏览路径 --> 15. --param-value> 16. --init-param> 17. 18. --param-name> 19. --param-value> 20. --init-param> 21. --load-on-startup> 22. --servlet> 23. 24. --servlet-name> 25. 26. com.fredck.FCKeditor.uploader.SimpleUploaderServlet 27. --servlet-class> 28. 29. --param-name> 30. -- 此为文件上传路径,需要在WebRoot 目录下新建 UserFiles 文件夹 --> 31. -- 根据文件的类型还需要新建相关的文件夹 Image、Flash --> 32. 33. --init-param> 34. 35. --param-name> 36. --param-value> 37. --init-param> 38. 39. -- 此参数为是否开启上传功能 --> 40. --param-name> 41. --param-value> 42. --init-param> 43. 44. --param-name> 45. --param-value> 46. --init-param> 47. 48. -- 此参数为文件过滤,以下的文件类型都不可以上传 --> 49. --param-name> 50. 51. php|php3|php5|phtml|asp|aspx|ascx|jsp|cfm|cfc|pl|bat|exe|dll|reg|cgi 52. --param-value> 53. --init-param> 54. 55. --param-name> 56. --param-value> 57. --init-param> 58. 59. --param-name> 60. --param-value> 61. --init-param> 62. 63. --param-name> 64. --param-value> 65. --init-param> 66. 67. --param-name> 68. --param-value> 69. --init-param> 70. --load-on-startup> 71. --servlet> 72. 73. --servlet-name> 74. 75. /editor/filemanager/browser/default/connectors/jsp/connector 76. --url-pattern> 77. --servlet-mapping> 78. 79. --servlet-name> 80. 81. /editor/filemanager/upload/simpleuploader 82. --url-pattern> 83. --servlet-mapping> 84. --web-app> 注: web.xml中已经加入了一些常用配置的说明。 ∙新建input.jsp文件,内容如下: (注意内容中的”testfck”这个id) (上面不能直接帖HTML的代码,所以只能帖一个图片上来,要是有知道如何帖HTML代码的朋友,请告诉我一下,谢谢) 说明: 在JSP中集成FCKeditor --[endif]-->JavaScript集成: 如上面内容所示,通过新建一个FCKeditor对象,然后调用该对象的设置方法来设置FCKeditor的各个属性,最后调用FCKeditor的ReplaceTextarea()替换HTML页面中的 另外FCKeditor也可以调用它的create()方法来直接在JSP嵌入FCKeditor编辑器。 注: 注意上面的oFCKeditor.BasePath="";用这种方式FCKeditor会去查找它的editor目录下的fckeditor.html文件,由于我是直接将editor文件夹拷贝到WebContent目录下,所以将它的BasePath设置为””,如果您将editor拷贝到其它目录,请设置相应的BasePath属性。 FCKeditor默认是将其放在fckeditor目录 (2) --[endif]-->使用自定义标签该方法一定要完成第步: 解压FCKeditor.java-2.3.zip包,将其中的\src下的FCKeditor.tld文件到项目的WebContent\WEB-INF目录 首先在JSP中加入FCKeditor标签: <%@tagliburi=”/WEB-INF/FCKeditor.tld”prefix=”fck”%> JSP页面中加入如下代码,集成FCKeditor编辑器: js代码 1. 2. id="testfck" --—注意这里 --> 3. basePath="/FCKeditor/" 4. height="60%" 5. skinPath="/FCKeditor/editor/skins/default/" 6. toolbarSet="Default" 7. imageBrowserURL="/FCKeditor/editor/filemanager/browser/default/browser.html? Type=Image&Connector=connectors/jsp/connector" 8. linkBrowserURL="/FCKeditor/editor/filemanager/browser/default/browser.html? Connector=connectors/jsp/connector" 9. flashBrowserURL="/FCKeditor/editor/filemanager/browser/default/browser.html? Type=Flash&Connector=connectors/jsp/connector" 10. imageUploadURL="/FCKeditor/editor/filemanager/upload/simpleuploader? Type=Image" 11. linkUploadURL="/FCKeditor/editor/filemanager/upload/simpleuploader? Type=File" 12. flashUploadURL="/FCKeditor/editor/filemanager/upload/simpleuploader? Type=Flash"> 13. (10)新建文件,这个文件比较简单,只是简单的显示从在线编辑器传递过来的内容,如下: <%=request.getParameter("testfck")%> 注意这里的getParameter(“testfck”),这个”testfck”就是在input.jsp中设置的id。 4.FCKeditor类说明 下面是用来在页面中建立编辑器的FCKEDITOR类的说明 (1)构造器: FCKeditor(instanceName[,width,height,toolbarSet,value]) ∙instanceName: 编辑器的唯一名称(相当于ID) ∙WIDTH: 宽度 ∙HEIGHT: 高度 ∙toolbarSet: 工具条集合的名称 ∙value: 编辑器初始化内容 (2)属性: ∙instanceName: 编辑器实例名 ∙width: 宽度,默认值为100% ∙height: 高度,默认值是200 ∙ToolbarSet: 工具集名称,参考FCKCONFIG.JS,默认值是Default ∙value: 初始化编辑器的HTML代码,默认值为空 ∙BasePath: 编辑器的基路径,默认为/Fckeditor/文件夹,注意,尽量不要使用相对路径.最用
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- fckeditor 使用说明