FckEditor使用介绍

少女杀手

浏览: 131688 次
性别:
来自: 约旦河西岸

最近访客更多访客>>

wyx065747

wl185855253

l284849736

fhsh168

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

fckeditor Servlet Flash JSP CSS

1.下载文件
FCKeditor_2.6.6.zip fckeditor的所有文件
fckeditor-java-2.6-src.zip
fckeditor-java-demo-2.6.zip
fckeditor-java-2.6-bin.zip

解压fckeditor-java-demo-2.6.zip。将fckeditor-java-demo-2.6\WEB-INF\lib中的 jar包导入到
程序中。

2.删除文件
删除fckeditor/editor/_source文件夹
如果国际化不是太多，删除/editor/lang/下的除了en.js, zh.js, zh-cn.js三个文件的所有文件

3.应用FckEditor

将删除后的fckeditor文件夹直接复制到WebRoot目录下。
（1）在页面中导入fckeditor.js文件
<script type="text/javascript" src="fckeditor/fckeditor.js"></script>
然后应用fckeditor （下面代码要放在具体的显示位置，不能放于<head></head>内）
<script type="text/javascript">
//括号中的值就等同于一个表单元素的name，后台可根据此name获取相应的值
var oFCKeditor = new FCKeditor( 'userName' ) ;
//projectname为工程名，而且最后面必须有"/"
oFCKeditor.BasePath = "/projectname/fckeditor/" ;
oFCKeditor.Create() ;
</script>
注意：basepath 必须以“/”开头，比且此"/"代表当前工程目录

（2）是用JSP标签导入
标签<%@ taglib uri="http://java.fckeditor.net" prefix="FCK" %>
最后在页面中应用<FCK:editor instanceName="myeditor" value=" "></FCK:editor>
必须指定instanceName 和 value 属性，而且 value的值不能为空字符串，最少为个空格

4.配置FCKeditor
可以直接在fckeditor.js文件中直接修改，或添加一个额外的JS文件，覆盖fckeditor.js文件
中的配置。如果是自己建立文件修改配置，需要在fckeditor.js文件中指定此文件，也就是
在 FCKConfig.CustomConfigurationsPath = '' ; 属性中配置，必须是"/projectnam/path"
此配置对所有文件有效

或者在应用JS时候添加，只对当前页面有效
<script type="text/javascript">
//括号中的值就等同于一个表单元素的name，后台可根据此name获取相应的值
var oFCKeditor = new FCKeditor( 'userName' ) ;
//projectname为工程名，而且最后面必须有"/"
oFCKeditor.BasePath = "/projectname/fckeditor/" ;

oFCKeditor.Config["CustomConfigurationsPath"]="projectnam/path";

oFCKeditor.Create() ;
</script>

5.web.xml文件配置

<servlet>
<servlet-name>Connector</servlet-name>
<servlet-class>com.fredck.FCKeditor.connector.ConnectorServlet</servlet-class>
<init-param>
<param-name>baseDir</param-name>
<!—此处默认为/UserFiles/,可以修改，前面不需要写”/项目名” -->
<param-value>/项目中用于存放上传文件的文件夹/</param-value>
</init-param>
<init-param>
<param-name>debug</param-name>
<param-value>true</param-value>
</init-param>
<load-on-startup>1</load-on-startup>
</servlet>

<servlet>
<servlet-name>SimpleUploader</servlet-name>
<servlet-class>com.fredck.FCKeditor.uploader.SimpleUploaderServlet</servlet-class>
<init-param>
<param-name>baseDir</param-name>
<param-value>/项目中用于存放上传文件的文件夹/</param-value>
</init-param>
<init-param>
<param-name>debug</param-name>
<param-value>true</param-value>
</init-param>
<init-param>
<param-name>enabled</param-name>
<!—此处默认为false,表示是否开启上传，需要修改 -->
<param-value>true</param-value>
</init-param>
<init-param>
<param-name>AllowedExtensionsFile</param-name>
<param-value></param-value>
</init-param>
<init-param>
<param-name>DeniedExtensionsFile</param-name> <param-value>php|php3|php5|phtml|asp|aspx|ascx|jsp|cfm|cfc|pl|bat|exe|dll|reg|cgi</param-value>
</init-param>
<init-param>
<param-name>AllowedExtensionsImage</param-name>
<param-value>jpg|gif|jpeg|png|bmp</param-value>
</init-param>
<init-param>
<param-name>DeniedExtensionsImage</param-name>
<param-value></param-value>
</init-param>
<init-param>
<param-name>AllowedExtensionsFlash</param-name>
<param-value>swf|fla</param-value>
</init-param>
<init-param>
<param-name>DeniedExtensionsFlash</param-name>
<param-value></param-value>
</init-param>
<load-on-startup>1</load-on-startup>
</servlet>

