FCKeditor在javascript中的调用
JavaScript
调用方式：
__________________________________________________
<script
type="text/javascript" src="FCKeditor/fckeditor.js"></script>
<textarea name="content" cols="80"
rows="4">
</textarea>
<script
type="text/javascript">
var FCKeditor = new FCKeditor("content");
FCKeditor.BasePath = "FCKeditor/";
oFCKeditor.Height = 400;
oFCKeditor.ToolbarSet = "Default";
oFCKeditor.ReplaceTextarea();
</script>
如果想要使用从数据库读来的文本数据或者是后台来自文件的 txt/html
文本数据。
只要在
<textarea name="content"
cols="80"
rows="4">
</textarea>
__________________________________________________
中加入自己的显示内容的 formbean
对应字段即可
__________________________________________________
<textarea
name="content" cols="80" rows="4">
<c:out value="${contentData}"
/>
</textarea>
__________________________________________________
这样内容就会被显示在 FCKeditor
编辑框中了，点击提交按钮以后就可以在后台的相应 java action
中得到 content 参数中的内容就是页面上 FCKeditor
中的内容数据了。可以在 struts/jsf
中使用。
由于给 FCKeditor
瘦身，所以常会报缺少对象支持等错误，只要在 FCKeditor/editor/lang
中加上相应的js 语言文件即可。如果加载页面失败（FCKeditor
未定义）还有一个可能就是引用 FCKeditor/fckeditor.js
文件路径不对！
关于 FCKeditor
瘦身要点如下：
1.将 FCKeditor
目录下及子目录下所有以“_”下划线开头的文件夹删除
2.FCKeditor
根目录下只保留 fckconfig.js, fckeditor.js,
fckstyles.xml, fcktemplates.xml，其余全部删除
3.将 editor/filemanager/upload
目录下文件及文件夹清空
4.将
/editor/filemanager/browser/default/connectors/ 下的所有文件删除
5.还可以将 editor/skins
目录下的皮肤文件删除，只留下 default 一套皮肤（如果你不需要换皮肤的话
6.还可以将 editor/lang
目录下文件删除，只保留 en.js, fcklanguagemanager.js,
zh-cn.js, zh.js 文件
7.如果你是使用 javascript
来调用加载
FCKeditor，那么就不需要在 web.xml 中配置 fckeditor
的 tag 文件。
8.还有一个问题刚开始使用 FCKeditor
的人常会遇到就怎么控制它的 toolbar 的大小和元素排列，其实很简单。
在 fckconfig.js
中用这样的标签[]来划分每行的元素的多少，这样就可以控制 toolbar
的长短和大小了，具体示例参看：fckconfig.js
中的
toolbarset["Default"]
用 fckconfig.js
中的一些选项来控制 toolbarset
中控件的功能，实现功能裁剪：
1)：取消超链接中的浏览服务器和上传功能，方法如下：
__________________________________________________
FCKConfig.LinkBrowser
= true;
FCKConfig.LinkUpload = true;
改为：
FCKConfig.LinkBrowser = false;
FCKConfig.LinkUpload = false;
__________________________________________________
2)：取消图片链接中的浏览服务器和上传功能，方法如下：
__________________________________________________
FCKConfig.ImageUpload
= true;
FCKConfig.ImageBrowser = true;
改为：
FCKConfig.ImageUpload = false;
FCKConfig.ImageBrowser = false;
__________________________________________________
3)：Dlg Button
中取消高级功能，方法如下：
FCKConfig.LinkDlgHideAdvanced =
false ;
FCKConfig.ImageDlgHideAdvanced = false ;
改为：
FCKConfig.ImageDlgHideAdvanced
= true ;
FCKConfig.LinkDlgHideTarget = true ;
__________________________________________________
fckconfig.js总配置文件，可用记录本打开，修改后将文件存为utf-8
编码格式。找到：
__________________________________________________
FCKConfig.TabSpaces
= 0;
改为：
FCKConfig.TabSpaces = 1;
即在编辑器域内可以使用Tab键。
如果你的编辑器还用在网站前台的话，比如说用于留言本或是日记回复时，那就不得不考虑安全了，
在前台千万不要使用Default的toolbar，要么自定义一下功能，要么就用系统已经定义好的Basic，
也就是基本的toolbar，找到：
__________________________________________________
FCKConfig.ToolbarSets["Basic"]
= ['Bold', 'Italic', '-', 'OrderedList', 'UnorderedList', '-', /*'Link',
*/'Unlink', '-', 'Style', 'FontSize', 'TextColor', 'BGColor', '-', 'Smiley',
'SpecialChar', 'Replace', 'Preview'];
这是改过的Basic，把图像功能去掉，把添加链接功能去掉，因为图像和链接和flash和图像按钮添加功能都能让前台页直接访问和上传文件，
fckeditor还支持编辑域内的鼠标右键功能。
FCKConfig.ContextMenu =
['Generic', /*'Link', */'Anchor', /*'Image', */'Flash', 'Select', 'Textarea',
'Checkbox', 'Radio', 'TextField', 'HiddenField', /*'ImageButton', */'Button',
'BulletedList', 'NumberedList', 'TableCell', 'Table', 'Form'];
这也是改过的把鼠标右键的"链接、图像，FLASH，图像按钮"功能都去掉。
找到：
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';
三种方法调用FCKeditor
1.FCKeditor自定义标签
2.script脚本语言调用
3.FCKeditor API
调用
1、适时打开编辑器
__________________________________________________
很多时候，我们在打开页面的时候不需要直接打开编辑器，而在用到的时候才打开，这样一来有很好的用户体验，另一方面可以消除FCK在加载时对页面打开速度的影响，点击"Open
Editor"按钮后才打开编辑器界面。
实现原理：
使用JAVASCRIPT版的FCK，在页面加载时（未打开FCK），创建一个隐藏的TextArea域，这个TextArea
的name和ID要和创建的FCK实例名称一致，然后点击"Open
Editor"按钮时，通过调用一段函数，使用FCK的ReplaceTextarea()方法来创建FCKeditor，代码如下：
__________________________________________________
<script
type="text/javascript">
<!–
function showFCK(){
var FCKeditor =
new FCKeditor( 'fbContent' ) ;
oFCKeditor.BasePath = '/FCKeditor/' ;
oFCKeditor.ToolbarSet = 'Basic' ;
oFCKeditor.Width = '100%' ;
oFCKeditor.Height = '200' ;
oFCKeditor.ReplaceTextarea() ;
}
</script>
<textarea name="fbContent"
id="fbContent"></textarea>
2、使用FCKeditor
的
API
__________________________________________________
FCKeditor编辑器，提供了非常丰富的API，用于给End User实现很多想要定制的功能，比如最基本的数据验证，如何在提交的时候用JS判断当前编辑器区域内是否有内容，FCK的API提供了GetLength()方法；
再比如如何通过脚本向FCK里插入内容，使用InsertHTML()等；
还有，在用户定制功能时，中间步骤可能要执行FCK的一些内嵌哦作，那就用ExecuteCommand()方法。
详细的API列表，请查看FCKeditor的Wiki。而常用的API，请查看FCK压缩包里的_samples/html/sample08.html。此处就不贴代码了。
3、外联编辑条（多个编辑域共用一个编辑条）
__________________________________________________
这个功能是2.3版本才开始提供的，以前版本的FCKeditor要在同一个页面里用多个编辑器的话，得一个个创建，现在有了这个外联功能，就不用那么麻烦了，只需要把工具条放在一个适当的位置，后面就可以无限制的创建编辑域了。
要实现这种功能呢，需要先在页面中定义一个工具条的容器：<div
id="xToolbar"></div>，然后再根据这个容器的id属性进行设置。
JAVASCRIPT实现代码：
__________________________________________________
<div
id="xToolbar"></div>
FCKeditor 1:
<script
type="text/javascript">
<!–
// Automatically calculates the
editor base path based on the _samples directory.
// This is usefull only
for these samples. A real application should use something like this:
//
oFCKeditor.BasePath = '/fckeditor/'; // '/fckeditor/' is the default
value.
var sBasePath = document.location.pathname.substring(0,
document.location.pathname.lastIndexOf('_samples'));
var FCKeditor =
new FCKeditor( 'FCKeditor_1' );
oFCKeditor.BasePath = sBasePath;
oFCKeditor.Height = 100;
oFCKeditor.Config[ 'ToolbarLocation' ]
= 'Out:parent(xToolbar)';
oFCKeditor.Value = 'This is some
<strong>sample text</strong>. You are using FCKeditor.';
oFCKeditor.Create();
//–>
</script>
<br
/>
FCKeditor 2:
<script
type="text/javascript">
<!–
FCKeditor = new FCKeditor(
'FCKeditor_2' );
oFCKeditor.BasePath = sBasePath;
oFCKeditor.Height = 100;
oFCKeditor.Config[ 'ToolbarLocation' ]
= 'Out:parent(xToolbar)';
oFCKeditor.Value = 'This is some
<strong>sample text</strong>. You are using FCKeditor.';
oFCKeditor.Create();
//–>
</script>
__________________________________________________
此部分的详细DEMO请参照_samples/html/sample11.html，_samples/html/sample11_frame.html
4、文件管理功能、文件上传的权限问题
__________________________________________________
一直以来FCKeditor的文件管理部分的安全是个值得注意，但很多人没注意到的地方，虽然FCKeditor在各个Release版本中一直存在的一个功能就是对上传文件类型进行过滤，但是她没考虑过另一个问题：到底允许谁能上传？到底谁能浏览服务器文件？
之前刚开始用FCKeditor时，我就出现过这个问题，还好NetRube（FCKeditor中文化以及FCKeditor
ASP版上传程序的作者）及时提醒了我，做法是去修改FCK上传程序，在里面进行权限判断，并且再在fckconfig.js里把相应的一些功能去掉。但随之FCK版本的不断升级，每升一次都要去改一次配置程序fckconfig.js，我发觉厌烦了，就没什么办法能更好的控制这种配置么？事实上，是有的。
在fckconfig.js里面，有关于是否打开上传和浏览服务器的设置，在创建FCKeditor时，通过程序来判断是否创建有上传浏览功能的编辑器。首先，我先在fckconfig.js里面把所有的上传和浏览设置全设为false，接着我使用的代码如下：
JAVASCRIPT版本：
__________________________________________________
<script
type="text/javascript">
var FCKeditor = new FCKeditor( 'fbContent'
);
oFCKeditor.Config['LinkBrowser'] = true;
oFCKeditor.Config['ImageBrowser'] = true;
oFCKeditor.Config['FlashBrowser'] = true;
oFCKeditor.Config['LinkUpload'] = true;
oFCKeditor.Config['ImageUpload'] = true;
oFCKeditor.Config['FlashUpload'] = true;
oFCKeditor.ToolbarSet =
'Basic';
oFCKeditor.Width = '100%';
oFCKeditor.Height = '200';
oFCKeditor.Value = '';
oFCKeditor.Create();
</script>
在按钮旁边加文字
打开 editor/js/
两个js文件
fckeditorcode_gecko.js
fckeditorcode_ie.js
第一个是支持非ie浏览器的
第二个文件是支持ie浏览器的
搜索
FCKToolbarButton，可以看到许多类似这样的语句：
case 'Save':B = new
FCKToolbarButton('Save', FCKLang.Save, null, null, true, null, 3); break;
'Save'是按钮英文名字
FCKToolbarButton
的四个参数分别是：
按钮命令名称，按钮标签文字，按钮工具提示，按钮样式，按钮是否在源代码模式可见，按钮下拉菜单其中将第4项参数设置为 FCK_TOOLBARITEM_ICONTEXT
即可使按钮旁边出现文字，注意没有引号。
例如：
case 'Preview':B =
new FCKToolbarButton('Preview', FCKLang.Preview, null, FCK_TOOLBARITEM_ICONTEXT,
true, null, 5);
这样我们就可以将我们经常用的3种模式源代码、预览、全屏编辑按钮都加上文字了。
解释fck样式的工作原理
__________________________________________________
fck的样式设置涉及到了两个文件，一个是你定义好的样式表文件.css，另一个是告诉fck样式表如何使用的xml文件，两个文件确一不可。
css文件的位置是不做要求的，但是需要你在应用的编辑器的页面上插入样式表文件的链接。这样才能显示出来样式。
fckstyles.xml
在与editor目录同级的目录下。该文件定义了那些样式可以使用在那些标签里面。
每一个<style>将来会生成一个样式的菜单项。name名称就是显示在菜单里的文字；element定义了该样式可以应用在那种html标签上，<Attribute>的 name 指定了将会修改标签的哪个属性来应用样式，value则是修改成的值。
看这个：
<Style
name="Title" element="span">
<Attribute name="class" value="Title"
/>
</Style>
如果你在fck选定了文字
"经典论坛 > 前台制作与脚本专栏 > FCKeditor
实战技巧 - 1 >
编辑帖子" 应用该样式则原来文字就会变成<span
class="Title">经典论坛 > 前台制作与脚本专栏 > FCKeditor
实战技巧 - 1 >
编辑帖子</span>
注意：如果编辑器呈整页编辑状态，那么整页里面也需要插入样式表链接才能显示出来样式。
============================================
FCKeditor
Javascript API（翻译整理）
原文地址：http://wiki.fckeditor.net/Developer%27s_Guide/Javascript_API
__________________________________________________
FCK 编辑器加载后，将会注册一个全局的 FCKeditorAPI
对象。
FCKeditorAPI
对象在页面加载期间是无效的，直到页面加载完成。如果需要交互式地知道 FCK
编辑器已经加载完成，可使用"FCKeditor_OnComplete"函数。
<script
type="text/javascript">
function FCKeditor_OnComplete(editorInstance)
{
FCKeditorAPI.GetInstance('FCKeditor1').Commands.GetCommand('FitWindow').Execute();
}
</script>
在当前页获得 FCK
编辑器实例：
var Editor =
FCKeditorAPI.GetInstance('InstanceName');
从 FCK
编辑器的弹出窗口中获得 FCK 编辑器实例：
var Editor =
window.parent.InnerDialogLoaded().FCK;
从框架页面的子框架中获得其它子框架的 FCK 编辑器实例：
var Editor =
window.FrameName.FCKeditorAPI.GetInstance('InstanceName');
从页面弹出窗口中获得父窗口的 FCK 编辑器实例：
var Editor =
opener.FCKeditorAPI.GetInstance('InstanceName');
获得 FCK 编辑器的内容：
oEditor.GetXHTML(formatted); // formatted
为：true|false，表示是否按HTML格式取出
也可用：
oEditor.GetXHTML();
设置 FCK
编辑器的内容：
oEditor.SetHTML("content",
false); // 第二个参数为：true|false，是否以所见即所得方式设置其内容。此方法常用于"设置初始值"或"表单重置"哦作。
插入内容到 FCK 编辑器：
oEditor.InsertHtml("html"); //
"html"为HTML文本
检查 FCK 编辑器内容是否发生变化：
oEditor.IsDirty();
在 FCK 编辑器之外调用 FCK 编辑器工具条命令：
命令列表如下：
__________________________________________________
DocProps,
Templates, Link, Unlink, Anchor, BulletedList, NumberedList,
About, Find,
Replace, Image, Flash, SpecialChar, Smiley, Table,
TableProp, TableCellProp,
UniversalKey, Style, FontName, FontSize,
FontFormat, Source, Preview, Save,
NewPage, PageBreak, TextColor,
BGColor, PasteText, PasteWord,
TableInsertRow, TableDeleteRows,
TableInsertColumn, TableDeleteColumns,
TableInsertCell, TableDeleteCells,
TableMergeCells, TableSplitCell,
TableDelete, Form, Checkbox, Radio,
TextField, Textarea, HiddenField,
Button, Select, ImageButton, SpellCheck,
FitWindow, Undo,
Redo
__________________________________________________
使用方法如下：
__________________________________________________
oEditor.Commands.GetCommand('FitWindow').Execute();
__________________________________________________
