FCKeditor简介及常用配置在网页中使用FCKeditor FCKeditor字符转义的问题

huibin

浏览: 739787 次
性别:
来自: 郑州

最近访客更多访客>>

allen900625

dameimm

cntip2010

马桶拔子

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

FCKeditor

fckeditor CMS JavaScript 浏览器 Flash

FCKeditor2.3控件使用指南

FCKeditor简介及常用配置
======================================================================
FCKeditor是一套开源的在线WYSIWYG编辑器，它几乎囊括了现在网上所有的在线编辑器的功能，特别适合于在线编辑文章和新闻等。功能强大,配置简单,支持多国语言。版本包括javascript版，Java版和.Net版。其官方网站为：http://www.fckeditor.net/，基于GNU许可协议，目前最新版本为2.3。以下主要以javascript版为例简要说明配置和使用方法。假设我的上下文路径为/cms,下载FCKeditor_2.3,将其中的FCKeditor目录解压到/cms/js目录下。

FCKeditor包含2个主要文件：fckeditor.js和fckconfig.js，通过配置文件可以方便完成自定义的使用方案。主要配置文件为fckconfig.js，位于FCKeditor根目录下面，不过建议不要更改这个文件，最好建立自己的配置文件，这样可以及时的恢复到最初始的配置。在FCKeditor目录下的editor目录下建立一个myConfig.js文件，然后打开fckconfig.js文件修改
FCKConfig.CustomConfigurationsPath的值为myConfig.js，如下：
FCKConfig.CustomConfigurationsPath = ‘myConfig.js’ ;
这样就可以在myConfig.js文件中根据需要配置各种参数；如：
// 默认语言
FCKConfig.DefaultLanguage = ‘zh-cn’;
// 是否处理HTML实体,为true时会将双引号,单引号字符转换成相应的转义符,如:&quote; '
FCKConfig.ProcessHTMLEntities = false ;
// 隐藏"插入图片"对话框中的"链接"
FCKConfig.ImageDlgHideLink = true ;
// 隐藏"插入图片"对话框中的"高级"
FCKConfig.ImageDlgHideAdvanced = true ;
// 隐藏"插入图片"对话框中的浏览服务器按钮
FCKConfig.ImageBrowser = false ;

下面说明几个常用的配置属性
FCKConfig.CustomConfigurationsPath
自定义配置文件的路径，根目录为FCKeditor\editor目录,也就是说自定义的配置文件只能放在FCKeditor\editor目录下,或者该目录下的某子目录,不能放在该目录以上的目录.

FCKConfig.EditorAreaCSS 编辑器界面的样式表文件

FCKConfig.BaseHref 编辑器中链接地址的默认值。
假如一个有效的图片文件的完整url为:http://223.254.101.1:8080/cms/uploads/img.jpg.
如果编辑器中需要用到相对于上下文的路径，则该参数值必须是“主机名+上下文名”，如：http://223.254.101.1:8080/cms/,这时相对路径uploads/img.jpg才是有效的;否则编辑器中的相对路径只是相对于主机名的地址，如uploads/img.gif是一个无效的相对地址

FCKConfig.FullPage 编辑器中的内容默认是否包含html页面的<html><head><body>等标签
FCKConfig.SkinPath 编辑器外观路径
FCKConfig.PluginsPath 编辑器插件路径
FCKConfig.AutoDetectLanguage 是否自动检测浏览器默认语言
FCKConfig.DefaultLanguage 默认编辑器语言
FCKConfig.StartupFocus 是否自动聚焦到编辑器内
FCKConfig.TabSpaces 是否支持Tab空格1支持0不支持
FCKConfig.ToolbarSets[key] 定义工具条
FCKConfig.ContextMenu 鼠标右健上下文菜单
FCKConfig.FontColors 编辑器工具条中文字颜色的列表项
FCKConfig.FontNames 编辑器工具条中字体的列表项
FCKConfig.FontSizes 编辑器工具条中字体大小的列表项，注意列表项目用;分隔，每个列表项/之前是字体大小值，后面是显示的名字
FCKConfig.MaxUndoLevels 可以撤销操作的步数
FCKConfig.LinkBrowser 是否允许使用"插入图片"对话框中的链接中的浏览服务器上的文件
FCKConfig.ImageBrowser 是否允许使用插入图片中浏览服务上的文件
FCKConfig.FlashBrowser 是否允许使用插入Flash中浏览服务上的文件
FCKConfig.LinkUpload 是否打开链接中的上传功能
FCKConfig.ImageUpload 是否打开插入图片中的上传功能
FCKConfig.FlashUpload 是否打开插入Flash中的上传功能