<servlet-mapping>
<servlet-name>Connector</servlet-name> <url-pattern>/FCKeditor/editor/filemanager/browser/default/connectors/jsp/connector</url-pattern>
</servlet-mapping>

<servlet-mapping>
<servlet-name>SimpleUploader</servlet-name>
<url-pattern>/FCKeditor/editor/filemanager/upload/simpleuploader</url-pattern>
</servlet-mapping>

6.修改FCKeditor/fckconfig.js中的配置：
所有js配置文件最好保存成UTF-8格式，源代码要读取其中数据，
修改 FCKConfig.DefaultLanguage = 'zh-cn' ;
把FCKConfig.LinkBrowserURL等的值替换成以下内容：

FCKConfig.LinkBrowserURL=FCKConfig.BasePath+"filemanager/browser/default/browser.html?Connector=connectors/jsp/connector" ;

FCKConfig.ImageBrowserURL=FCKConfig.BasePath+"filemanager/browser/default/browser.html?Type=Image&Connector=connectors/jsp/connector" ;

FCKConfig.FlashBrowserURL=FCKConfig.BasePath+"filemanager/browser/default/browser.html?Type=Flash&Connector=connectors/jsp/connector" ;

FCKConfig.LinkUploadURL=FCKConfig.BasePath+'filemanager/upload/simpleuploader?Type=File' ;

FCKConfig.FlashUploadURL=FCKConfig.BasePath+'filemanager/upload/simpleuploader?Type=Flash' ;

FCKConfig.ImageUploadURL=FCKConfig.BasePath+'filemanager/upload/simpleuploader?Type=Image' ;

FCKConfig.TabSpaces = 0 ; 改为FCKConfig.TabSpaces = 1 ;
即在编辑器域内可以使用Tab键。
找到： 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' ;

