HTML编辑器FCKeditor使用详解

baggio1024

浏览: 64427 次
性别:
来自: 杭州

最近访客更多访客>>

ll_100

gu0600402203

quest_gan

f980215

博主相关

博客

微博

相册

留言

关于我

文章分类

全部博客 (28)

社区版块

存档分类

HTML fckeditor 浏览器 CSS Servlet

下载

官方下载：http://www.fckeditor.net/download/，

当前版本为2.6,需要下载FCKeditor_2.6.4.1.zip和fckeditor-java-2.5-bin.zip

所用到的包:

解压FCKeditor_2.6.4.1.zip后，将解压出来的文件夹fckeditor复制到WebRoot下.

在src下建一个新.properties文件-->fckeditor.properties
内容如下:

connector.userFilesPath=UploadFile
connector.userActionImpl=net.fckeditor.requestcycle.impl.UserActionImpl

在工程配置文件-->web.xml中配置一个servlet

<?xml version="1.0" encoding="UTF-8"?>
<web-app version="2.5"
      xmlns="http://java.sun.com/xml/ns/javaee"
      xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
      xsi:schemaLocation="http://java.sun.com/xml/ns/javaee
    http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd">
  <welcome-file-list>
      <welcome-file>index.jsp</welcome-file>
    </welcome-file-list>
   <servlet>
       <servlet-name>Connector</servlet-name>
         <servlet-class>
           net.fckeditor.connector.ConnectorServlet
       </servlet-class>
       <load-on-startup>1</load-on-startup>
     </servlet>
     <servlet-mapping>
       <servlet-name>Connector</servlet-name>
       <url-pattern>
         /fckeditor/editor/filemanager/connectors/*
       </url-pattern>
     </servlet-mapping>
</web-app>

jsp代码:

<%@ page language="java" import="java.util.*" pageEncoding="gbk"%> <html> <head> <title>xxxxx</title> <script type="text/javascript" src="fckeditor/fckeditor.js"> </script> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script type="text/javascript"> window.onload=function() { var oFCKeditor = new FCKeditor('MyTextarea'); oFCKeditor.BasePath = "fckeditor/"; oFCKeditor.ReplaceTextarea(); } </script> </head> <body> 通过Textarea来实现的实现编辑器导入<br/> <form action='view.jsp' method='post'> <div> <textarea name="MyTextarea"></textarea> </div> <input type="submit" value="Submit" /> </form> </body> </html>

效果:

fckconfig详解

修改配置文件之后，如若没有效果，清空浏览器的缓存；

（一）.修改语言配置

FCKConfig.AutoDetectLanguage = true ;//浏览器自动检测语言
FCKConfig.DefaultLanguage = 'en' ;//默认语言为英文
修改为：

FCKConfig.AutoDetectLanguage = false ;
FCKConfig.DefaultLanguage = 'zh-cn' ;

（二）.修改皮肤配置

FCKConfig.SkinPath = FCKConfig.BasePath + 'skins/defult/' ;
//默认皮肤
修改为：

FCKConfig.SkinPath = FCKConfig.BasePath + 'skins/office2003/' ;

（三）.添加中文字体

FCKConfig.FontNames = 'Arial;Comic Sans MS;Courier New;Tahoma;Times New Roman;Verdana' ;
修改为：

FCKConfig.FontNames = '宋体;黑体;隶书;楷体_GB2312;Arial;Comic Sans MS;Courier New;Tahoma;Times New Roman;Verdana' ;

（四）.打造个性在线编辑器

AutoDetectLanguage=true/false 自动检测语言
BaseHref="" 相对链接的基地址
ContentLangDirection="ltr/rtl" 默认文字方向
ContextMenu=字符串数组,右键菜单的内容
CustomConfigurationsPath="" 自定义配置文件路径和名称
Debug=true/false 是否开启调试功能,这样,当调用FCKDebug.Output()时,会在调试窗中输出内容
DefaultLanguage="" 缺省语言
EditorAreaCss="" 编辑区的样式表文件
EnableSourceXHTML=true/false 为TRUE时,当由可视化界面切换到代码页时,把HTML处理成XHTML
EnableXHTML=true/false 是否允许使用XHTML取代HTML
FillEmptyBlocks=true/false 使用这个功能,可以将空的块级元素用空格来替代
FontColors="" 设置显示颜色拾取器时文字颜色列表
FontFormats="" 设置显示在文字格式列表中的命名
FontNames="" 字体列表中的字体名
FontSizes="" 字体大小中的字号列表
ForcePasteAsPlainText=true/false 强制粘贴为纯文本
ForceSimpleAmpersand=true/false 是否不把&符号转换为XML实体
FormatIndentator="" 当在源码格式下缩进代码使用的字符
FormatOutput=true/false 当输出内容时是否自动格式化代码
FormatSource=true/false 在切换到代码视图时是否自动格式化代码
FullPage=true/false 是否允许编辑整个HTML文件,还是仅允许编辑BODY间的内容
GeckoUseSPAN=true/false 是否允许SPAN标记代替B,I,U标记
IeSpellDownloadUrl=""下载拼写检查器的网址
ImageBrowser=true/false 是否允许浏览服务器功能
ImageBrowserURL="" 浏览服务器时运行的URL
ImageBrowserWindowHeight="" 图像浏览器窗口高度
ImageBrowserWindowWidth="" 图像浏览器窗口宽度
LinkBrowser=true/false 是否允许在插入链接时浏览服务器
LinkBrowserURL="" 插入链接时浏览服务器的URL
LinkBrowserWindowHeight=""链接目标浏览器窗口高度
LinkBrowserWindowWidth=""链接目标浏览器窗口宽度
Plugins=object 注册插件
PluginsPath="" 插件文件夹
ShowBorders=true/false 合并边框
SkinPath="" 皮肤文件夹位置
SmileyColumns=12 图符窗列数
SmileyImages=字符数组图符窗中图片文件名数组
SmileyPath="" 图符文件夹路径
SmileyWindowHeight 图符窗口高度
SmileyWindowWidth 图符窗口宽度
SpellChecker="ieSpell/Spellerpages" 设置拼写检查器
StartupFocus=true/false 开启时FOCUS到编辑器
StylesXmlPath="" 设置定义CSS样式列表的XML文件的位置
TabSpaces=4 TAB键产生的空格字符数
ToolBarCanCollapse=true/false 是否允许展开/折叠工具栏
ToolbarSets=object 允许使用TOOLBAR集合
ToolbarStartExpanded=true/false 开启是TOOLBAR是否展开
UseBROnCarriageReturn=true/false 当回车时是产生BR标记还是P或者DIV标记

FckEditor V2.6 fckconfig.js中文注释

1. FCKConfig.CustomConfigurationsPath = '' ; // 自定义配置文件路径和名称
2. FCKConfigFCKConfig.EditorAreaCSS = FCKConfig.BasePath + 'css/fck_editorarea.css'; // 编辑区的样式表文件
3. FCKConfig.EditorAreaStyles = '' ; // 编辑区的样式表风格
4. FCKConfig.ToolbarComboPreviewCSS =''; //工具栏预览CSS
5. FCKConfig.DocType = '' ;//文档类型
6. FCKConfig.BaseHref = ''; // 相对链接的基地址
7. FCKConfig.FullPage = false ; //是否允许编辑整个HTML文件,还是仅允许编辑BODY间的内容
8. FCKConfig.StartupShowBlocks = false ;//决定是否启用"显示模块"
9. FCKConfig.Debug = false ;//是否开启调试功能
10. FCKConfigFCKConfig.SkinPath = FCKConfig.BasePath + 'skins/default/' ; //皮肤路径
11. FCKConfig.PreloadImages=... //预装入的图片
12. FCKConfigFCKConfig.PluginsPath = FCKConfig.BasePath + 'plugins/' ; //插件路径
13. FCKConfig.AutoDetectLanguage = true ; //是否自动检测语言
14. FCKConfig.DefaultLanguage   = 'zh-cn' ; //默认语言
15. FCKConfig.ContentLangDirection = 'ltr' ; //默认的文字方向,可选"ltr/rtl",即从左到右或从右到左
16. FCKConfig.ProcessHTMLEntities = true ; //处理HTML实体
17. FCKConfig.IncludeLatinEntities = true ; //包括拉丁文
18. FCKConfig.IncludeGreekEntities = true ;//包括希腊文
19. FCKConfig.ProcessNumericEntities = false ;//处理数字实体
20. FCKConfig.AdditionalNumericEntities = '' ;   //附加的数字实体
21. FCKConfig.FillEmptyBlocks = true ; //是否填充空块
22. FCKConfig.FormatSource   = true ; //在切换到代码视图时是否自动格式化代码
23. FCKConfig.FormatOutput   = true ; //当输出内容时是否自动格式化代码
24. FCKConfig.FormatIndentator = '    ' ; //当在源码格式下缩进代码使用的字符
25. FCKConfig.StartupFocus = false ; //开启时焦点是否到编辑器,即打开页面时光标是否停留在fckeditor上
26. FCKConfig.ForcePasteAsPlainText = false ; //是否强制粘贴为纯文件内容
27. FCKConfig.AutoDetectPasteFromWord = true ; //是否自动探测从word粘贴文件,仅支持IE
28. FCKConfig.ShowDropDialog = true ;//是否显示下拉菜单
29. FCKConfig.ForceSimpleAmpersand = false ;//是否不把&符号转换为XML实体
30. FCKConfig.TabSpaces   = 0 ;//按下Tab键时光标跳格数,默认值为零为不跳格
31. FCKConfig.ShowBorders = true ;//合并边框
32. FCKConfig.SourcePopup = false ;//弹出
33. FCKConfig.ToolbarStartExpanded = true ;//启动fckeditor工具栏默认是否展开
34. FCKConfig.ToolbarCanCollapse = true ;//是否允许折叠或展开工具栏
35. FCKConfig.IgnoreEmptyParagraphValue = true ;//是否忽略空的段落值
36. FCKConfig.FloatingPanelsZIndex = 10000 ;//浮动面板索引
37. FCKConfig.HtmlEncodeOutput = false ;//是否将HTML编码输出
38. FCKConfig.TemplateReplaceAll = true ;//是否替换所有模板
39. FCKConfig.ToolbarLocation = 'In' ;//工具栏位置,
40. FCKConfig.CustomConfigurationsPath = '' ; // 自定义配置文件路径和名称
41. FCKConfigFCKConfig.EditorAreaCSS = FCKConfig.BasePath + 'css/fck_editorarea.css'; // 编辑区的样式表文件
42. FCKConfig.BaseHref = ''; // 相对链接的基地址
43. FCKConfig.Debug = true/false; // 是否开启调试功能，当调用FCKDebug.Output()时，会在调试窗中输出内容
44. FCKConfigFCKConfig.SkinPath = FCKConfig.BasePath + 'skins/default/'; // 设置皮肤
45. FCKConfig.AutoDetectLanguage = true/false ; // 是否自动检测语言
46. FCKConfig.DefaultLanguage = 'zh-cn' ; // 设置默认语言
47. FCKConfig.ContentLangDirection = 'ltr/rtr'; // 默认文字方向，ltr左，rtr右
48. FCKConfig.FillEmptyBlocks = true/false ; // 使用这个功能，可以将空的块级元素用空格来替代
49. FCKConfig.FormatSource = true/false; // 切换到代码视图时，是否自动格式化代码
50. FCKConfig.FormatOutput = true/false; // 当输出内容时是否自动格式化代码
51. FCKConfig.FormatIndentator = ""; // 当在“源码格式”下缩进代码使用的字符
52. FCKConfig.GeckoUseSPAN = true/false; // 是否允许SPAN标记代替B，I，U标记
53. FCKConfig.StartupFocus = true/false; // 开启时是否FOCUS到编辑器
54. FCKConfig.ForcePasteAsPlainText = true/false;// 强制粘贴为纯文本
55. FCKConfig.ForceSimpleAmpersand = true/false; // 是否不把&符号转换为XML实体
56. FCKConfig.TabSpaces = 0/1; // TAB是否有效
57. FCKConfig.TabSpaces = 4; // TAB键产生的空格字符数
58. FCKConfig.ShowBorders = true/false; // 是否合并边框
59. FCKConfig.ToolbarStartExpanded = true/false; // 页面载入时，工具栏是否展开，点“展开工具栏”时才出现
60. FCKConfig.ToolBarCanCollapse = true/false; // 是否允许展开折叠工具栏
61. FCKConfig.ToolbarSets = object ; // 编辑器的工具栏，可以自行定义，删减，可参考已存在工具栏
62. FCKConfig.EnterMode = 'p'; // 编辑器中直接回车，在代码中生成，可选为p | div | br
63. FCKConfig.ShiftEnterMode = 'br'; // 编辑器中Shift+回车，在代码中生成，可选为p | div | br
64. FCKConfig.ContextMenu = 字符串数组; // 右键菜单的内容
65. FCKConfig.FontColors = ""; // 文字颜色列表
66. FCKConfig.FontNames = ""; // 字体列表
67. FCKConfig.FontSizes = ""; // 字号列表
68. FCKConfig.FontFormats = ""; // 文字格式列表
69. FCKConfig.StylesXmlPath = ""; // CSS样式列表的XML文件的位置
70. FCKConfig.TemplatesXmlPath = ""; // 模版的XML文件位置
71. FCKConfig.SpellChecker = "ieSpell/Spellerpages"; // 拼写检查器
72. FCKConfig.IeSpellDownloadUrl = ""; // 下载拼写检查器的网址
73. FCKConfigFCKConfig.SmileyPath = FCKConfig.BasePath + 'images/smiley/msn/'; // 表情文件存放路径
74. FCKConfig.SmileyImages = ''; // 表情文件名称列表，具体参考默认设置
75. FCKConfig.SmileyColumns = 8; // 表情窗口显示表情列数
76. FCKConfig.SmileyWindowWidth = 320; // 表情窗口显示宽度，此窗口会因为表情文件的改变而作调整
77. FCKConfig.SmileyWindowHeight = 240; // 表情窗口显示高度，此窗口会因为表情文件的改变而作调整
78. FCKConfig.FullPage = true/false; // 是否允许编辑整个HTML文件，还是仅允许编辑BODY间的内容
79.
80.
81. 上传设置
82.
83. var _FileBrowserLanguage         = 'php' ;         // asp | aspx | cfm | lasso | perl | php | py
84. var _QuickUploadLanguage         = 'php' ;         // asp | aspx | cfm | lasso | php[/code]
85. //第一个是文件浏览器使用的语言，第二个快速上传使用的语言，改成你需要的
86. FCKConfig.LinkUploadAllowedExtensions         = "" ;                         // empty for all
87. FCKConfig.LinkUploadDeniedExtensions =".(php|php3|php5|phtml|asp|aspx|ascx|jsp|cfm|cfc|pl|bat|exe|dll|reg|cgi)$"
88. //这是两个允许和拒绝上传的文件类型列表
89. FCKConfig.ImageBrowser = false ;是否在插入图片功能里面启用服务器文件浏览功能
90. FCKConfigFCKConfig.ImageBrowserURL = FCKConfig.BasePath + 'filemanager/browser/default/browser.html?Type=ImageConnector=connectors/' + _FileBrowserLanguage + '/connector.' + _FileBrowserExtension ;
91. Type=Image   表示文件类型是image这会使文件浏览器定位到文件上传路径/image/文件夹下面
92. FCKConfig.FlashBrowser = false ;是否在插入flash功能中启用服务器文件浏览功能
93. FCKConfig.LinkUpload = false ;是否启用插入链接的快速上传功能
94. FCKConfig.ImageUpload = false ;是否启用图片快速上传功能
95. FCKConfig.FlashUpload = false ;是否启用flash上传功能