一个完整的自定义配置文件如下:
start——————————————————————
// FCKeditor自定义配置文件myConfig.js,位于FCKeditor\editor目录下

// 默认语言
FCKConfig.DefaultLanguage = ‘zh-cn’ ;

// 是否处理HTML实体,为true时会将双引号,单引号字符转换成相应的转义符,如:&quote; '
FCKConfig.ProcessHTMLEntities = false ;

// 隐藏"插入图片"对话框中的"链接"
FCKConfig.ImageDlgHideLink = true ;
// 隐藏"插入图片"对话框中的"高级"
FCKConfig.ImageDlgHideAdvanced = true ;

// 隐藏"插入图片"对话框中的浏览服务器按钮
FCKConfig.ImageBrowser = false ;

// 自定义工具栏图标,可以根据需要隐藏一些不常用的功能. ‘-’表示分隔符,用[]括起来的是一条工具栏,’/'表示换行显示
FCKConfig.ToolbarSets["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'],
//暂时隐藏"Flash"功能
//['Image','Flash','Table','Rule','Smiley','SpecialChar','PageBreak','UniversalKey'],
['Image','Table','Rule','Smiley','SpecialChar','PageBreak','UniversalKey'],
’/',
['Style','FontFormat','FontName','FontSize'],
['TextColor','BGColor'],
['FitWindow','-','About']
] ;
end——————————————————————-

在网页中使用FCKeditor
=======================================================================
将FCKeditor目录解压到/cms/js目录，配置自定义配置文件后，接下来说明页面中的使用：
首先将fckeditor.js包含到网页中，如下：
<script type="text/javascript" src="js/FCKeditor/fckeditor.js"></script>
FCKeditor提供2中创建实例的方法：

方法一：在需要显示FCKeditor编辑器的地方插入以下js代码：
<script language="javascript">
// 创建相当于<textarea name="editor" style="width:100%;"></textarea>的对象
// 参数’editor’是产生的textarea的name值
var oFCKeditor = new FCKeditor(‘editor’) ;
oFCKeditor.BasePath = "$link.ContextPath/js/FCKeditor/" ; // 必须指定
oFCKeditor.Config["BaseHref"]="$link.ContextURL/"; // 保证相对路径相对于上下文
oFCKeditor.Config["DefaultLanguage"]="zh-cn"; // 默认语言
oFCKeditor.Width = "100%"; // 编辑器宽度
oFCKeditor.Height = "370"; // 编辑器高度
oFCKeditor.Create() ;
</script>

方法二：在页面的onload事件中,添加以下代码以替换一个已经存在的TEXTAREA标记
<html>
<head>
    <script type="text/javascript">
      window.onload = function() {
        var oFCKeditor = new FCKeditor(‘MyTextarea’) ;
        oFCKeditor.ReplaceTextarea() ;
      }
    </script>
</head>
<body>
    <textarea id="MyTextarea" name="MyTextarea">This is <b>the</b> initial value.</textarea>
</body>
</html>

方法二适合于需要给编辑器赋初始值的情况。

FCKeditor功能强大，但要真正符合我们的需求还需要做必要的修改，以下将对图片上传功能做相关的修改说明：
1.打开文件FCKeditor\editor\dialog\fck_image\fck_image.js，找到以下行：
window.parent.AddTab( ‘Info’, FCKLang.DlgImgInfoTab ) ;

FCKLang.DlgImgInfoTab表示插入图片对话框中的“图像”标签，将该行转移到第二个if语句后面，这样插入图片对话框打开时默认显示的标签将不是“图像”。根据需要此行也可以不改动。