以下是该文件的具体属性列表：
FCKConfig.CustomConfigurationsPath = '' ; // 自定义配置文件路径和名称
FCKConfig.EditorAreaCSS = FCKConfig.BasePath + 'css/fck_editorarea.css'; // 编辑区的样式表文件
FCKConfig.EditorAreaStyles = '' ; // 编辑区的样式表风格
FCKConfig.ToolbarComboPreviewCSS =''; //工具栏预览CSS
FCKConfig.DocType = '' ;//文档类型
FCKConfig.BaseHref = ''; // 相对链接的基地址
FCKConfig.FullPage = false ; //是否允许编辑整个HTML文件,还是仅允许编辑BODY间的内容
FCKConfig.StartupShowBlocks = false ;//决定是否启用"显示模块"
FCKConfig.Debug = false ;//是否开启调试功能
FCKConfig.SkinPath = FCKConfig.BasePath + 'skins/default/' ; //皮肤路径
FCKConfig.PreloadImages=... //预装入的图片
FCKConfig.PluginsPath = FCKConfig.BasePath + 'plugins/' ; //插件路径
FCKConfig.AutoDetectLanguage = true ; //是否自动检测语言
FCKConfig.DefaultLanguage = 'zh-cn' ; //默认语言
FCKConfig.ContentLangDirection = 'ltr' ; //默认的文字方向,可选"ltr/rtl",即从左到右或从右到左
FCKConfig.ProcessHTMLEntities = true ; //处理HTML实体
FCKConfig.IncludeLatinEntities = true ; //包括拉丁文
FCKConfig.IncludeGreekEntities = true ;//包括希腊文
FCKConfig.ProcessNumericEntities = false ;//处理数字实体
FCKConfig.AdditionalNumericEntities = '' ; //附加的数字实体
FCKConfig.FillEmptyBlocks = true ; //是否填充空块
FCKConfig.FormatSource = true ; //在切换到代码视图时是否自动格式化代码
FCKConfig.FormatOutput = true ; //当输出内容时是否自动格式化代码
FCKConfig.FormatIndentator = ' ' ; //当在源码格式下缩进代码使用的字符
FCKConfig.StartupFocus = false ; //开启时焦点是否到编辑器,即打开页面时光标是否停留在fckeditor上
FCKConfig.ForcePasteAsPlainText = false ; //是否强制粘贴为纯文件内容
FCKConfig.AutoDetectPasteFromWord = true ; //是否自动探测从word粘贴文件,仅支持IE
FCKConfig.ShowDropDialog = true ;//是否显示下拉菜单
FCKConfig.ForceSimpleAmpersand = false ;//是否不把&符号转换为XML实体
FCKConfig.TabSpaces = 0 ;//按下Tab键时光标跳格数,默认值为零为不跳格
FCKConfig.ShowBorders = true ;//合并边框
FCKConfig.SourcePopup = false ;//弹出
FCKConfig.ToolbarStartExpanded = true ;//启动fckeditor工具栏默认是否展开
FCKConfig.ToolbarCanCollapse = true ;//是否允许折叠或展开工具栏
FCKConfig.IgnoreEmptyParagraphValue = true ;//是否忽略空的段落值
FCKConfig.FloatingPanelsZIndex = 10000 ;//浮动面板索引
FCKConfig.HtmlEncodeOutput = false ;//是否将HTML编码输出
FCKConfig.TemplateReplaceAll = true ;//是否替换所有模板
FCKConfig.ToolbarLocation = 'In' ;//工具栏位置,
FCKConfig.CustomConfigurationsPath = '' ; // 自定义配置文件路径和名称
FCKConfig.EditorAreaCSS = FCKConfig.BasePath + 'css/fck_editorarea.css'; // 编辑区的样式表文件
FCKConfig.BaseHref = ''; // 相对链接的基地址
FCKConfig.Debug = true/false; // 是否开启调试功能，当调用FCKDebug.Output()时，会在调试窗中输出内容
FCKConfig.SkinPath = FCKConfig.BasePath + 'skins/default/'; // 设置皮肤
FCKConfig.AutoDetectLanguage = true/false ; // 是否自动检测语言
FCKConfig.DefaultLanguage = 'zh-cn' ; // 设置默认语言
FCKConfig.ContentLangDirection = 'ltr/rtr'; // 默认文字方向，ltr左，rtr右
FCKConfig.FillEmptyBlocks = true/false ; // 使用这个功能，可以将空的块级元素用空格来替代
FCKConfig.FormatSource = true/false; // 切换到代码视图时，是否自动格式化代码
FCKConfig.FormatOutput = true/false; // 当输出内容时是否自动格式化代码
FCKConfig.FormatIndentator = ""; // 当在“源码格式”下缩进代码使用的字符
FCKConfig.GeckoUseSPAN = true/false; // 是否允许SPAN标记代替B，I，U标记
FCKConfig.StartupFocus = true/false; // 开启时是否FOCUS到编辑器
FCKConfig.ForcePasteAsPlainText = true/false;// 强制粘贴为纯文本
FCKConfig.ForceSimpleAmpersand = true/false; // 是否不把&符号转换为XML实体
FCKConfig.TabSpaces = 0/1; // TAB是否有效
FCKConfig.TabSpaces = 4; // TAB键产生的空格字符数
FCKConfig.ShowBorders = true/false; // 是否合并边框
FCKConfig.ToolbarStartExpanded = true/false; // 页面载入时，工具栏是否展开，点“展开工具栏”时才出现
FCKConfig.ToolBarCanCollapse = true/false; // 是否允许展开折叠工具栏
FCKConfig.ToolbarSets = object ; // 编辑器的工具栏，可以自行定义，删减，可参考已存在工具栏
FCKConfig.EnterMode = 'p'; // 编辑器中直接回车，在代码中生成，可选为p | div | br
FCKConfig.ShiftEnterMode = 'br'; // 编辑器中Shift+回车，在代码中生成，可选为p | div | br
FCKConfig.ContextMenu = 字符串数组; // 右键菜单的内容
FCKConfig.FontColors = ""; // 文字颜色列表
FCKConfig.FontNames = ""; // 字体列表
FCKConfig.FontSizes = ""; // 字号列表
FCKConfig.FontFormats = ""; // 文字格式列表
FCKConfig.StylesXmlPath = ""; // CSS样式列表的XML文件的位置
FCKConfig.TemplatesXmlPath = ""; // 模版的XML文件位置
FCKConfig.SpellChecker = "ieSpell/Spellerpages"; // 拼写检查器
FCKConfig.IeSpellDownloadUrl = ""; // 下载拼写检查器的网址
FCKConfig.SmileyPath = FCKConfig.BasePath + 'images/smiley/msn/'; // 表情文件存放路径
FCKConfig.SmileyImages = ''; // 表情文件名称列表，具体参考默认设置
FCKConfig.SmileyColumns = 8; // 表情窗口显示表情列数
FCKConfig.SmileyWindowWidth = 320; // 表情窗口显示宽度，此窗口会因为表情文件的改变而作调整
FCKConfig.SmileyWindowHeight = 240; // 表情窗口显示高度，此窗口会因为表情文件的改变而作调整
FCKConfig.FullPage = true/false; // 是否允许编辑整个HTML文件，还是仅允许编辑BODY间的内容
上传设置
var _FileBrowserLanguage = 'php' ; // asp | aspx | cfm | lasso | perl | php | py
var _QuickUploadLanguage = 'php' ; // asp | aspx | cfm | lasso | php
//第一个是文件浏览器使用的语言，第二个快速上传使用的语言，改成你需要的，JSP项目这里就不要改了
FCKConfig.LinkUploadAllowedExtensions = "" ; // empty for all
FCKConfig.LinkUploadDeniedExtensions =".(php|php3|php5|phtml|asp|aspx|ascx|jsp|cfm|cfc|pl|bat|exe|dll|reg|cgi)$"
//这是两个允许和拒绝上传的文件类型列表
FCKConfig.ImageBrowser = false ;//是否在插入图片功能里面启用服务器文件浏览功能
FCKConfig.ImageBrowserURL = FCKConfig.BasePath + 'filemanager/browser/default/browser.html?Type=Image&Connector=connectors/' + _FileBrowserLanguage + '/connector.' + _FileBrowserExtension ;
//Type=Image 表示文件类型是image这会使文件浏览器定位到文件上传路径/image/文件夹下面
FCKConfig.FlashBrowser = false ;//是否在插入flash功能中启用服务器文件浏览功能
FCKConfig.LinkUpload = false ;//是否启用插入链接的快速上传功能
FCKConfig.ImageUpload = false ;//是否启用图片快速上传功能
FCKConfig.FlashUpload = false ;//是否启用flash上传功能

