??xml version="1.0" encoding="utf-8" standalone="yes"?>
<script. type=”text/javascript” src=”FCKeditor/fckeditor.js”></scrīpt>
<textarea name=”content” cols=”80″ rows=”4″>
</textarea>
<script. type=”text/javascript”>
var FCKeditor = new FCKeditor(”content”);
oFCKeditor.BasePath = “FCKeditor/”;
oFCKeditor.Height = 400;
oFCKeditor.ToolbarSet = “Default”;
oFCKeditor.ReplaceTextarea();
</script>
Q-Q-Q-Q-Q-Q-Q-Q-Q-Q-Q-Q-Q-Q-Q-Q-Q-Q-
如果惌使用从数据库L的文本数据或者是后台来自文g的txt/html文本数据?
只要?
Q-Q-Q-Q-Q-Q-Q-Q-Q-Q-Q-Q-Q-Q-Q-Q-Q-Q-
<textarea name=”content” cols=”80″ rows=”4″>
</textarea>
Q-Q-Q-Q-Q-Q-Q-Q-Q-Q-Q-Q-Q-Q-Q-Q-Q-Q-
中加入自q昄内容的formbean对应字段卛_
Q-Q-Q-Q-Q-Q-Q-Q-Q-Q-Q-Q-Q-Q-Q-Q-Q-Q-
<textarea name=”content” cols=”80″ rows=”4″>
<c:out value=”${contentData}” />
</textarea>
Q-Q-Q-Q-Q-Q-Q-Q-Q-Q-Q-Q-Q-Q-Q-Q-Q-Q-
q样内容׃被显C在FCKeditor~辑框中了,点击提交按钮以后可以在后台的相应java action中得到content参数中的内容是面上FCKeditor中的内容数据了。可以在struts/jsf中用?
Q=Q=Q=Q=Q=Q=Q=Q=Q=Q=Q=Q=Q=Q=Q=Q=Q=Q=
׃lFCKeditor瘦nQ所以常会报~少对象支持{错误,只要在FCKeditor/editor/lang中加上相应的js语言文g卛_。如果加载页面失败(FCKeditor未定义)q有一个可能就是引用FCKeditor/fckeditor.js文g路径不对Q?
关于FCKeditor瘦n要点如下Q?
1.FCKeditor目录下及子目录下所有以“_”下划U开头的文g夹删?
2.FCKeditor根目录下只保留fckconfig.js, fckeditor.js, fckstyles.xml, fcktemplates.xmlQ其余全部删?
3.editor/filemanager/upload目录下文件及文gҎI?
4.?editor/filemanager/browser/default/connectors/下的所有文件删?
5.q可以将editor/skins目录下的皮肤文g删除Q只留下default一套皮肤(如果你不需要换皮肤的话Q?
6.q可以将editor/lang目录下文件删除,只保留en.js, fcklanguagemanager.js, zh-cn.js, zh.js文g
7.如果你是使用javascrīpt来调用加载FCKeditorQ那么就不需要在web.xml中配|fckeditor的tag文g?
8.q有一个问题刚开始用FCKeditor的h怼遇到怎么控制它的toolbar的大和元素排列Q其实很单?
在fckconfig.js中用q样的标{[]来划分每行的元素的多,q样可以控制toolbar的长短和大小了,具体CZ参看Qfckconfig.js中的toolbarset[”Default”]
Q=Q=Q=Q=Q=Q=Q=Q=Q=Q=Q=Q=Q=Q=Q=Q=Q=Q=
用fckconfig.js中的一些选项来控制toolbarset中控件的功能Q实现功能裁剪:
1)Q取消超链接中的览服务器和上传功能Q方法如下:
Q-Q-Q-Q-Q-Q-Q-Q-Q-Q-Q-Q-Q-Q-Q-Q-Q-Q-
FCKConfig.LinkBrowser = true;
FCKConfig.LinkUpload = true;
改ؓQ?
FCKConfig.LinkBrowser = false;
FCKConfig.LinkUpload = false;
Q-Q-Q-Q-Q-Q-Q-Q-Q-Q-Q-Q-Q-Q-Q-Q-Q-Q-
2)Q取消图片链接中的浏览服务器和上传功能,Ҏ如下Q?
Q-Q-Q-Q-Q-Q-Q-Q-Q-Q-Q-Q-Q-Q-Q-Q-Q-Q-
FCKConfig.ImageUpload = true;
FCKConfig.ImageBrowser = true;
改ؓQ?
FCKConfig.ImageUpload = false;
FCKConfig.ImageBrowser = false;
Q-Q-Q-Q-Q-Q-Q-Q-Q-Q-Q-Q-Q-Q-Q-Q-Q-Q-
3)QDlg Button中取消高U功能,Ҏ如下Q?
FCKConfig.LinkDlgHideAdvanced = false ;
FCKConfig.ImageDlgHideAdvanced = false ;
改ؓQ?
FCKConfig.ImageDlgHideAdvanced = true ;
FCKConfig.LinkDlgHideTarget = true ;
Q-Q-Q-Q-Q-Q-Q-Q-Q-Q-Q-Q-Q-Q-Q-Q-Q-Q-
下一介lFCKeditor的上传和览服务器功能,以及如何在里面实现动?
连接,转发到servletl过filter以后去调用服务器的action
如何实现对应用户览自己的图片的列表实现Q?
Q=Q=Q=Q=Q=Q=Q=Q=Q=Q=Q=Q=Q=Q=Q=Q=Q=Q=
FCKeditor集成java servlet可以实现文g的上传和服务器端列表d功能FCKeditor自己提供了两个servlet来分别实C传文件功能,和读取服务器端文件列表功能,q两个servlet分别为:
com.fredck.FCKeditor.connector.ConnectorServletQ读取文件列表)
com.fredck.FCKeditor.uploader.SimpleUploaderServletQ实现文件上传)
1.览服务器端文g列表
Q-Q-Q-Q-Q-Q-Q-Q-Q-Q-Q-Q-Q-Q-Q-Q-Q-Q-
web.xml文g中,比如QConnectorServlet中的配置选项Q?
<init-param>
<param-name>baseDir</param-name>
<param-value>/UserFiles/</param-value>
</init-param>
意思是在浏览服务器上的baseDir配置指定里面的所有文件及其目录结构列表?
如果你的baseDir没有配置QConnector会自动创徏一个默认的文g?
UserFilesQ对应的ConnectorServlet中init()Ҏ中代码如下:
Q-Q-Q-Q-Q-Q-Q-Q-Q-Q-Q-Q-Q-Q-Q-Q-Q-Q-
baseDir = getInitParameter(”baseDir”);
if (baseDir == null)
baseDir = “/UserFiles/”;
Q-Q-Q-Q-Q-Q-Q-Q-Q-Q-Q-Q-Q-Q-Q-Q-Q-Q-
q想说一下的是,FCKeditor的client调用server的servletҎ采用的是Ajax思想来实现。当你点L览服务器(browser server)的时候就会触发一个异步的javascrīpt + xmlhttp的调用响应,后台的servlet会去完成你要h的事Ӟ然后数据以xml方式q回lclient来解析。很明显Q你要实现去数据库或者其他的文gpȝh列表Q你只要修改
ConnectorServlet中两个私有方法:getFolders ?getFiles
让它M指定的地方得到文件列表即可,q样你的文g可以攑֜M你指定目录下。多说一句,很多人都想知道个人blogpȝ中怎么实现上传文g以后对应用户览自己的列表的Q我的做法很单,建立你用户名的文件夹Q你上传只能上传C的目录夹Q浏览可以通过E序指定览对应用户下的文g夹即可,q个时候你要修改Connectorservlet中的路径卛_Q?
Q-Q-Q-Q-Q-Q-Q-Q-Q-Q-Q-Q-Q-Q-Q-Q-Q-Q-
2.连接重定位问题
Q-Q-Q-Q-Q-Q-Q-Q-Q-Q-Q-Q-Q-Q-Q-Q-Q-Q-
FCKeditor可以插入连接,实现Ҏ件的预览功能Q只要我们稍微改变我们可以FCKeditor~辑器支持对L文gpȝ下的L文g的客L览和下载保存!FCKeditor本来提供的是相对URL链接,只要我们修改ConnectorServlet中传递给客户端的地址的时候,把它改写成绝对URL然后再通过我们自己的filter的servlet实现重定向去一个下?览文g的struts的actionҎ可以实现在客户端对连接文件的下蝲和浏览!说一下具体做法吧Q?
1)Q修改ConnectorServlet传递给客户端javascrīpt的\径,代码如下Q?
String currentUrl = “http://” + request.getserver +request.getServerPort + request.getContextPath + resourcePath;
以上代码请在ConnectorServlet的doGet()里面DQ在调用CreateCommonXml()U有Ҏ的时候参C入:
myEl.setAttribute(”path”,currentPath);
myEl.setAttribute(”url”,currentUrl);
提醒一下resourcePath为在web.xml配置文g中ConnectorServlet中的一个初始化参数配置Q等一下利用filter实现对超q接的重定位提取URL中的q个配置参数来判断,配置如下Q?
<init-param>
<param-name>resourcePath</param-name>
<param-value>/fileSystem/</param-value>
</init-param>
2)Q徏立你的filter servletQ实现对URL的截P对符合要求的URLq行重定位到你的对应action中去卛_
3)Q实C的对应action来实现文件的上传和下载功能即可!
4)Q扩展功能-实现对URL的加密,对连接的URL中加上一串字W,最后几位作为算法校验,对不W合要求的URLq接,filter会拒绝重定位到指定action。此外利用自己写的扩展类q可以实现对连接的文gcdq行限制Q比如你只能连接JPG|GIF|DOC|TXT|HTML{几U后~名的文gQ对其他文g即你指定超q接也让你浏览和下蝲Q这些都可以在web.xml中通过修改对应servlet的配|文件的初始化参数实现?
3.面javascrīpt修改
Q-Q-Q-Q-Q-Q-Q-Q-Q-Q-Q-Q-Q-Q-Q-Q-Q-Q-
览服务器的功能对应的html/javascrīpt相关的文件ؓQbrowser.html和frmresourcelist.html对应你想传递的信息你可以append在文件名的字W串后面Q在GetFileRowHtmlQ)的javascrīpt函数中实现对文g名的截取Q这样client只会昄文g名,而你可以得到文g的数据库唯一标识QQ何你惌的信息你都可以通过修改ConnectorServlet中的U有ҎgetFiles()来实玎ͼ只要修改面frmresurcelist.html中的GetFileRowHtmlQ)中传入变量fileName卛_。你q可以在点击选中文g的时候实C个你自己的Ajax调用Q一切取决你的项目需要!
4.我不是一个javascrīpt高手Q其实如果我对javascrīpt了解多一些也许对客户端的代码修改以后做出更眩的功能。可以更好的完成对FCKeditor裁剪?
Q-Q-Q-Q-Q-Q-Q-Q-Q-Q-Q-Q-Q-Q-Q-Q-Q-Q-Q?
5.注意?
Q-Q-Q-Q-Q-Q-Q-Q-Q-Q-Q-Q-Q-Q-Q-Q-Q-Q-Q?
无论怎么修改别h的东西,请一定尊重开源精!
很多人配|好了FCKeditor的上传功能以后常会遇到xmlhttp request 404 error,后面是一串\径,其实是你的servlet-mapping中的路径不对Q你只要把xmlhttp request errot 404 后面跟的路径QcopyC的web.xml中对应红色文字的位置Q如下:
<servlet-mapping>
<servlet-name>Connector</servlet-name>
<url-pattern>/FCKeditor/editor/filemanager/browser/default/connectors/jsp/connector</url-pattern>
</servlet-mapping>
别忘了SimpleUploader的servletQmapping也要做同L修改Q?
q有一个错误就是http 500错误Q这个可能是你的URLh不对Q应该和FCKeditor没关pȝ!
Q=Q=Q=Q=Q=Q=Q=Q=Q=Q=Q=Q=Q=Q=Q=Q=Q=Q=Q=
fckconfig.js总配|文Ӟ可用记录本打开Q修改后文件存为utf-8 ~码格式。找刎ͼ
Q-Q-Q-Q-Q-Q-Q-Q-Q-Q-Q-Q-Q-Q-Q-Q-Q-Q-Q-
FCKConfig.TabSpaces = 0;
改ؓQ?
FCKConfig.TabSpaces = 1;
卛_~辑器域内可以用Tab键?
如果你的~辑器还用在|站前台的话Q比如说用于留言本或是日记回复时Q那׃得不考虑安全了,
在前台千万不要用Default的toolbarQ要么自定义一下功能,要么qpȝ已经定义好的BasicQ?
也就是基本的toolbarQ找刎ͼ
Q-Q-Q-Q-Q-Q-Q-Q-Q-Q-Q-Q-Q-Q-Q-Q-Q-Q-Q-
FCKConfig.ToolbarSets[”Basic”] = [
[’Bold’,'Italic’,'-’,'OrderedList’,'UnorderedList’,'-’,/*’Link’,*/’Unlink’,'-’,'Style’,'FontSize’,'TextColor’,'BGColor’,'-’,
‘Smiley’,'SpecialChar’,'Replace’,'Preview’] ];
q是改过的BasicQ把囑փ功能LQ把d链接功能LQ因为图像和链接和flash和图像按钮添加功能都能让前台늛接访问和上传文gQ?fckeditorq支持编辑域内的鼠标右键功能?
FCKConfig.ContextMenu = [’Generic’,/*’Link’,*/’Anchor’,/*’Image’,*/’Flash’,'Select’,'Textarea’,'Checkbox’,'Radio’,'TextField’,'HiddenField’,
/*’ImageButton’,*/’Button’,'BulletedList’,'NumberedList’,'TableCell’,'Table’,'Form’];
q也是改q的把鼠标右键的“链接、图像,FLASHQ图像按?#8221;功能都去掉?
扑ֈQ?
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’;
d文g /TestFCKeditor/test.jsp:
Q-Q-Q-Q-Q-Q-Q-Q-Q-Q-Q-Q-Q-Q-Q-Q-Q-Q-Q-Q-
<%@ page language=”java” import=”com.fredck.FCKeditor.*” %>
<%@ taglib uri=”/TestFCKeditor” prefix=”FCK” %>
<script. type=”text/javascript” src=”/TestFCKeditor/FCKeditor/fckeditor.js”></script>
<%–
三种Ҏ调用FCKeditor
1.FCKeditor自定义标{?(必须加头文g <%@ taglib uri=”/TestFCKeditor” prefix=”FCK” %> )
2.script脚本语言调用 (必须引用 脚本文g <script. type=”text/javascript” src=”/TestFCKeditor/FCKeditor/fckeditor.js”></script> )
3.FCKeditor API 调用 (必须加头文g <%@ page language=”java” import=”com.fredck.FCKeditor.*” %> )
–%>
<%–
<form. action=”show.jsp” method=”post” target=”_blank”>
<FCK:editor id=”content” basePath=”/TestFCKeditor/FCKeditor/”
width=”700″ height=”500″ skinPath=”/TestFCKeditor/FCKeditor/editor/skins/silver/”
toolbarSet = “Default”>
内容
</FCK:editor>
<input type=”submit” value=”Submit”>
</form>
–%>
<form. action=”show.jsp” method=”post” target=”_blank”>
<table border=”0″ width=”700″>
<tr>
<td>
<textarea id=”content” name=”content” style=”WIDTH: 100%; HEIGHT: 400px”>input</textarea>
<script. type=”text/javascript”>
var FCKeditor = new FCKeditor(’content? ;
oFCKeditor.BasePath = “/TestFCKeditor/FCKeditor/” ;
oFCKeditor.Height = 400;
oFCKeditor.ToolbarSet = “Default” ;
oFCKeditor.ReplaceTextarea();
</script>
<input type=”submit” value=”Submit”>
</td>
</tr>
</table>
</form>
<%–
<form. action=”show.jsp” method=”post” target=”_blank”>
<%
FCKeditor oFCKeditor ;
oFCKeditor = new FCKeditor( request, “content” ) ;
oFCKeditor.setBasePath( “/TestFCKeditor/FCKeditor/” ) ;
oFCKeditor.setValue( “input” );
out.println( oFCKeditor.create() ) ;
%>
<br>
<input type=”submit” value=”Submit”>
</form>
–%>
d文g/TestFCKeditor/show.jsp:
<%
String content = request.getParameter(”content”);
out.print(content);
%>
Q=Q=Q=Q=Q=Q=Q=Q=Q=Q=Q=Q=Q=Q=Q=Q=Q=Q=
1、适时打开~辑?
Q-Q-Q-Q-Q-Q-Q-Q-Q-Q-Q-Q-Q-Q-Q-Q-Q-Q-
很多时候,我们在打开面的时候不需要直接打开~辑器,而在用到的时候才打开Q这样一来有很好的用户体验,另一斚w可以消除FCK在加载时寚w面打开速度的媄响,点击“Open Editor”按钮后才打开~辑器界面?
实现原理Q?
使用JAVASCRIPT版的FCKQ在面加蝲Ӟ未打开FCKQ,创徏一个隐藏的TextArea域,q个TextArea
的name和ID要和创徏的FCK实例名称一_然后点击”Open Editor”按钮Ӟ通过调用一D函敎ͼ使用
FCK的ReplaceTextarea()Ҏ来创建FCKeditorQ代码如下:
Q-Q-Q-Q-Q-Q-Q-Q-Q-Q-Q-Q-Q-Q-Q-Q-Q-Q-
<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
Q-Q-Q-Q-Q-Q-Q-Q-Q-Q-Q-Q-Q-Q-Q-Q-Q-Q-Q?
FCKeditor~辑器,提供了非怸富的APIQ用于给End User实现很多惌定制的功能,比如最基本的数据验证,如何在提交的时候用JS判断当前~辑器区域内是否有内容,FCK的API提供了GetLength()ҎQ?
再比如如何通过脚本向FCK里插入内容,使用InsertHTML(){;
q有Q在用户定制功能Ӟ中间步骤可能要执行FCK的一些内嵌操作,那就用ExecuteCommand()Ҏ?
详细的API列表Q请查看FCKeditor的Wiki。而常用的APIQ请查看FCK压羃包里的_samples/html/sample08.html。此处就不脓代码了?
3、外联编辑条Q多个编辑域q一个编辑条Q?
Q-Q-Q-Q-Q-Q-Q-Q-Q-Q-Q-Q-Q-Q-Q-Q-Q-Q-Q-
q个功能?.3版本才开始提供的Q以前版本的FCKeditor要在同一个页面里用多个编辑器的话Q得一个个创徏Q现在有了这个外联功能,׃用那么麻烦了Q只需要把工具条放在一个适当的位|,后面可以无限制的创建编辑域了?
要实现这U功能呢Q需要先在页面中定义一个工h的容器:<div id=”xToolbar”></div>Q然后再Ҏq个容器的id属性进行设|?
JAVASCRIPT实现代码Q?
Q-Q-Q-Q-Q-Q-Q-Q-Q-Q-Q-Q-Q-Q-Q-Q-Q-Q-Q-
<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>
Q-Q-Q-Q-Q-Q-Q-Q-Q-Q-Q-Q-Q-Q-Q-Q-Q-Q-Q?
此部分的详细DEMO请参照_samples/html/sample11.htmlQ_samples/html/sample11_frame.html
4、文件管理功能、文件上传的权限问题
Q-Q-Q-Q-Q-Q-Q-Q-Q-Q-Q-Q-Q-Q-Q-Q-Q-Q-Q?
一直以来FCKeditor的文件管理部分的安全是个值得注意Q但很多人没注意到的地方Q虽然FCKeditor在各个Release版本中一直存在的一个功能就是对上传文gcdq行qoQ但是她没考虑q另一个问题:到底允许谁能上传Q到底谁能浏览服务器文gQ?
之前刚开始用FCKeditorӞ我就出现q这个问题,q好NetRubeQFCKeditor中文化以及FCKeditor ASP版上传程序的作者)及时提醒了我Q做法是M改FCK上传E序Q在里面q行权限判断Qƈ且再在fckconfig.js里把相应的一些功能去掉。但随之FCK版本的不断升U,每升一ơ都要去改一ơ配|程序fckconfig.jsQ我发觉厌烦了,没什么办法能更好的控制这U配|么Q事实上Q是有的?
在fckconfig.js里面Q有关于是否打开上传和浏览服务器的设|,在创建FCKeditorӞ通过E序来判断是否创建有上传览功能的编辑器。首先,我先在fckconfig.js里面把所有的上传和浏览设|全设ؓfalseQ接着我用的代码如下Q?
JAVASCRIPT版本Q?
Q-Q-Q-Q-Q-Q-Q-Q-Q-Q-Q-Q-Q-Q-Q-Q-Q-Q-Q?
<script. type=”text/javascript”>
var FCKeditor = new FCKeditor( ‘fbContent’ );
<% if power = powercode then %>
oFCKeditor.Config[’LinkBrowser’] = true;
oFCKeditor.Config[’ImageBrowser’] = true;
oFCKeditor.Config[’FlashBrowser’] = true;
oFCKeditor.Config[’LinkUpload’] = true;
oFCKeditor.Config[’ImageUpload’] = true;
oFCKeditor.Config[’FlashUpload’] = true;
<% end if %>
oFCKeditor.ToolbarSet = ‘Basic’;
oFCKeditor.Width = ‘100%’;
oFCKeditor.Height = ‘200′;
oFCKeditor.Value = ‘’;
oFCKeditor.Create();
</script>
Q-Q-Q-Q-Q-Q-Q-Q-Q-Q-Q-Q-Q-Q-Q-Q-Q-Q-Q?
在按钮旁边加文字
Q-Q-Q-Q-Q-Q-Q-Q-Q-Q-Q-Q-Q-Q-Q-Q-Q-Q-Q?
打开 editor/js/ 两个js文g
fckeditorcode_gecko.js
fckeditorcode_ie.js
W一个是支持非ie览器的
W二个文件是支持ie览器的
搜烦 FCKToolbarButtonQ可以看到许多类DL语句Q?
case ‘Save’:B = new FCKToolbarButton(’Save’, FCKLang.Save, null, null, true, null, 3); break;
‘Save’是按钮英文名?
FCKToolbarButton 的四个参数分别是Q?
按钮命o名称Q按钮标{文字,按钮工具提示Q按钮样式,按钮是否在源代码模式可见Q按钮下拉菜单其中将W?参数设|ؓ FCK_TOOLBARITEM_ICONTEXT 卛_使按钮旁边出现文字,注意没有引号?
例如Q?
case ‘Preview’:B = new FCKToolbarButton(’Preview’, FCKLang.Preview, null, FCK_TOOLBARITEM_ICONTEXT, true, null, 5);
q样我们可以将 我们l常用的3U模式源代码、预览、全屏编辑按钮都加上文字了?
解释fck样式的工作原?
Q-Q-Q-Q-Q-Q-Q-Q-Q-Q-Q-Q-Q-Q-Q-Q-Q-Q-Q?
fck的样式设|涉及到了两个文Ӟ一个是你定义好的样式表文g.cssQ另一个是告诉fck样式表如何用的xml文gQ两个文件确一不可?
css文g的位|是不做要求的,但是需要你在应用的~辑器的面上插入样式表文g的链接。这h能显C出来样式?
fckstyles.xml 在与editor目录同的目录下。该文g定义了那些样式可以用在那些标签里面?
q就是fck自带的样式xml定义Q?
<?xml version=”1.0″ encoding=”utf-8″ ?>
<Styles>
<Style name=”Image on Left” element=”img”>
<Attribute name=”style” value=”padding: 5px; margin-right: 5px” />
<Attribute name=”border” value=”2″ />
<Attribute name=”align” value=”left” />
</Style>
<Style name=”Image on Right” element=”img”>
<Attribute name=”style” value=”padding: 5px; margin-left: 5px” />
<Attribute name=”border” value=”2″ />
<Attribute name=”align” value=”right” />
</Style>
<Style name=”Custom Bold” element=”span”>
<Attribute name=”style” value=”font-weight: bold;” />
</Style>
<Style name=”Custom Italic” element=”em” />
<Style name=”Title” element=”span”>
<Attribute name=”class” value=”Title” />
</Style>
<Style name=”Code” element=”span”>
<Attribute name=”class” value=”Code” />
</Style>
<Style name=”Title H3″ element=”h3″ />
<Style name=”Custom Ruler” element=”hr”>
<Attribute name=”size” value=”1″ />
<Attribute name=”color” value=”#ff0000″ />
</Style>
</Styles>
每一?lt;style>来会生成一个样式的菜单Vname名称是昄在菜单里的文字;element定义了该样式可以应用在那Uhtml标签上,<Attribute>?name 指定了将会修Ҏ{哪个属性来应用样式Qvalue则是修改成的倹{?
看这个:
<Style name=”Title” element=”span”>
<Attribute name=”class” value=”Title” />
</Style>
如果你在fck选定了文?“l典论坛 ?前台制作与脚本专??FCKeditor 实战技?- 1 ?~辑帖子” 应用该样?则原来文字就会变?lt;span class=”Title”>l典论坛 ?前台制作与脚本专??FCKeditor 实战技?- 1 ?~辑帖子</span>
注意Q如果编辑器呈整늼辑状态,那么整页里面也需要插入样式表链接才能昄出来样式?
Q=Q=Q=Q=Q=Q=Q=Q=Q=Q=Q=Q=Q=Q=Q=Q=Q=Q=Q=Q=Q=Q=
FCKeditor JavaScript. APIQ翻译整理)
原文地址Q?a target="_new">http://wiki.fckeditor.net/Developer%27s_Guide/Javascript_API
Q-Q-Q-Q-Q-Q-Q-Q-Q-Q-Q-Q-Q-Q-Q-Q-Q-Q-Q-Q-Q-Q-
FCK ~辑器加载后Q将会注册一个全局?FCKeditorAPI 对象?
FCKeditorAPI 对象在页面加载期间是无效的,直到面加蝲完成。如果需要交互式地知?FCK ~辑器已l加载完成,可?#8220;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 ~辑器的弹出H口中获?FCK ~辑器实例:
var Editor = window.parent.InnerDialogLoaded().FCK;
从框枉面的子框架中获得其它子框架的 FCK ~辑器实例:
var Editor = window.FrameName.FCKeditorAPI.GetInstance(’InstanceName’);
从页面弹出窗口中获得父窗口的 FCK ~辑器实例:
var Editor = opener.FCKeditorAPI.GetInstance(’InstanceName’);
获得 FCK ~辑器的内容Q?
oEditor.GetXHTML(formatted); // formatted 为:true|falseQ表C是否按HTML格式取出
也可用:
oEditor.GetXHTML();
讄 FCK ~辑器的内容Q?
oEditor.SetHTML(”content”, false); // W二个参CؓQtrue|falseQ是否以所见即所得方式设|其内容。此Ҏ常用?#8220;讄初始?#8221;?#8220;表单重置”操作?
插入内容?FCK ~辑器:
oEditor.InsertHtml(”html”); // “html”为HTML文本
?FCK ~辑器内Ҏ否发生变化:
oEditor.IsDirty();
?FCK ~辑器之外调?FCK ~辑器工h命oQ?
命o列表如下Q?
Q-Q-Q-Q-Q-Q-Q-Q-Q-Q-Q-Q-Q-Q-Q-Q-Q-Q-Q-Q-Q-Q-
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
Q-Q-Q-Q-Q-Q-Q-Q-Q-Q-Q-Q-Q-Q-Q-Q-Q-Q-Q-Q-Q-Q-
使用Ҏ如下Q?
Q-Q-Q-Q-Q-Q-Q-Q-Q-Q-Q-Q-Q-Q-Q-Q-Q-Q-Q-Q-Q-Q-
oEditor.Commands.GetCommand(’FitWindow’).Execute();
Q-Q-Q-Q-Q-Q-Q-Q-Q-Q-Q-Q-Q-Q-Q-Q-Q-Q-Q-Q-Q-Q-
]]>
2、获取编辑器中文字内容(在博客发布时获取无html代码摘要使用Q?/p>
3、设|编辑器中内?/p>
在不同的览器上默认的拖拽能解决的问题相当少,所以有很多的框枉能实现这么个功能.使用拖拽行ؓ能很好的改善用户体验,其是在购物的时候能让用h到很新奇和体?Script.aculo.us使用了三个类实现拖拽和排?它们是Draggable,Droppable,Sortable.要实C个完整的拖拽行ؓ,需要Draggable,和Droppable的配合?׃q连个类的方法比较多,我只选取比较实用的几个方法进行介l?q是老规?先看看Demo:http://www1.qcxy.hb.cn/qphy/Script_Aculo_Us/DragDrop.html
new Draggable("DraggableId"[,options])
主要选项
q里需要说明的是ƈ非所有的标签都支持该行ؓ,详细的情况请参阅官方文档
API
Droppables(注意是复数Ş?是一个抽象类,不能被实例化,只有一些静态方?常用的方法有add和move,分别增加可放|元?和去除可攄元素
addҎ:Dropables.add("ContainerId"[,options]),常用的选项
remove("ContainerId"),该方法去除容器的攄行ؓ
(上面例子的源代码)
首先创徏一个jsp
<%@ page language="java" pageEncoding="UTF-8"%>
<html>
<head>
<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/effects.js"></script>
<script type="text/javascript" src="js/controls.js"></script>
<style>
div.auto_complete {
width: 350px;
background: #fff;
}
div.auto_complete ul {
border:1px solid #888;
margin:0;
padding:0;
width:100%;
list-style-type:none;
}
div.auto_complete ul li {
margin:0;
padding:3px;
}
div.auto_complete ul li.selected {
background-color: #ffb;
}
div.auto_complete ul strong.highlight {
color: #800;
margin:0;
padding:0;
}
</style>
</head>
<body>
<input type="text" id="autocomplete"/>
<div id="results" class="auto_complete"></div>
<script type="text/javascript">
new Ajax.Autocompleter(
"autocomplete",
"results",
"list.html", {
method: "GET"
}
);
</script>
</body>
</html>
list.html
<ul>
<li>Aria</li>
<li>Aaaa</li>
<li>Afdsa</li>
<li>bsa</li>
</ul>
上面list.html采用静态页面返回列表,读者可以用动态页面返回结果?
作ؓ一个Ajax开发框ӞPrototype对Ajax开发提供了有力的支持。在Prototype中,与Ajax相关的类和对象包括:Ajax、Ajax.Responsders、Ajax.Base、Ajax.Request、Ajax. PeriodicalUpdater和Ajax.UpdaterQ图2-3所CZؓq些cd对象之间的关pd其常用属性和ҎQ下面分别对q些cd对象q行介绍?/p>
?-3 Prototype中Ajax相关cd对象关系C意?/p>
Ajax对象为其他的Ajax功能cL供了最基本的支持,它的实现?.2.7节中?-10所C,其中包括一个方法getTransport和一个属性activeRequestCount。getTransportҎq回一个XMLHttpRequest对象QactiveRequestCount属性代表正在处理中的Ajaxh的个数?/p>
Ajax.BasecLAjax.RequestcdAjax.PeriodicalUpdatercȝ基类。它提供?个方法:
l setOptionsQ设|Ajax操作所使用的选项?/p>
l responseIsSuccessQ判断Ajax操作是否成功?/p>
l responseIsFailureQ判断Ajax操作是否p|Q与responseIsSuccess相反Q?/p>
Ajax.Basecȝ主要作用是提取出一些公用的ҎQ其他类通过l承的方式用这些方法,实现代码复用?/p>
q是Prototype中最l常使用的一个Ajax相关cRAjax.RequestcȝҎ通常是内部用的Q因此这里就不一一列DQ有兴趣的读者可以参考Prototype的源代码。这里重点讲讲如何用Ajax.Requestc,首先l出一个最单的Ajax.Requestcȝ应用CZQ如?-11所C,注意CZ中的黑体字?/p>
?-11 Ajax.Requestcd用示?/p>
Ajax.Request试面Q?/strong>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>chapter 3</title>
<script type="text/javascript" language="javascript"
src="prototype.js" ></script>
<script type="text/javascript" language="javascript">
function test() {
// 创徏Ajax.Request对象Q发起一个Ajaxh
var myAjax = new Ajax.Request(
'data.html', // h的URL
{
method: 'get', // 使用GET方式发送HTTPh
onComplete: showResponse // 指定h成功完成旉要执行的Ҏ
}
);
}
function showResponse(response) {
$('divResult').innerHTML = response.responseText;
}
</script>
</head>
<body>
<input type="button" value="click" onclick="test()" />
<div id="divResult" />
</body>
</html>
data.htmlQ?/strong>
<input type="text" id="name" />
<input type="button" value="Click Me" onclick="sayHi()">
Ajax.Request对象在初始化旉要提供两个参敎ͼW?个参数是要h面的URLQ这里用的data.html是一个普通的HTML静态页面;W?个参数是Ajax操作的选项Q在Prototype中ƈ没有专门为Ajax操作选项定义一个类Q通常都是像例2-11q样Q通过匿名对象的方式设|Ajax操作的参数。在?-11中,Ajax操作选项h两个属性:method表示HTTPh方式Q默认是POST方式QonComplete指定了Ajax操作完成以后Q即XMLHttpRequest对象的status属性ؓ4ӞQ页面将要执行的函数。当ӞAjax操作q包括很多其他选项Q如?-1所C?/p>
?-1 Ajax操作选项属性含?/p>
属性名U?/p> |
含义 |
method |
HTTPh方式QPOST/GET/HEADQ?/p> |
parameters |
在HTTPh中传入的URL格式的值列表,即URL串中问号之后的部分?/p> |
asynchronous |
是否做异步XMLHttpRequesth?/p> |
postBody |
在POSTh方式下,传入h体中的内宏V?/p> |
requestHeaders |
和请求一赯传入的HTTP头部列表Q这个列表必d有偶C目Q因为列表中每两ؓ一l,分别代表自定义部分的名称和与之对应的字符串倹{?/p> |
onXXXXXXXX |
在HTTPh、响应的q程中,当XMLHttpRequest对象状态发生变化时调用的响应函数。响应函数有5个:onUninitialized、onLoading、onLoaded、onInteractive和onComplete。传入这些函数的参数可以?个,其中W?个参数是执行HTTPh的XMLHttpRequest对象Q第2个参数是包含被执行的X-JSON响应的HTTP头?/p> |
onSuccess |
Ajax操作成功完成时调用的响应函数Q传入的参数与onXXXXXXXX相同?/p> |
onFailure |
Ajax操作h完成但出现错误时调用的响应函敎ͼ传入的参ConXXXXXXXX相同?/p> |
onException |
Ajax操作发生异常情况时调用的响应函数Q它可以接收2个参敎ͼ其中W?个参数是执行HTTPh的XMLHttpRequest对象Q第2个参数是异常对象?/p> |
?-11使用Ajax.RequestcdC面的局部刷新效果,而这L似的功能在Ajax应用中是l常使用的。因此,Z化这U工作,Prototype框架从Ajax.RequetcMzZ个子cZ—Ajax.Updater。与Ajax.Request相比QAjax.Updater的初始化多了一个container参数Q该参数代表要更新的页面元素的id。例2-11的功能通过Ajax.Updater的实玎ͼ会变得更加简单,如例2-12所C?/p>
?-12 Ajax.Updatercȝ应用CZ
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>chapter 3</title>
<script type="text/javascript" language="javascript"
src="prototype.js" ></script>
<script type="text/javascript" language="javascript">
function test() {
var myAjax = new Ajax.Updater(
'divResult', // 更新的页面元?/strong>
'data.html', // h的URL
{
method: 'get'
}
);
}
</script>
</head>
<body>
<input type="button" value="click" onclick="test()" />
<div id="divResult" />
</body>
</html>
此外QAjax.Updaterc还有另外一个功能,如果h的页面内容中包括JavaScript脚本QAjax.Updatercd以执行其中的脚本Q只需要在Ajax操作选项中增加属?#8220;evalScripts: true”卛_。对?-11中的data.htmlq行修改Q在其中加入JavaScript脚本Q如?-13所C?/p>
?-13 data.html
<script language="javascript" type="text/javascript">
sayHi = function() {
alert("Hello, " + $F('name') + "!");
}
</script>
<input type="text" id="name" />
<input type="button" value="Click Me" onclick="sayHi()">
调用Ajax.Updater的JavaScript脚本修改为:
function test() {
var myAjax = new Ajax.Updater(
'divResult', // 更新的页面元?/p>
'data.html', // h的URL
{
method: 'get',
evalScripts: true
}
);
}
q样可以用data.html面的内Ҏ新当前页面中?lt;div>元素divResultQƈ且执行data.html面中包含的JavaScript脚本?/p>
q里需要注意的是例2-13中sayHi函数的写法,如果写成
function sayHi() {
alert("Hello, " + $F('name') + "!");
}
或?/p>
var sayHi = function() {
alert("Hello, " + $F('name') + "!");
}
E序是不能正常运行的。这是因为Ajax.Updater执行脚本是通过eval的方式,而不是将脚本内容引入到当前页面,直接声明的function sayHi或者用var声明的sayHi函数Q其作用域只是在q段脚本内部Q外部的其他脚本不能讉KsayHi函数。而按照例2-13的方式声明的函数Q其作用域是整个window?/p>
和Ajax.Requestcȝ|Ajax.PeriodicalUpdatercMl承自Ajax.BasecR在一些Ajax应用中,需要周期性地更新某些面元素Q例如天气预报、即时新ȝ{。实现这L功能通常要用JavaScript中的定时器函数setTimeout、clearTimeout{,而有了Ajax.PeriodicalUpdatercd以很好地化这cȝ码工作?/p>
新徏一个Ajax. PeriodicalUpdatercȝ实例需要指?个参敎ͼ
l containerQ将要更新的面元素idQ?/p>
l urlQ请求的URL地址Q?/p>
l optionsQAjax操作选项?/p>
和Ajax.Updatercȝ|Ajax.PeriodicalUpdatercM支持动态执行JavaScript脚本Q只需在Ajax操作选项中增加(evalScripts: trueQ属性值即可?/p>
Ajax.PeriodicalUpdatercL持两个特D的Ajax操作选项Qfrequency和decay。frequency参数很容易理解,既然是定时更新页面元素,或者定时执行脚本,那么多长旉更新或者执行一ơ呢Qfrequency指的是两次Ajax操作之间的时间间隔,单位是秒Q默认gؓ2U?/p>
如果仅指定frequency参数Q程序会按照固定的时间间隔执行Ajax操作。这L更新{略合理吗?{案取决于请求URL中数据的更新频率。如果请求的数据会很有规律地按照固定频率改变Q那么只要设|一个合适的frequency|可以很有效地实现页面的定时更新。然而实际应用中的数据往往不会那么理想Q例如新闻,可能在一天中只有特定的一D|间更新频率会很高Q而在其他旉则几乎没有变化。经帔R到这L情况该怎么办呢QAjax.PeriodicalUpdatercL持的decay属性就是ؓ了解册个问题而生的。当option中带有decay属性时Q如果请求返回的数据与上ơ相同,那么下次q行Ajax操作的时间间隔会乘以一个decay的系数?/p>
Z比较明显地看到decay属性的效果Q在h的测试页面中加入记录旉的脚本,代码如例2-14所C?/p>
?-14 Ajax.PeriodicalUpdatercd用示?/p>
ex10.htmlQ?/strong>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>chapter 3</title>
<script type="text/javascript" language="javascript"
src="prototype.js" ></script>
<script type="text/javascript" language="javascript">
var str='';
var intcount=0;
function test() {
var myAjax = new Ajax.PeriodicalUpdater(
'divResult', // 定时更新的页面元?/p>
'script1.html', // h的URL
{
method: 'get', // HTTPh的方式ؓGET
evalScripts: true, // 是否执行h面中的脚本
frequency: 1, // 更新的频?/p>
decay: 1 // 衰减pL
}
);
}
</script>
</head>
<body>
<input type="button" value="click" onclick="test()" />
<div id="divResult" ></div>
<div id="divResult2" ></div>
</body>
</html>
script1.html:
<script language="javascript" type="text/javascript">
// Ajax.PeriodicalUpdater调用函数计数
// ?lt;div>元素divResult2中增加一行结果,q记录当前时间和
// Ajax.PeriodicalUpdater的调用次?/p>
intcount++;
str = $('divResult2').innerHTML;
$('divResult2').innerHTML = str + "count = " + intcount+ ": " + new Date() + "<br>";
</script>
?-14的运行结果如?-4所C?/p>
?-4 Ajax.PeriodicalUpdatercd用示?/p>
可以看到Q由于请求返回的数据一直没有发生变化,每次h旉的间隔是上一ơ的2倍(decay=2Q。如果某一ơ请求返回的数据发生了变化,那么执行h的时间间隔则恢复到初始倹{?/p>
Ajax.Responders对象l护了一个正在运行的Ajax对象列表Q在需要实C些全局的功能时可以用它。例如,在Ajaxh发出以后需要提C用h作正在执行中Q而操作返回以后则取消提示。利用Ajax.Responders对象可以实现这L功能Q如?-15所C?/p>
?-15 Ajax.Responders对象应用CZ
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>chapter 3</title>
<script type="text/javascript" language="javascript"
src="prototype.js" ></script>
<script type="text/javascript" language="javascript">
function test() {
var myAjax = new Ajax.Request(
'data.html',
{
method: 'get',
onComplete: showResponse
}
);
}
function showResponse(response) {
$('divResult').innerHTML = response.responseText;
}
var handle = {
onCreate: function() {
Element.show('loading'); // 当创建AjaxhӞ昄loading
},
onComplete: function() {
// 当请求成功返回时Q如果当前没有其他正在运行中的AjaxhQ隐藏loading
if (Ajax.activeRequestCount == 0) {
Element.hide('loading');
}
}
};
// handle注册到全局的Ajax.Responders对象中,使其生效
Ajax.Responders.register(handle);
</script>
</head>
<body>
<input type="button" value="click" onclick="test()" />
<div id="divResult" ></div>
<div id='loading' style="display:none">
<img src="loading.gif">Loading...
</div>
</body>
</html>
?-15中定义了一个handle对象Q其中包含onCreate和onComplete函数。页面中发出M一个Ajaxh旉会调用onCreateҎQ而请求完成时都会调用onCompleteҎ。例2-15的运行结果如?-5所C?br />