html fck编辑器,HTML编辑器FCKeditor使用详解

最新推荐文章于 2024-05-14 03:24:06 发布
最新推荐文章于 2024-05-14 03:24:06 发布
阅读量507 收藏
点赞数
文章标签： html fck编辑器

一、简介

功能：所见即所得，支持图片和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作为应用根路径，部署后的目录结构如下图所示：

e1fb2ca4e7fff01dbfd02f2906ae189a.png

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＞

效果图：

0ecc07c867363ee310c62c68997cd9de.png

五、配置文件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' ;

可修改fckstyles.xml来自定义样式。

【编辑推荐】

【责任编辑：夏宗繁 TEL：(010)68476606】

点赞 0

汽车奇谈高小强
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
FckEditor中文配置手册详细说明
zsczyhua的专栏
02-18 1005
javascript调用方式： －－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－ var FCKeditor = new FCKeditor(”content”); oFCKeditor.BasePath = “FCKeditor/”; oFCKeditor.Height = 400; oFCKeditor.ToolbarSet = “Default”; oFCKe
Fck文本编辑器 FCKeditor fckeditor
07-15
**FCK文本编辑器——FCKeditor与fckeditor详解** FCK文本编辑器，全称为FCKeditor，是一个开源的富文本编辑器，主要用于网页内容的编辑和格式化。FCKeditor以其强大的功能和易用性，被广泛应用于网站后台管理系统、...
“FCK编辑器”版本识别及信息收集技术
whatiwhere的博客
11-24 1581
实验目的 学习如何查看FCK编辑器版本、上传点地址等 实验内容 实验步骤 步骤1：查看FCKeditor版本信息 本次实验使用测试网址http://www.test.com作为目标网站 本节课程我们将查看FCK的两个不同的版本,由此来了解FCK不同版本的上传地址。 快速查找实验工具 打开桌面 Everything 搜索工具，输入实验工具名称，右击选择“打开路径”，跳转实验工具所在位...
2024年【渗透测试】--- FCKeditor文本编辑器漏洞_ckeditor漏洞，保洁阿姨看完都会了
最新发布
2401_85013604的博客
05-14 620
迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！
FCKEditor - 支持word上传的富文本编辑器
Mr_Zang666的博客
07-18 435
"Servers" :[{"url":"www.ncmem.com"},{"url":"www.xproerui.com"}]//内部服务器地址(不下载此地址中的图片)JPG/PNG/GIF/BMP，推荐使用JPG格式，防止出现大图片。, "PasteImageType" : "" //粘贴文件，剪帖板的图片格式，为空表示本地图片格式。, "PasteImgSrc" : "" //shape:优先使用源公式图片，img:使用word自动生成的图片。
fckeditor编辑器在Chrome浏览器下编辑时多出空格解决方法
大剑师兰特的GIS世界
12-16 289
dedecms网站后台采用fckeditor编辑器，使用谷歌Chrome浏览器重新编辑文章的时候，下面会多出很多空格，影响编辑效率，在做资料上传的时候发现内容前面都会有一个空格，网站前台预览的时候文章前面就多出一个空格，影响美观。
FCKEditor研究一
simonezhlx的专栏
07-03 2437
初步了解了一下FCKEditor。　　研究的内容包括如下几个方面：　　一、FCKEditor的介绍　　二、FCKEditor的下载　　三、FCKEditor的工作原理　　四、FCKEditor配置方法　　五、FCKEditor的使用方法　　六、FCKEditor的优化 　　第一部分：FCKEditor介绍　　FCKEditor是一款开源的在线HTML编辑器。
FCK编辑器及使用手册
11-10
**FCK编辑器详解** FCKeditor是一款开源的JavaScript富文本编辑器，它为Web开发者提供了在网页上创建和编辑富文本内容的功能。这款编辑器以其强大的功能、易用性和可扩展性，曾经广泛应用于各类网站和应用程序。...
fck编辑器手册详解
06-23
《FCK编辑器手册详解——深入理解样式与配置》 FCKeditor，作为一个强大的富文本编辑器，提供了丰富的功能和自定义选项，使得用户能够轻松地编辑和格式化HTML内容。本文将深入探讨FCKeditor的手册，特别是关于编辑...
FCK 编辑器的应用
11-15
**FCK编辑器详解** FCKeditor是一款开源的富文本编辑器，广泛应用于网页内容编辑、CMS系统、论坛等场景。它提供了丰富的文本格式化功能，使得用户可以在浏览器端进行类似Word的文本编辑操作，极大地提高了网站内容...
fck 文本编辑器
12-29
**FCK编辑器详解** FCKeditor是一款开源的JavaScript富文本编辑器，它在Web开发领域广泛应用，尤其在创建和编辑HTML内容时。这个编辑器以其功能强大、易用性高以及良好的兼容性而受到开发者们的青睐。在这个压缩包...
fck web 编辑器
07-28
fck web 编辑器 eclipse 6.5 工程
FCK编辑器使用手册
06-23
由于给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”]
FCK编辑器谷歌地图插件 for pjblog.rar
07-14
FCK编辑器谷歌地图插件 首先请下载谷歌地图插件文件包，解压后整个目录上传到FCK编辑器目录下的editor\plugins目录下 然后，打开FCK编辑器目录下的fckconfig.js文件，找到如下一句代码 FCKConfig.PluginsPath = FCKConfig.BasePath 'plugins/' ;    在其下一行插入一句代码如下 FCKConfig.Plugins.Add( 'googlemaps','zh-cn') ;    然后找到FCK工具栏按钮设置代码，我这里以图片按钮为例 ,'Image',    在其后插入谷歌地图按钮代码 'googlemaps',    然后在此文件的最后添加一句KEY代码如下 FCKConfig.GoogleMaps_Key = 'ABQIAAAAlXu5Pw6DFAUgqM2wQn01gxT2yXp_ZAY8_ufC3CFXhHIE1NvwkxSy5hTGQdsosYD3dz6faZHVrO-02A';    但是其中的KEY需要你去谷歌地图为自己的网站申请，并替换一下。KEY申请页面如下http://code.google.com/apis/maps/signup.html 到这一步就安装完毕了。 剩下的就是使用了，我专门为大家把这个谷歌地图插件做了一个中文语言文件，所以当大家需要使用此插件时，点击谷歌地图按钮，就会出现中文的插件界面，使用起来也很简单。 “地图”选项卡中，这里设置地图显示的大小、俯视缩放比例、地理经纬度 “搜索”选项卡中，可以通过搜索“地标”来快速对地图进制定位，比如输入“北京宫故”，点击搜索，那么地图会快速定位在北京故宫 “标签”选项卡中，可以在地图添加地标标签，并在标签中添加文字说明 “线标”选项卡中，通过双击添加线标点，构成线标路径 最后点击确认将设置好的地图插入日志中。OK
fckeditor漏洞_三十，文件上传漏洞、编辑器漏洞和IIS高版本漏洞及防御
qq_50854662的博客
11-08 4732
fckeditor漏洞_三十，文件上传漏洞、编辑器漏洞和IIS高版本漏洞及防御
FCKEDITOR编辑器复制粘贴图片上传
weixin_52041354的博客
04-07 587
编辑器是fckeditor，有点旧了，为fckeditor编辑器增加粘贴Word图片的功能，支持快捷键操作（Ctrl+V），粘贴后word图片自动上传到web服务器中，自动返回图片和文字HTML，自动将图片和文字HTML添加到编辑器中，自动保留文字样式，文字大小，字体颜色，用户可以直接看到粘贴后的效果。支持word粘贴，word内容粘贴,word图文粘贴,word图片粘贴，粘贴后图片能够自动上传到服务器中，然后将图片和内容HTML添加到编辑器中，上传接口地址能够自定义。–组件初始化的目标容器–>
FCKeditor（FCK）上传漏洞利用原理详解
积木网络
12-15 5873
积木网络FCK的问题与IIS的解析漏洞有着密切的关系，自IIS解析漏洞披露后，fck就遭受了新一轮冲击。由于fck对上传文件的扩展名检查不严格，导致了一些畸形文件名文件的上传，比如上面说道的test.asp;z.jpg，而由于IIS解析漏洞的原因，IIS会把这种格式的文件当做动态文件解析。FCK修正了一次之后，又出现了二次上传漏洞，就是第一次会把扩展名中多余的”.“替换成”-“，但是如果再传一次同
FCKeditor编辑器漏洞
arissa666的博客
10-18 297
FCKeditor在网页上属于开发源代码的文字编辑器，FCK是作者的名字。
FckEditor配置手册中文教程详细说明1
小肖的专栏
03-05 1277
 首先,FCKEDITOR的性能是非常好的,用户只需很少的时间就可以载入FCKEDITOR所需文件.对于其他在线编辑器来说,这几乎是个很难解决的难题,因为在开启编辑器时需要装载太多的文件.比如CUTEEDITOR,虽然功能比FCKEDITOR还要强大,可是,它本身也够庞大了,至于FREETEXTBOX等,其易用性与FCKEDITOR相比,尚有差距,可以说,FCKEDITOR是一个别具匠心的在线编辑
解释一下FCK：editor标签的instanceName，basePath，toolbarSet
03-30
在使用FCK编辑器时，需要设置一些属性，其中包括instanceName、basePath和toolbarSet。 1. instanceName：该属性用于指定FCK编辑器实例的名称，以便在页面中使用多个编辑器时进行区分。例如：instanceName=...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值