7.增加视频上传的功能及其工具栏按钮
媒体插件下载地址：
http://www.webmb.com.cn/upload/media_plugin_for_FCKeditor_23_build_1054.rar
安装步骤一：　　将 madmedia整个文件夹拷贝至 editor/plugins/下，找到FCKConfig.PluginsPath = FCKConfig.BasePath + 'plugins/' ; 这句，查看插件路径是否正确。
安装步骤二：
修改fckconfig.js，在文件末尾增加如下一行代码，FCKConfig.Plugins.Add( 'madmedia', 'en,zh-cn' ) ;
安装步骤三：修改fckconfig.js，找到toolbar按钮设置的部分，将媒体按钮加入toolbar，例如，
原来是，
FCKConfig.ToolbarSets["Default"] = [
['Image','Flash']
]

改为，
FCKConfig.ToolbarSets["Default"] = [
['Image','Flash','MadMedia']
]

FCKConfig.ContextMenu= ['Generic','Link','Anchor','Image','Flash','Select','Textarea','Checkbox','Radio','TextField','HiddenField','ImageButton','Button','BulletedList','NumberedList','Table','Form']

中也可加入
FCKConfig.ContextMenu= ['Generic','Link','Anchor','Image','Flash','MadMedia','Select','Textarea','Checkbox','Radio','TextField','HiddenField','ImageButton','Button','BulletedList','NumberedList','Table','Form']

