<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>Power by Result Search &#187; fckeditor</title>
	<atom:link href="http://www.result-search.com/sty/category/technology/fckeditor/feed" rel="self" type="application/rss+xml" />
	<link>http://www.result-search.com/sty</link>
	<description>Just another weblog</description>
	<lastBuildDate>Wed, 23 Jun 2010 03:12:17 +0000</lastBuildDate>
	<generator>http://wordpress.org/?v=2.9.2</generator>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
			<item>
		<title>Fckeditor 资料整理(java版)</title>
		<link>http://www.result-search.com/sty/2009/04/23/fckeditor-resoursesbase-on-java.html</link>
		<comments>http://www.result-search.com/sty/2009/04/23/fckeditor-resoursesbase-on-java.html#comments</comments>
		<pubDate>Thu, 23 Apr 2009 06:26:59 +0000</pubDate>
		<dc:creator>admin</dc:creator>
				<category><![CDATA[fckeditor]]></category>

		<guid isPermaLink="false">http://www.yaaahaaa.com/2009/04/23/fckeditor-%e8%b5%84%e6%96%99%e6%95%b4%e7%90%86java%e7%89%88/</guid>
		<description><![CDATA[

以下内容为收集整理：＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝



javascript调用方式：
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
&#60;script type=&#8221;text/javascript&#8221; src=&#8221;FCKeditor/fckeditor.js&#8221;&#62;&#60;/script&#62;
&#60;textarea name=&#8221;content&#8221; cols=&#8221;80″ rows=&#8221;4″&#62;
&#60;/textarea&#62;
&#60;script type=&#8221;text/javascript&#8221;&#62;
var oFCKeditor = new FCKeditor(&#8220;content&#8221;);
oFCKeditor.BasePath = &#8220;FCKeditor/&#8221;;
oFCKeditor.Height = 400;
oFCKeditor.ToolbarSet = &#8220;Default&#8221;;
oFCKeditor.ReplaceTextarea();
&#60;/script&#62;
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
如果想要使用从数据库读来的文本数据或者是后台来自文件的txt/html文本数据。
只要在
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
&#60;textarea name=”content” cols=”80″ rows=”4″&#62;
&#60;/textarea&#62;
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
中加入自己的显示内容的formbean对应字段即可
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
&#60;textarea name=”content” cols=”80″ rows=”4″&#62;
&#60;c:out value=”${contentData}” /&#62;
&#60;/textarea&#62;
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
这样内容就会被显示在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.如果你是使用javascrīpt来调用加载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 [...]]]></description>
			<content:encoded><![CDATA[<div class="cnt">
<div class="navigation">
<div class="alignleft"><span class="content">以下内容为收集整理：＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝</span></div>
</div>
<div class="post">
<div class="entry">
<p>javascript调用方式：<br />
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－</p>
<p>&lt;script type=&#8221;text/javascript&#8221; src=&#8221;FCKeditor/fckeditor.js&#8221;&gt;&lt;/script&gt;</p>
<p>&lt;textarea name=&#8221;content&#8221; cols=&#8221;80″ rows=&#8221;4″&gt;<br />
&lt;/textarea&gt;<br />
&lt;script type=&#8221;text/javascript&#8221;&gt;<br />
var oFCKeditor = new FCKeditor(&#8220;content&#8221;);<br />
oFCKeditor.BasePath = &#8220;FCKeditor/&#8221;;<br />
oFCKeditor.Height = 400;<br />
oFCKeditor.ToolbarSet = &#8220;Default&#8221;;<br />
oFCKeditor.ReplaceTextarea();<br />
&lt;/script&gt;</p>
<p>－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－</p>
<p>如果想要使用从数据库读来的文本数据或者是后台来自文件的txt/html文本数据。<br />
只要在<br />
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－<br />
&lt;textarea name=”content” cols=”80″ rows=”4″&gt;<br />
&lt;/textarea&gt;<br />
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－</p>
<p>中加入自己的显示内容的formbean对应字段即可<br />
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－<br />
&lt;textarea name=”content” cols=”80″ rows=”4″&gt;<br />
&lt;c:out value=”${contentData}” /&gt;<br />
&lt;/textarea&gt;<br />
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－</p>
<p>这样内容就会被显示在FCKeditor编辑框中了，点击提交按钮以后就可以在后台的相应java action中得到content参数中的内容就是页面上FCKeditor中的内容数据了。可以在struts/jsf中使用。</p>
<p>＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝</p>
<p>由于给FCKeditor瘦身，所以常会报缺少对象支持等错误，只要在FCKeditor/editor/lang中加上相应的js语言文件即可。 如果加载页面失败（FCKeditor未定义）还有一个可能就是引用FCKeditor/fckeditor.js文件路径不对！</p>
<p>关于FCKeditor瘦身要点如下：<br />
1.将FCKeditor目录下及子目录下所有以“_”下划线开头的文件夹删除<br />
2.FCKeditor根目录下只保留fckconfig.js, fckeditor.js, fckstyles.xml, fcktemplates.xml，其余全部删除<br />
3.将editor/filemanager/upload目录下文件及文件夹清空<br />
4.将/editor/filemanager/browser/default/connectors/下的所有文件删除<br />
5.还可以将editor/skins目录下的皮肤文件删除，只留下default一套皮肤（如果你不需要换皮肤的话）<br />
6.还可以将editor/lang目录下文件删除，只保留en.js, fcklanguagemanager.js, zh-cn.js, zh.js文件<br />
7.如果你是使用javascrīpt来调用加载FCKeditor，那么就不需要在web.xml中配置fckeditor的tag文件。<br />
8.还有一个问题刚开始使用FCKeditor的人常会遇到就怎么控制它的toolbar的大小和元素排列，其实很简单。<br />
在fckconfig.js中用这样的标签[]来划分每行的元素的多少，这样就可以控制toolbar的长短和大小了，具体示例参看：fckconfig.js中的toolbarset[”Default”]</p>
<p>＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝</p>
<p>用fckconfig.js中的一些选项来控制toolbarset中控件的功能，实现功能裁剪：<br />
1)：取消超链接中的浏览服务器和上传功能，方法如下：<br />
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－<br />
FCKConfig.LinkBrowser = true;<br />
FCKConfig.LinkUpload = true;<br />
改为：<br />
FCKConfig.LinkBrowser = false;<br />
FCKConfig.LinkUpload = false;<br />
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－</p>
<p>2)：取消图片链接中的浏览服务器和上传功能，方法如下：<br />
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－<br />
FCKConfig.ImageUpload = true;<br />
FCKConfig.ImageBrowser = true;<br />
改为：<br />
FCKConfig.ImageUpload = false;<br />
FCKConfig.ImageBrowser = false;<br />
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－</p>
<p>3)：Dlg Button中取消高级功能，方法如下：<br />
FCKConfig.LinkDlgHideAdvanced = false ;<br />
FCKConfig.ImageDlgHideAdvanced = false ;<br />
改为：<br />
FCKConfig.ImageDlgHideAdvanced = true ;<br />
FCKConfig.LinkDlgHideTarget = true ;<br />
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－</p>
<p>下一篇介绍FCKeditor的上传和浏览服务器功能，以及如何在里面实现动态</p>
<p>超连接，转发到servlet经过filter以后去调用服务器的action</p>
<p>如何实现对应用户浏览自己的图片的列表实现！</p>
<p>＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝</p>
<p>FCKeditor集成java servlet可以实现文件的上传和服务器端列表读取功能FCKeditor自己提供了两个servlet来分别实现上传文件功能，和读取服务器端文件列表功能，这两个servlet分别为：<br />
com.fredck.FCKeditor.connector.ConnectorServlet（读取文件列表）<br />
com.fredck.FCKeditor.uploader.SimpleUploaderServlet（实现文件上传）</p>
<p>1.浏览服务器端文件列表<br />
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－<br />
web.xml文件中，比如：ConnectorServlet中的配置选项：<br />
&lt;init-param&gt;<br />
&lt;param-name&gt;baseDir&lt;/param-name&gt;<br />
&lt;param-value&gt;/UserFiles/&lt;/param-value&gt;<br />
&lt;/init-param&gt;</p>
<p>意思是在浏览服务器上的baseDir配置指定里面的所有文件及其目录结构列表。<br />
如果你的baseDir没有配置，Connector将会自动创建一个默认的文件夹<br />
UserFiles，对应的ConnectorServlet中init()方法中代码如下：<br />
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－<br />
baseDir = getInitParameter(”baseDir”);<br />
if (baseDir == null)<br />
baseDir = “/UserFiles/”;</p>
<p>－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－<br />
还想说一下的是，FCKeditor的client调用server的servlet方法采用的是Ajax思想来实现。当你点击浏览服务器 (browser server)的时候就会触发一个异步的javascrīpt + xmlhttp的调用响应，后台的servlet会去完成你要请求的事件，然后数据以xml方式返回给client来解析。很明显，你要实现去数据库或者 其他的文件系统请求列表，你只要修改<br />
ConnectorServlet中两个私有方法：getFolders 和 getFiles</p>
<p>让它去你指定的地方得到文件列表即可，这样你的文件可以放在任何你指定目录下。多说一句，很多人都想知道个人blog系统中怎么实现上传文件以后对 应用户浏览自己的列表的，我的做法很简单，建立你用户名的文件夹，你上传只能上传到你的目录夹，浏览可以通过程序指定浏览对应用户下的文件夹即可，这个时 候你要修改Connectorservlet中的路径即可！<br />
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－</p>
<p>2.超连接重定位问题<br />
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－<br />
FCKeditor可以插入超连接，实现对文件的预览功能，只要我们稍微改变我们可以使FCKeditor编辑器支持对任意文件系统下的任意文件的客户端 浏览和下载保存！FCKeditor本来提供的是相对URL超链接，只要我们修改ConnectorServlet中传递给客户端的地址的时候，把它改写 成绝对URL然后再通过我们自己的filter的servlet实现重定向去一个下载/浏览文件的struts的action方法就可以实现在客户端对超 连接文件的下载和浏览！说一下具体做法吧：</p>
<p>1)：修改ConnectorServlet传递给客户端javascrīpt的路径，代码如下：<br />
String currentUrl = “<a target="_blank"><span style="color: #000000;">http://”</span></a> + request.getserver +request.getServerPort + request.getContextPath + resourcePath;</p>
<p>以上代码请在ConnectorServlet的doGet()里面拼装！在调用CreateCommonXml()私有方法的时候参数传入：<br />
myEl.setAttribute(”path”,currentPath);<br />
myEl.setAttribute(”url”,currentUrl);</p>
<p>提醒一下resourcePath为在web.xml配置文件中ConnectorServlet中的一个初始化参数配置，等一下利用filter实现对超连接的重定位就提取URL中的这个配置参数来判断，配置如下：<br />
&lt;init-param&gt;<br />
&lt;param-name&gt;resourcePath&lt;/param-name&gt;<br />
&lt;param-value&gt;/fileSystem/&lt;/param-value&gt;<br />
&lt;/init-param&gt;</p>
<p>2)：建立你的filter servlet，实现对URL的截获，对符合要求的URL进行重定位到你的对应action中去即可<br />
3)：实现你的对应action来实现文件的上传和下载功能即可！<br />
4)：扩展功能－实现对URL的加密，对连接的URL中加上一串字符，最后几位作为算法校验，对不符合要求的URL连接,filter将会拒绝重定位到指 定action。此外利用自己写的扩展类还可以实现对超连接的文件类型进行限制，比如你只能超连接JPG|GIF|DOC|TXT|HTML等几种后缀名 的文件，对其他文件即使你指定超连接也让你浏览和下载，这些都可以在web.xml中通过修改对应servlet的配置文件的初始化参数实现。</p>
<p>3.页面javascrīpt修改<br />
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－<br />
浏览服务器的功能对应的html/javascrīpt相关的文件为：browser.html和frmresourcelist.html对应你想传递 的信息你可以append在文件名的字符串后面，在GetFileRowHtml（）的javascrīpt函数中实现对文件名的截取，这样client 只会显示文件名，而你可以得到文件的数据库唯一标识，任何你想要的信息你都可以通过修改ConnectorServlet中的私有方法getFiles ()来实现，只要修改页面frmresurcelist.html中的GetFileRowHtml（）中传入变量fileName即可。你还可以在点击 选中文件的时候实现一个你自己的Ajax调用，一切取决你的项目需要！</p>
<p>4.我不是一个javascrīpt高手，其实如果我对javascrīpt了解多一些也许对客户端的代码修改以后做出更眩的功能。可以更好的完成对FCKeditor裁剪。<br />
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－</p>
<p>5.注意点<br />
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－<br />
无论怎么修改别人的东西，请一定尊重开源精神！<br />
很多人配置好了FCKeditor的上传功能以后常会遇到xmlhttp request 404 error,后面是一串路径，其实就是你的servlet-mapping中的路径不对，你只要把xmlhttp request errot 404 后面跟的路径，copy到你的web.xml中对应红色文字的位置，如下：<br />
&lt;servlet-mapping&gt;<br />
&lt;servlet-name&gt;Connector&lt;/servlet-name&gt;<br />
&lt;url-pattern&gt;/FCKeditor/editor/filemanager/browser/default/connectors/jsp/connector&lt;/url-pattern&gt;<br />
&lt;/servlet-mapping&gt;</p>
<p>别忘了SimpleUploader的servlet－mapping也要做同样的修改！</p>
<p>还有一个错误就是http 500错误，这个可能是你的URL请求不对，应该和FCKeditor没关系的!</p>
<p>＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝</p>
<p>fckconfig.js总配置文件，可用记录本打开，修改后将文件存为utf-8 编码格式。找到：<br />
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－<br />
FCKConfig.TabSpaces = 0;<br />
改为：<br />
FCKConfig.TabSpaces = 1;</p>
<p>即在编辑器域内可以使用Tab键。</p>
<p>如果你的编辑器还用在网站前台的话，比如说用于留言本或是日记回复时，那就不得不考虑安全了，<br />
在前台千万不要使用Default的toolbar，要么自定义一下功能，要么就用系统已经定义好的Basic，<br />
也就是基本的toolbar，找到：<br />
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－<br />
FCKConfig.ToolbarSets[”Basic”] = [<br />
[’Bold’,'Italic’,'-’,'OrderedList’,'UnorderedList’,'-’,/*’Link’,*/’Unlink’,'-’,'Style’,'FontSize’,'TextColor’,'BGColor’,'-’,<br />
‘Smiley’,'SpecialChar’,'Replace’,'Preview’] ];</p>
<p>这是改过的Basic，把图像功能去掉，把添加链接功能去掉，因为图像和链接和flash和图像按钮添加功能都能让前台页直接访问和上传文件， fckeditor还支持编辑域内的鼠标右键功能。</p>
<p>FCKConfig.ContextMenu = [’Generic’,/*’Link’,*/’Anchor’,/*’Image’,*/’Flash’,'Select’,'Textarea’,'Checkbox’,'Radio’,'TextField’,'HiddenField’,<br />
/*’ImageButton’,*/’Button’,'BulletedList’,'NumberedList’,'TableCell’,'Table’,'Form’];</p>
<p>这也是改过的把鼠标右键的“链接、图像，FLASH，图像按钮”功能都去掉。</p>
<p>找到：<br />
FCKConfig.FontNames = ‘Arial;Comic Sans MS;Courier New;Tahoma;Times New Roman;Verdana’;</p>
<p>加上几种我们常用的字体</p>
<p>FCKConfig.FontNames = ‘宋体;黑体;隶书;楷体_GB2312;Arial;Comic Sans MS;Courier New;Tahoma;Times New Roman;Verdana’;</p>
<p>添加文件 /TestFCKeditor/test.jsp:<br />
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－<br />
&lt;%@ page language=”java” import=”com.fredck.FCKeditor.*” %&gt;<br />
&lt;%@ taglib uri=”/TestFCKeditor” prefix=”FCK” %&gt;<br />
&lt;script type=”text/javascript” src=”/TestFCKeditor/FCKeditor/fckeditor.js”&gt;&lt;/script&gt;</p>
<p>&lt;%–<br />
三种方法调用FCKeditor<br />
1.FCKeditor自定义标签 (必须加头文件 &lt;%@ taglib uri=”/TestFCKeditor” prefix=”FCK” %&gt; )<br />
2.script脚本语言调用 (必须引用 脚本文件 &lt;script type=”text/javascript” src=”/TestFCKeditor/FCKeditor/fckeditor.js”&gt;&lt;/script&gt; )<br />
3.FCKeditor API 调用 (必须加头文件 &lt;%@ page language=”java” import=”com.fredck.FCKeditor.*” %&gt; )<br />
–%&gt;</p>
<p>&lt;%–<br />
&lt;form action=”show.jsp” method=”post” target=”_blank”&gt;<br />
&lt;FCK:editor id=”content” basePath=”/TestFCKeditor/FCKeditor/”<br />
width=”700″ height=”500″ skinPath=”/TestFCKeditor/FCKeditor/editor/skins/silver/”<br />
toolbarSet = “Default”&gt;<br />
内容<br />
&lt;/FCK:editor&gt;<br />
&lt;input type=”submit” value=”Submit”&gt;<br />
&lt;/form&gt;<br />
–%&gt;</p>
<p>&lt;form action=”show.jsp” method=”post” target=”_blank”&gt;<br />
&lt;table border=”0″ width=”700″&gt;<br />
&lt;tr&gt;<br />
&lt;td&gt;<br />
&lt;textarea id=”content” name=”content” style=”WIDTH: 100%; HEIGHT: 400px”&gt;input&lt;/textarea&gt;<br />
&lt;script type=”text/javascript”&gt;<br />
var oFCKeditor = new FCKeditor(’content̵ <img class="wp-smiley" src="file:///I:/note_from_web/data/20070610112949/icon_wink.gif" alt=";)" /> ;<br />
oFCKeditor.BasePath = “/TestFCKeditor/FCKeditor/” ;<br />
oFCKeditor.Height = 400;<br />
oFCKeditor.ToolbarSet = “Default” ;<br />
oFCKeditor.ReplaceTextarea();<br />
&lt;/script&gt;<br />
&lt;input type=”submit” value=”Submit”&gt;<br />
&lt;/td&gt;<br />
&lt;/tr&gt;<br />
&lt;/table&gt;<br />
&lt;/form&gt;</p>
<p>&lt;%–<br />
&lt;form action=”show.jsp” method=”post” target=”_blank”&gt;<br />
&lt;%<br />
FCKeditor oFCKeditor ;<br />
oFCKeditor = new FCKeditor( request, “content” ) ;<br />
oFCKeditor.setBasePath( “/TestFCKeditor/FCKeditor/” ) ;<br />
oFCKeditor.setValue( “input” );<br />
out.println( oFCKeditor.create() ) ;<br />
%&gt;<br />
&lt;br&gt;<br />
&lt;input type=”submit” value=”Submit”&gt;<br />
&lt;/form&gt;<br />
–%&gt;</p>
<p>添加文件/TestFCKeditor/show.jsp:<br />
&lt;%<br />
String content = request.getParameter(”content”);<br />
out.print(content);<br />
%&gt;</p>
<p>＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝</p>
<p>1、适时打开编辑器<br />
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－<br />
很多时候，我们在打开页面的时候不需要直接打开编辑器，而在用到的时候才打开，这样一来有很好的用户体验，另一方面可以消除FCK在加载时对页面打开速度的影响，点击“Open Editor”按钮后才打开编辑器界面。</p>
<p>实现原理：<br />
使用JAVASCRIPT版的FCK，在页面加载时（未打开FCK），创建一个隐藏的TextArea域，这个TextArea<br />
的name和ID要和创建的FCK实例名称一致，然后点击”Open Editor”按钮时，通过调用一段函数，使用<br />
FCK的ReplaceTextarea()方法来创建FCKeditor，代码如下：<br />
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－<br />
&lt;script type=”text/javascript”&gt;<br />
&lt;!–<br />
function showFCK(){<br />
var oFCKeditor = new FCKeditor( ‘fbContent’ ) ;<br />
oFCKeditor.BasePath = ‘/FCKeditor/’ ;<br />
oFCKeditor.ToolbarSet = ‘Basic’ ;<br />
oFCKeditor.Width = ‘100%’ ;<br />
oFCKeditor.Height = ‘200′ ;<br />
oFCKeditor.ReplaceTextarea() ;<br />
}<br />
//–&gt;<br />
&lt;/script&gt;<br />
&lt;textarea name=”fbContent” id=”fbContent”&gt;&lt;/textarea&gt;</p>
<p>2、使用FCKeditor 的 API<br />
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－<br />
FCKeditor编辑器，提供了非常丰富的API，用于给End User实现很多想要定制的功能，比如最基本的数据验证，如何在提交的时候用JS判断当前编辑器区域内是否有内容，FCK的API提供了GetLength()方法；</p>
<p>再比如如何通过脚本向FCK里插入内容，使用InsertHTML()等；</p>
<p>还有，在用户定制功能时，中间步骤可能要执行FCK的一些内嵌操作，那就用ExecuteCommand()方法。</p>
<p>详细的API列表，请查看FCKeditor的Wiki。而常用的API，请查看FCK压缩包里的_samples/html/sample08.html。此处就不贴代码了。</p>
<p>3、外联编辑条（多个编辑域共用一个编辑条）<br />
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－<br />
这个功能是2.3版本才开始提供的，以前版本的FCKeditor要在同一个页面里用多个编辑器的话，得一个个创建，现在有了这个外联功能，就不用那么麻烦了，只需要把工具条放在一个适当的位置，后面就可以无限制的创建编辑域了。</p>
<p>要实现这种功能呢，需要先在页面中定义一个工具条的容器：&lt;div id=”xToolbar”&gt;&lt;/div&gt;，然后再根据这个容器的id属性进行设置。</p>
<p>JAVASCRIPT实现代码：<br />
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－<br />
&lt;div id=”xToolbar”&gt;&lt;/div&gt;<br />
FCKeditor 1:<br />
&lt;script type=”text/javascript”&gt;<br />
&lt;!–<br />
// Automatically calculates the editor base path based on the _samples directory.<br />
// This is usefull only for these samples. A real application should use something like this:<br />
// oFCKeditor.BasePath = ‘/fckeditor/’; // ‘/fckeditor/’ is the default value.<br />
var sBasePath = document.location.pathname.substring(0,document.location.pathname.lastIndexOf(’_samples’));</p>
<p>var oFCKeditor = new FCKeditor( ‘FCKeditor_1′ );<br />
oFCKeditor.BasePath = sBasePath;<br />
oFCKeditor.Height = 100;<br />
oFCKeditor.Config[ ‘ToolbarLocation’ ] = ‘Out:parent(xToolbar)’;<br />
oFCKeditor.Value = ‘This is some &lt;strong&gt;sample text&lt;/strong&gt;. You are using FCKeditor.’;<br />
oFCKeditor.Create();<br />
//–&gt;<br />
&lt;/script&gt;<br />
&lt;br /&gt;<br />
FCKeditor 2:<br />
&lt;script type=”text/javascript”&gt;<br />
&lt;!–<br />
oFCKeditor = new FCKeditor( ‘FCKeditor_2′ );<br />
oFCKeditor.BasePath = sBasePath;<br />
oFCKeditor.Height = 100;<br />
oFCKeditor.Config[ ‘ToolbarLocation’ ] = ‘Out:parent(xToolbar)’;<br />
oFCKeditor.Value = ‘This is some &lt;strong&gt;sample text&lt;/strong&gt;. You are using FCKeditor.’;<br />
oFCKeditor.Create();<br />
//–&gt;<br />
&lt;/script&gt;<br />
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－<br />
此部分的详细DEMO请参照_samples/html/sample11.html，_samples/html/sample11_frame.html</p>
<p>4、文件管理功能、文件上传的权限问题<br />
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－<br />
一直以来FCKeditor的文件管理部分的安全是个值得注意，但很多人没注意到的地方，虽然FCKeditor在各个Release版本中一直存在的一个功能就是对上传文件类型进行过滤，但是她没考虑过另一个问题：到底允许谁能上传？到底谁能浏览服务器文件？</p>
<p>之前刚开始用FCKeditor时，我就出现过这个问题，还好NetRube（FCKeditor中文化以及FCKeditor ASP版上传程序的作者）及时提醒了我，做法是去修改FCK上传程序，在里面进行权限判断，并且再在fckconfig.js里把相应的一些功能去掉。但 随之FCK版本的不断升级，每升一次都要去改一次配置程序fckconfig.js，我发觉厌烦了，就没什么办法能更好的控制这种配置么？事实上，是有 的。</p>
<p>在fckconfig.js里面，有关于是否打开上传和浏览服务器的设置，在创建FCKeditor时，通过程序来判断是否创建有上传浏览功能的编辑器。首先，我先在fckconfig.js里面把所有的上传和浏览设置全设为false，接着我使用的代码如下：</p>
<p>JAVASCRIPT版本：<br />
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－<br />
&lt;script type=”text/javascript”&gt;<br />
var oFCKeditor = new FCKeditor( ‘fbContent’ );<br />
&lt;% if power = powercode then %&gt;<br />
oFCKeditor.Config[’LinkBrowser’] = true;<br />
oFCKeditor.Config[’ImageBrowser’] = true;<br />
oFCKeditor.Config[’FlashBrowser’] = true;<br />
oFCKeditor.Config[’LinkUpload’] = true;<br />
oFCKeditor.Config[’ImageUpload’] = true;<br />
oFCKeditor.Config[’FlashUpload’] = true;<br />
&lt;% end if %&gt;<br />
oFCKeditor.ToolbarSet = ‘Basic’;<br />
oFCKeditor.Width = ‘100%’;<br />
oFCKeditor.Height = ‘200′;<br />
oFCKeditor.Value = ‘’;<br />
oFCKeditor.Create();<br />
&lt;/script&gt;<br />
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－</p>
<p>在按钮旁边加文字<br />
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－<br />
打开 editor/js/ 两个js文件<br />
fckeditorcode_gecko.js<br />
fckeditorcode_ie.js</p>
<p>第一个是支持非ie浏览器的<br />
第二个文件是支持ie浏览器的</p>
<p>搜索 FCKToolbarButton，可以看到许多类似这样的语句：<br />
case ‘Save’:B = new FCKToolbarButton(’Save’, FCKLang.Save, null, null, true, null, 3); break;</p>
<p>‘Save’是按钮英文名字<br />
FCKToolbarButton 的四个参数分别是：<br />
按钮命令名称，按钮标签文字，按钮工具提示，按钮样式，按钮是否在源代码模式可见，按钮下拉菜单其中将第4项参数设置为 FCK_TOOLBARITEM_ICONTEXT 即可使按钮旁边出现文字，注意没有引号。<br />
例如：<br />
case ‘Preview’:B = new FCKToolbarButton(’Preview’, FCKLang.Preview, null, FCK_TOOLBARITEM_ICONTEXT, true, null, 5);<br />
这样我们就可以将 我们经常用的3种模式源代码、预览、全屏编辑按钮都加上文字了。</p>
<p>解释fck样式的工作原理<br />
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－<br />
fck的样式设置涉及到了两个文件，一个是你定义好的样式表文件.css，另一个是告诉fck样式表如何使用的xml文件，两个文件确一不可。<br />
css文件的位置是不做要求的，但是需要你在应用的编辑器的页面上插入样式表文件的链接。这样才能显示出来样式。<br />
fckstyles.xml 在与editor目录同级的目录下。该文件定义了那些样式可以使用在那些标签里面。</p>
<p>这就是fck自带的样式xml定义：<br />
&lt;?xml version=”1.0″ encoding=”utf-8″ ?&gt;<br />
&lt;Styles&gt;<br />
&lt;Style name=”Image on Left” element=”img”&gt;<br />
&lt;Attribute name=”style” value=”padding: 5px; margin-right: 5px” /&gt;<br />
&lt;Attribute name=”border” value=”2″ /&gt;<br />
&lt;Attribute name=”align” value=”left” /&gt;<br />
&lt;/Style&gt;<br />
&lt;Style name=”Image on Right” element=”img”&gt;<br />
&lt;Attribute name=”style” value=”padding: 5px; margin-left: 5px” /&gt;<br />
&lt;Attribute name=”border” value=”2″ /&gt;<br />
&lt;Attribute name=”align” value=”right” /&gt;<br />
&lt;/Style&gt;<br />
&lt;Style name=”Custom Bold” element=”span”&gt;<br />
&lt;Attribute name=”style” value=”font-weight: bold;” /&gt;<br />
&lt;/Style&gt;<br />
&lt;Style name=”Custom Italic” element=”em” /&gt;<br />
&lt;Style name=”Title” element=”span”&gt;<br />
&lt;Attribute name=”class” value=”Title” /&gt;<br />
&lt;/Style&gt;<br />
&lt;Style name=”Code” element=”span”&gt;<br />
&lt;Attribute name=”class” value=”Code” /&gt;<br />
&lt;/Style&gt;<br />
&lt;Style name=”Title H3″ element=”h3″ /&gt;<br />
&lt;Style name=”Custom Ruler” element=”hr”&gt;<br />
&lt;Attribute name=”size” value=”1″ /&gt;<br />
&lt;Attribute name=”color” value=”#ff0000″ /&gt;<br />
&lt;/Style&gt;<br />
&lt;/Styles&gt;</p>
<p>每一个&lt;style&gt;将来会生成一个样式的菜单项。name名称就是显示在菜单里的文字；element定义了该样式可以应用在那种 html标签上，&lt;Attribute&gt;的 name 指定了将会修改标签的哪个属性来应用样式，value则是修改成的值。<br />
看这个：<br />
&lt;Style name=”Title” element=”span”&gt;<br />
&lt;Attribute name=”class” value=”Title” /&gt;<br />
&lt;/Style&gt;</p>
<p>如果你在fck选定了文字 “经典论坛 》 前台制作与脚本专栏 》 FCKeditor 实战技巧 &#8211; 1 》 编辑帖子” 应用该样式 则原来文字就会变成&lt;span class=”Title”&gt;经典论坛 》 前台制作与脚本专栏 》 FCKeditor 实战技巧 &#8211; 1 》 编辑帖子&lt;/span&gt;</p>
<p>注意：如果编辑器呈整页编辑状态，那么整页里面也需要插入样式表链接才能显示出来样式。</p>
<p>＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝</p>
<p>FCKeditor JavaScript API（翻译整理）<br />
原文地址：<a href="http://wiki.fckeditor.net/Developer%20s_Guide/%20_API" target="_top">http://wiki.fckeditor.net/Developer%27s_Guide/Javascript_API</a><br />
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－<br />
FCK 编辑器加载后，将会注册一个全局的 FCKeditorAPI 对象。</p>
<p>FCKeditorAPI 对象在页面加载期间是无效的，直到页面加载完成。如果需要交互式地知道 FCK 编辑器已经加载完成，可使用“FCKeditor_OnComplete”函数。<br />
&lt;script type=”text/javascript”&gt;<br />
function FCKeditor_OnComplete(editorInstance) {<br />
FCKeditorAPI.GetInstance(’FCKeditor1′).Commands.GetCommand(’FitWindow’).Execute();<br />
}<br />
&lt;/script&gt;</p>
<p>在当前页获得 FCK 编辑器实例：<br />
var oEditor = FCKeditorAPI.GetInstance(’InstanceName’);</p>
<p>从 FCK 编辑器的弹出窗口中获得 FCK 编辑器实例：<br />
var oEditor = window.parent.InnerDialogLoaded().FCK;</p>
<p>从框架页面的子框架中获得其它子框架的 FCK 编辑器实例：<br />
var oEditor = window.FrameName.FCKeditorAPI.GetInstance(’InstanceName’);</p>
<p>从页面弹出窗口中获得父窗口的 FCK 编辑器实例：<br />
var oEditor = opener.FCKeditorAPI.GetInstance(’InstanceName’);</p>
<p>获得 FCK 编辑器的内容：<br />
oEditor.GetXHTML(formatted); // formatted 为：true|false，表示是否按HTML格式取出<br />
也可用：<br />
oEditor.GetXHTML();</p>
<p>设置 FCK 编辑器的内容：<br />
oEditor.SetHTML(”content”, false); // 第二个参数为：true|false，是否以所见即所得方式设置其内容。此方法常用于“设置初始值”或“表单重置”操作。</p>
<p>插入内容到 FCK 编辑器：<br />
oEditor.InsertHtml(”html”); // “html”为HTML文本</p>
<p>检查 FCK 编辑器内容是否发生变化：<br />
oEditor.IsDirty();</p>
<p>from：http://hi.baidu.com/wain19/</p>
<p>在 FCK 编辑器之外调用 FCK 编辑器工具条命令：<br />
<span style="color: #ff0000;">命令列表如下：</span><br />
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－<br />
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<br />
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－<br />
使用方法如下：<br />
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－<br />
oEditor.Commands.GetCommand(’FitWindow’).Execute();<br />
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－</div>
</div>
</div>
]]></content:encoded>
			<wfw:commentRss>http://www.result-search.com/sty/2009/04/23/fckeditor-resoursesbase-on-java.html/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>
