登录  /  注册

HTML编辑器FCKeditor使用详解

黄舟
发布: 2016-12-15 13:20:10
原创
1357人浏览过

 一、简介
功能:所见即所得,支持图片和flash,工具栏可自由配置,使用简单
兼容性:ie 5.5+、firefox 1.5+、safari 3.0+、opera 9.50+、netscape 7.1+、 camino 1.0+
成熟度:使用广泛,被baidu、csdn等选用
二、下载
官方下载首页:http://www.fckeditor.net/download/,当前版本为2.5.1
需要下载fckeditor 2.5.1(fckeditor_2.5.1.zip)和fckeditor.java(fckeditor-2.3.zip)
三、部署
本例以webroot作为应用根路径,部署后的目录结构如下图所示:

1. fckeditor_2.5.1.zip解压,将fckeditor文件夹复制到/webroot/下
2. fckeditor-2.3.zip解压,将commons-fileupload.jar和fckeditor-2.3.jar复制到/webroot/web-inf/lib/下
3. 修改/webroot/web-inf/web.xml文件,增加以下内容:
<servlet>
<servlet-name>connector</servlet-name>
<servlet-class>com.fredck.fckeditor.connector.connectorservlet</servlet-class>
<init-param>
<param-name>basedir</param-name>
<param-value>/userfiles/</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>/userfiles/</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>
<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/connector</url-pattern>
</servlet-mapping>
<servlet-mapping>
<servlet-name>simpleuploader</servlet-name>
<url-pattern>/fckeditor/simpleuploader</url-pattern>
</servlet-mapping>
4. 修改/webroot/fckeditor/fckconfig.js,修改部分如下:
fckconfig.linkbrowserurl = fckconfig.basepath + 'filemanager/browser/
default/browser.html?connector=/fckeditor/connector' ;
fckconfig.imagebrowserurl = fckconfig.basepath + 'filemanager/browser/
default/browser.html?type=image&connector=/fckeditor/connector' ;
fckconfig.flashbrowserurl = fckconfig.basepath + 'filemanager/browser/
default/browser.html?type=flash&connector=/fckeditor/connector' ;
fckconfig.linkuploadurl = '/fckeditor/simpleuploader?type=file' ;
fckconfig.imageuploadurl = '/fckeditor/simpleuploader?type=image' ;
fckconfig.flashuploadurl = '/fckeditor/simpleuploader?type=flash';
注意:
(1) 步骤3、4设置了文件浏览和上传的配置,web.xml中servlet的要和fckconfig.js中的url引用一致;
(2) 本例正常运行的前提是webroot被部署为根路径,如果设了虚拟路径会找不到servlet。
四、使用
本例使用最直接的js方式,api和taglib方式参见fckeditor-2.3.zip解压后_samples下的例子。
fckdemo.jsp:
<%@ page contenttype="text/html;charset=gbk"%>
<html>
<head>
<title>fckeditor test</title>
<script type="text/javascript" src="/fckeditor/fckeditor.js"></script>
</head>
<body>
<form action="fckdemo.jsp" method="post">
<% 
string content=request.getparameter("content");
if (content != null) {
content = content.replaceall("\r\n", "");
content = content.replaceall("\r", "");
content = content.replaceall("\n", "");
content = content.replaceall("\"", "'");
}else{
content = "";
}
%>
<table width=100%>
<tr>
<td colspan=4 style='text-align:center' width=100% height=50px>
<span>
<script type="text/javascript">
var ofckeditor = new fckeditor('content');//传入参数为表单元素(由fckeditor生成的input或textarea)的name
ofckeditor.basepath='/fckeditor/';//指定fckeditor根路径,也就是fckeditor.js所在的路径
ofckeditor.height='100%';
ofckeditor.toolbarset='demo';//指定工具栏
ofckeditor.value="<%=content%>";//默认值
ofckeditor.create();
</script>
</span>
</td>
</tr>
<tr><td align=center><input type="submit" value="提交"></td></tr>
<tr><td> </td></tr>
<tr><td>取值(可直接保存至数据库):</td></tr>
<tr><td style="padding:10px;"><%=content%></td></tr>
</table>
</form>
</body>
</html>
效果图:

五、配置文件fckconfig.js
1. defaultlanguage:缺省语言,可更改为“zh-cn”
2. 自定义工具栏:可修改或增加toolbarsets,例如:
fckconfig.toolbarsets["demo"] = [
['bold','italic','-','orderedlist','unorderedlist','-','link','unlink
','-','textcolor','bgcolor','-','style','-','image','flash','table']
] ;
3. entermode和shiftentermode:“回车”和“shift+回车”的换行行为,注释提示了可选模式
4. editorareacss:编辑区样式文件
5. 其他参数:
autodetectlanguage=true/false 自动检测语言 
basehref="" 相对链接的基地址 
contentlangdirection="ltr/rtl" 默认文字方向 
contextmenu=字符串数组,右键菜单的内容 
customconfigurationspath="" 自定义配置文件路径和名称 
debug=true/false 是否开启调试功能,这样,当调用fckdebug.output()时,会在调试窗中输出内容 
enablesourcexhtml=true/false 为true时,当由可视化界面切换到代码页时,把html处理成xhtml 
enablexhtml=true/false 是否允许使用xhtml取代html 
fillemptyblocks=true/false 使用这个功能,可以将空的块级元素用空格来替代 
fontcolors="" 设置显示颜色拾取器时文字颜色列表 
fontformats="" 设置显示在文字格式列表中的命名 
fontnames="" 字体列表中的字体名 
fontsizes="" 字体大小中的字号列表 
forcepasteasplaintext=true/false 强制粘贴为纯文本 
forcesimpleampersand=true/false 是否不把&符号转换为xml实体 
formatindentator="" 当在源码格式下缩进代码使用的字符 
formatoutput=true/false 当输出内容时是否自动格式化代码 
formatsource=true/false 在切换到代码视图时是否自动格式化代码 
fullpage=true/false 是否允许编辑整个html文件,还是仅允许编辑body间的内容 
geckousespan=true/false 是否允许span标记代替b,i,u标记 
iespelldownloadurl=""下载拼写检查器的网址 
imagebrowser=true/false 是否允许浏览服务器功能 
imagebrowserurl="" 浏览服务器时运行的url 
imagebrowserwindowheight="" 图像浏览器窗口高度 
imagebrowserwindowwidth="" 图像浏览器窗口宽度 
linkbrowser=true/false 是否允许在插入链接时浏览服务器 
linkbrowserurl="" 插入链接时浏览服务器的url 
linkbrowserwindowheight=""链接目标浏览器窗口高度 
linkbrowserwindowwidth=""链接目标浏览器窗口宽度 
plugins=object 注册插件 
pluginspath="" 插件文件夹 
showborders=true/false 合并边框 
skinpath="" 皮肤文件夹位置 
smileycolumns=12 图符窗列数 
smileyimages=字符数组 图符窗中图片文件名数组 
smileypath="" 图符文件夹路径 
smileywindowheight 图符窗口高度 
smileywindowwidth 图符窗口宽度 
spellchecker="iespell/spellerpages" 设置拼写检查器 
startupfocus=true/false 开启时focus到编辑器 
stylesxmlpath="" 设置定义css样式列表的xml文件的位置 
tabspaces=4 tab键产生的空格字符数 
toolbarcancollapse=true/false 是否允许展开/折叠工具栏 
toolbarsets=object 允许使用toolbar集合 
toolbarstartexpanded=true/false 开启是toolbar是否展开 
usebroncarriagereturn=true/false 当回车时是产生br标记还是p或者div标记
六、自定义样式
工具栏的style选项,是由fckconfig.js指定的配置文件来产生的:
fckconfig.stylesxmlpath = fckconfig.editorpath + 'fckstyles.xml' ;

以上就是HTML编辑器FCKeditor使用详解的内容,更多相关文章请关注PHP中文网(www.php.cn)!

智能AI问答
PHP中文网智能助手能迅速回答你的编程问题,提供实时的代码和解决方案,帮助你解决各种难题。不仅如此,它还能提供编程资源和学习指导,帮助你快速提升编程技能。无论你是初学者还是专业人士,AI智能助手都能成为你的可靠助手,助力你在编程领域取得更大的成就。
来源:php中文网
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
最新问题
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2024 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号