安装步骤四：修改插件中的/FCKeditor/editor/plugins/madmedia/media.js文件，把其中所有的包含”Flash”的字符串用”Link”替换，因为此插件的上传的media文件的存放路径与以Link方式上传文件的目录相同，并不是Flash文件的上传路径。

安装步骤五：为了解决上传中文文件文件名变为乱码的问题需要修改FCKeditor的源代码，在源码的com.fredck.FCKeditor.uploader.SimleUploaderServlet类文件中搜索语句DiskFileUpload upload = new DiskFileUpload();再其后添加一句upload.setHeaderEncoding("UTF-8");编辑完成后把整个源代码的com包重新打成一个.jar包代替原来的.jar包。

8.解决FCKeditor 与 struts2 上传时出错
原因是struts2的filter拦截了上传文件的动作，
//org.apache.struts2.dispatcher.Dispatcher.java
public HttpServletRequest wrapRequest(HttpServletRequest request, ServletContext servletContext) throws IOException {
// don't wrap more than once
if (request instanceof StrutsRequestWrapper) {
return request;
}
String content_type = request.getContentType();
if (content_type != null && content_type.indexOf("multipart/form-data") != -1) {
MultiPartRequest multi = getContainer().getInstance(MultiPartRequest.class);
request = new MultiPartRequestWrapper(multi, request, getSaveDir(servletContext));
} else {
request = new StrutsRequestWrapper(request);
}
return request;
}
在这里又找不到MultiPartRequest.class的实现类。于是出错了。
只要不让struts2拦截处理上传事件， url-pattern改为*.action就可以解决
但是因为struts2的tag需要经过过滤器，所以如果你jsp页面上面用到了struts2的tag，那么就要增加一个*.jsp的url-pattern，修改web.xml文件如下：
<filter>
<filter-name>struts2</filter-name>
<filter-class>
org.apache.struts2.dispatcher.FilterDispatcher
</filter-class>
</filter>

<filter-mapping>
<filter-name>struts2</filter-name>
<url-pattern>*.action</url-pattern>
</filter-mapping>

<filter-mapping>
<filter-name>struts2</filter-name>
<url-pattern>*.jsp</url-pattern>
</filter-mapping>
而上传页面调用时直接用文件名调用（如upload.jsp）。struts2只处理 *.action 的请求。
试了一下。和预想的一样，一切OK。

9.上传时弹出“Security error. You probably don't have enough permissions to upload. Please check your server.”错误对话框的解决方法。
比如存放上传文件的文件夹是根目录下的upload，不同类型的文件会存到它的不同子文件夹下，比如图片放在子文件夹Image,Flash放在子文件夹Flash，其它文件夹放在子文件夹File（正如在第4点中提到的配置文件fckconfig.js中URLFCKConfig.FlashUploadURL=FCKConfig.BasePath+'filemanager/upload/simpleuploader?Type=Flash' ;Type的参数值就是上传到的子文件夹的名称），而这些子文件夹是上传第一个文件时程序自建的，而一般的服务器都不让Internet访问用户有新建文件夹的权限，所以需要把这三个子文件夹事先建好。

10.JS获取、修改FecEditor内容
   <script type="text/javascript" language="javascript">
       //获取编辑器中HTML内容
        function getEditorHTMLContents(EditorName) {
           var fckCont = FCKeditorAPI.GetInstance(EditorName).GetXHTML(true);
           alert("fckCont is:"+fckCont);

        }
       // 获取编辑器中文字内容
function getEditorTextContents(EditorName) {
    var oEditor = FCKeditorAPI.GetInstance(EditorName);
    var fckCont = oEditor.EditorDocument.body.innerText;
    alert("fckCont is:"+fckCont);
}

// 清空编辑器中内容
function clearEditorContents(EditorName) {
    FCKeditorAPI.GetInstance(EditorName).EditorDocument.body.innerHTML="";
}
// 设置编辑器中内容
function SetEditorContents(EditorName,cont) {
    FCKeditorAPI.GetInstance(EditorName).EditorDocument.body.innerHTML=cont;
}
    </script>