2.打开文件FCKeditor\fckconfig.js，增加一个函数contextPath：
function contextPath(str){
var ctx = "";
var index = str.indexOf("/");
if(index == 0){
    var index2 = str.substring(1).indexOf("/");
    if(index2 == -1){
       index2 = str.substring(1).length;
    }
    ctx = str.substring(1,index2 + 1);
} else {
    ctx = str.substring(0,index);
}
return "/" + ctx;
}
修改FCKConfig.ImageUploadURL为：
FCKConfig.ImageUploadURL = contextPath(FCKConfig.BasePath) + "/fileList.do?type=uploadImg";

3.打开文件FCKeditor\editor\dialog\fck_image.html，找到id分别为divInfo和divUpload的div行互换，目的是配合上面的修改1，实现“上传”标签在“图像”标签之后。

4.增加一个文件imgUploadComplete.vm，用于在文件上传完毕后调用插入图片对话框中的函数，将上传的图片信息传递给插入图片对话框。文件源码如下：
<html>
<head><title></title>
<script language="javascript">
window.parent.OnUploadCompleted($!errorNumber, "$!imgSrc", "$!fileName", "$!data");
</script>
</head>
<body></body>
</html>

$!errorNumber等变量由后台程序赋值。
函数OnUploadCompleted位于FCKeditor\editor\dialog\fck_image\fck_image.js中，主要是对图片上传完之后的处理，如提示信息等，可以根据需要酌情修改。

图片上传原理
=======================================================================
在插入图片对话况中的上传页面中（即FCKeditor\editor\dialog\fck_image\fck_image.js），有一个不可见的name值为UploadWindow的iframe，上传图片时form的target就是指向此iframe，图片上传完后此iframe中的页面就跳转到页面imgUploadComplete.vm，此页面一加载就马上调用方法OnUploadCompleted将上传图片的信息返回给插入图片对话框，此信息中最主要的是图片上传后的相对于网站的相对地址。

FCKeditor字符转义的问题
=======================================================================
在没有对FCKeditor作任何配置时，FCKeditor会对以下字符作相应转义：
"转换为&quote;
‘转换为'
<转换为<
>转换为>
&转换为&
?转换为 
其中，通过配置FCKConfig.ProcessHTMLEntities为false可以阻止"和’的转义，而?的自动转义我个人认为是一个bug。
在FCKeditor\fckeditor.js文件中增加一个函数：
function restoreHtmlEntity(htmlText){
var text = htmlText;
text = text.replace(/</g,’<’);
text = text.replace(/>/g,’>’);
text = text.replace(/&/g,’&’);
return text;
}
功能是将字符串htmlText中的<,>h和&转义后的字符还原，这个函数在页面中提交数据到后台时会用到。具体用法如下：
var text = FCKeditorAPI.GetInstance(‘editor’).GetXHTML(true); // editor为编辑器的name值
document.myForm.Body.value = restoreHtmlEntity(text); // 调用函数restoreHtmlEntity还原转义字符
另外还要修改FCKeditor.prototype._HTMLEncode函数，将其中的正则表达式替换语句注释掉，目的是禁止对双引号、尖括号等字符转义。

对?的自动转义问题的解决方法:
1.找到文件FCKeditor\editor\js\fckeditorcode_ie.js,定位到第29行,找到方法名为FCKXHtmlEntities.Initialize的函数体,在函数的最后2行找到FCKXHtmlEntities.Entities={ ‘?’:'nbsp’ },将此语句改成FCKXHtmlEntities.Entities={}

2.找到文件FCKeditor\editor\js\fckeditorcode_gecko.js,定位到第28行,找到方法名为FCKXHtmlEntities.Initialize的函数体,在函数的最后2行找到FCKXHtmlEntities.Entities={ ‘?’:'nbsp’ },将此语句改成FCKXHtmlEntities.Entities={}

分享到：

java.lang.IllegalStateException异常解决 ... | FCK添加自义功能、按钮

2010-11-01 20:51
浏览 3499
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论