欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

FCKeditor 网页在线编辑器的使用方法

程序员文章站 2022-03-20 15:07:53
它不需要安装任何形式的客户端,兼容绝大多数主流浏览器,支持asp.net、asp、coldfusion 、php、jsp、active-foxpro、lasso、perl、...

它不需要安装任何形式的客户端,兼容绝大多数主流浏览器,支持asp.net、asp、coldfusion 、php、jsp、active-foxpro、lasso、perl、ython 等编程环境。

官方网站 http://www.fckeditor.net/

官方文档 http://wiki.fckeditor.net/

下载地址 http://www.fckeditor.net/download/default.html

fckeditor安装和配置

下载fckeditor2.63.zip和fckeditor.net2.63版的2个zip包

(a)   fckeditor_2.6.3是html文件、javascript文件和图片等资源文件

(b)   fckeditor.net_2.6.3.zip是一个asp.net控件dll文件 

asp.net项目中添加对 fckeditor 的引用

1. 项目上选择添加引用找到fredck.fckeditorv2.dll或直接将fredck.fckeditorv2.dll复制到项目的bin目录中

2. 为了方便开发,可以把fredck.fckeditorv2.dll控件也添加到vs的工具箱中

3. 配置web.config,在<appsettings>节点添加,如下所示:

<appsettings>

<!--fckeditor文本编辑控件配置-->

<add key="fckeditor.basepath" value="~/fckeditor/"/>

<add key="fckeditor.userfilespath" value="/解决方案名/uploads"/> //userfilespath的文路径可以在fckeditor/editor/filemanager/connectors/aspx/config.ascx中更改

</appsettings>
4.网页中使用
<fckeditorv2:fckeditor id="fckeditor" runat="server" basepath="~/fckeditor/">//basepath指定到fckeditor的根目录
</fckeditorv2:fckeditor>

fckeditor 的配置:

进入fckeditor文件夹,编辑 fckconfig.js 文件

1、修改(改成自己当前使用的语言)

var _filebrowserlanguage = 'aspx' ; // asp | aspx | cfm | lasso | perl | php | py

var _quickuploadlanguage = 'aspx' ; // asp | aspx | cfm | lasso | perl | php | py

2、修改配置语言

fckconfig.defaultlanguage = ‘en'  为: fckconfig.defaultlanguage = ‘zh-cn' ;

3、配置皮肤,有default、office2003、silver风格等。

fckconfig.skinpath = fckconfig.basepath + 'skins/default/' ;

4、在编辑器域内可以使用tab键。(1为是,0为否)

fckconfig.tabspaces = 0 ; 改为 fckconfig.tabspaces = 1 ;

5、加上几种常用的字体:

 fckconfig.fontnames = ‘宋体;黑体;隶书;楷体_gb2312;arial;comic sans ms;courier new;tahoma;times new roman;verdana';

6、编辑器域内默认的显示字体为12px,想要修改可以通过修改样式表来达到要求,打开/editor/css/fck_editorarea.css,修改font-size属性即可

7、关于安全性

如果你的编辑器用在前台非认证的情况下,推荐使用basic的toolbar

fckconfig.toolbarsets["basic"] = [
  ['bold','italic','-','orderedlist','unorderedlist','-','link','unlink','image','-','about']

] ;

8、在上传文件窗口点击浏览服务器,可能会出现 the server didn't send back a proper xml….. 错误提示,是因为fckeditor要求不同类型的文件分别传到不同的目录,包括file,image,falsh,media 等目录,可以先建立起来试试。

fckeditor.net 2.6 的安全性配置

文件上传,出错:(this connector is disabled.please check the "editor/filemanager/connectors/aspx/config.ascx" file.)

打开 editor/filemanager/connectors/aspx/config.ascx 文件,返回true.

复制代码 代码如下:

private bool checkauthentication()
{
// warning : do not simply return "true". by doing so, you are allowing
// "anyone" to upload and list the files in your server. you must implement
// some kind of session validation here. even something very simple as...
//
//return ( session[ "isauthorized" ] != null && (bool)session[ "isauthorized" ] == true );
//
// ... where session[ "isauthorized" ] is set to "true" as soon as the
// user logs in your system.

return true;
}

fckeditor的精简和清理
进入fckeditor文件夹,将所有以“_”开头的文件和文件夹删,删除fckeditor文件夹下后缀名为:.afp、.cfc、.cfm、.lasso、.pl、.py、.txt文件,只保留fckeditor文件夹下fckconfig.js、fckeditor.js、fckstyles.xml、fcktemplates.xml就可以了;
进入editor文件夹,删掉“_source”文件夹,里面放的同样是源文件;
lang里面放的是语言包,如果只是用简体中文,那么只保留fcklanguagemanager.js、zh-cn.js两个文件就ok,建议保留en.js(英文)、zh.js(繁体中文)两个文件,fcklanguagemanager.js是语言配置文件,有了它才能和 fckconfig.js里的设置成对,对应上相应的语言文件,一定要保留!
简单介绍一下配置文件fckconfig.js中文注释。如有理解错误的地方请高手留言指正。
fckconfig.customconfigurationspath = '' ; //自定义配置文件路径和名称
fckconfig.editorareacss = fckconfig.basepath + 'css/fck_editorarea.css' ; //文本编辑区域的样式表文件路径

fckconfig.editorareastyles = '' ; //文本编辑区域的样式表风格
fckconfig.toolbarcombopreviewcss = '' ; //工具栏预览css
fckconfig.doctype = '' ; //文档类型
fckconfig.basehref = '' ; //相对链接的基地址
fckconfig.fullpage = false ; //是否允许编辑整个html文件,还是仅允许编辑body间的内容
fckconfig.startupshowblocks = false ; //是否启用"显示模块"
fckconfig.debug = false ; //是否开启调试窗口功能
fckconfig.allowquerystringdebug = true ; //是否启用网页查询调试功能
fckconfig.skinpath = fckconfig.basepath + 'skins/default/' ; //fckeditor皮肤路径
fckconfig.skineditorcss = '' ; //编辑器的皮肤css路径
fckconfig.skindialogcss = '' ; //对话窗口的皮肤css路径
fckconfig.preloadimages = [ fckconfig.skinpath + 'images/toolbar.start.gif', fckconfig.skinpath + 'images/toolbar.buttonarrow.gif' ] ;
//预装入的图片

fckconfig.pluginspath = fckconfig.basepath + 'plugins/' ; //插件路径
fckconfig.autogrowmax = 400 ;
//文本编辑区域允许自动增长的最大高度限制,设置此属性时应同时将
// fckconfig.plugins.add( 'autogrow' ) ;属性的注释去除,配合使用
fckconfig.autodetectlanguage = true ; //是否自动检测语言
fckconfig.defaultlanguage = 'en' ; //默认语言
fckconfig.contentlangdirection = 'ltr' ; //默认的文字方向,可选"ltr/rtl",即从左到右或从右到左
fckconfig.processhtmlentities = true ; //处理html实体
fckconfig.includelatinentities = true ; //包括拉丁文
fckconfig.includegreekentities = true ; //包括希腊文
fckconfig.processnumericentities = false ; //处理数字实体
fckconfig.additionalnumericentities = '' ; //附加的数字实体
fckconfig.fillemptyblocks = true ; //是否填充空块
fckconfig.formatsource = true ; //在切换到代码视图时是否自动格式化代码
fckconfig.formatoutput = true ; //当输出内容时是否自动格式化代码
fckconfig.formatindentator = ' ' ; //当在源码格式下缩进代码使用的字符
fckconfig.emailprotection = 'none' ; //侦测电子邮件链接
fckconfig.emailprotectionfunction = 'mt(name,domain,subject,body)' ; //侦测电子邮件链接
fckconfig.startupfocus = false ; //开启时焦点是否到编辑器,即打开页面时光标是否停留在fckeditor上
fckconfig.forcepasteasplaintext = false ; //是否强制粘贴为纯文本内容
fckconfig.autodetectpastefromword = true ; //是否自动探测从word粘贴文件,仅支持ie
fckconfig.showdropdialog = true ; //是否显示下拉菜单
fckconfig.forcesimpleampersand = false ; //是否不把&符号转换为xml实体
fckconfig.tabspaces = 0 ; //按下tab键时光标跳格数,默认值为零为不跳格
fckconfig.showborders = true ; //是否合并边框
fckconfig.sourcepopup = false ; //是否弹出
fckconfig.toolbarstartexpanded = true ; //启动fckeditor工具栏默认是否展开
fckconfig.toolbarcancollapse = true ; //是否允许折叠或展开工具栏
fckconfig.ignoreemptyparagraphvalue = true ; //是否忽略空的段落值
fckconfig.floatingpanelszindex = 10000 ; //浮动面板索引
fckconfig.htmlencodeoutput = false ; //是否将html编码输出
fckconfig.templatereplaceall = true ; //是否替换所有模板
fckconfig.templatereplacecheckbox = true ; //是否将实际内容显示在模版窗口中
fckconfig.toolbarlocation = 'in' ; //工具栏位置
fckconfig.toolbarsets["default"] //配置默认工具栏中各按钮,适合用于后台编辑
fckconfig.toolbarsets["basic"] //配置基本工具栏按扭,适合前台编辑
fckconfig.entermode = 'p' ; //编辑文本时按回车键自动生成<p></p>标签
fckconfig.shiftentermode = 'br' ; ////编辑文本时按shift+回车键自动生成<br />标签
fckconfig.keystrokes //自定义键盘快捷键
fckconfig.contextmenu //定义右键菜单的内容
fckconfig.browsercontextmenuonctrl = false ; //是否允许在编辑区域中当按下ctrl键时,点击鼠标右键显示浏览器的上下文菜单
fckconfig.browsercontextmenu = false ; //是否允许在编辑区域中点击鼠标右键显示浏览器的上下文菜单
fckconfig.enablemorefontcolors = true ; //是否禁止更多颜色选项
fckconfig.fontcolors //文字颜色列表
fckconfig.fontformats //文字格式列表
fckconfig.fontnames //字体列表
fckconfig.fontsizes //字号列表
fckconfig.stylesxmlpath = fckconfig.editorpath + 'fckstyles.xml' ; //css样式列表的xml文件的位置
fckconfig.templatesxmlpath = fckconfig.editorpath + 'fcktemplates.xml' ; //模版的xml文件位置
fckconfig.spellchecker = 'wsc' ; //拼写检查器
fckconfig.iespelldownloadurl = 'http://www.iespell.com/download.php' ; //下载拼写检查器的网址
fckconfig.spellerpagesserverscript = 'server-scripts/spellchecker.php' ; //拼写检查器脚本路径
fckconfig.firefoxspellchecker = false ; //firefox浏览器拼写检查
fckconfig.maxundolevels = 15 ; //最大可以撤销的次数
fckconfig.disableobjectresizing = false ; //是否禁止用户调整图像和表格的大小
fckconfig.disablefftablehandles = true ; //是否禁用表格工具
fckconfig.linkdlghidetarget = false ; //是否隐藏link窗口的target标签
fckconfig.linkdlghideadvanced = false ; //是否隐藏link窗口的advanced标签
fckconfig.imagedlghidelink = false ; //是否隐藏image窗口的link标签
fckconfig.imagedlghideadvanced = false ; //是否隐藏image窗口的advanced标签
fckconfig.flashdlghideadvanced = false ; //是否隐藏flash窗口的advanced标签
fckconfig.protectedtags = '' ; //添加html套用格式
fckconfig.bodyid = '' ; //设置编辑器的id
fckconfig.bodyclass = '' ; //设置编辑器的class
fckconfig.defaultstylelabel = '' ; //设置文本编辑器的风格,默认为空白文档
fckconfig.defaultfontformatlabel = '' ; //设置默认格式
fckconfig.defaultfontlabel = '' ; //设置默认字体
fckconfig.defaultfontsizelabel = '' ; //设置默认字体大小
fckconfig.defaultlinktarget = '' ; //设置默认链接目标为(_blank、_self _parent、_top)
fckconfig.cleanwordkeepsstructure = false ; //是否设置直接粘贴为word格式
fckconfig.removeformattags //删除文字时是否删除相应的格式
fckconfig.removeattributes //删除文字时是否删除相应的样式
fckconfig.customstyles //样式菜单
fckconfig.corestyles //设置fckeditor核心样式
fckconfig.indentlength = 40 ; //编辑器中缩进量的长度
fckconfig.indentunit = 'px' ; //编辑器中缩进量的单位
fckconfig.indentclasses = [] ; //fckeditor允许使用css缩进
fckconfig.justifyclasses = [] ; //fckeditor允许使用css类文本
var _filebrowserlanguage = 'php' ; //文件浏览器使用的语言
var _quickuploadlanguage = 'php' ; //快速上传使用的语言
var _filebrowserextension = _filebrowserlanguage == 'perl' ? 'cgi' : _filebrowserlanguage ; //文件浏览器扩展
var _quickuploadextension = _quickuploadlanguage == 'perl' ? 'cgi' : _quickuploadlanguage ; //快速上传扩展
fckconfig.linkbrowser = true ; //是否允许在插入链接时浏览服务器
fckconfig.linkbrowserurl //插入链接时浏览服务器的url
fckconfig.linkbrowserwindowwidth //链接目标浏览器窗口宽度
fckconfig.linkbrowserwindowheight //链接目标浏览器窗口高度
fckconfig.imagebrowser = true ; //是否关闭图片文件浏览服务器的功能
fckconfig.imagebrowserurl //图片文件浏览服务器的url
fckconfig.imagebrowserwindowwidth //图像浏览器窗口宽度
fckconfig.imagebrowserwindowheight //图像浏览器窗口高度
fckconfig.flashbrowser = true ; //是否关闭flash浏览服务器的功能
fckconfig.flashbrowserurl //flash浏览服务器的url
fckconfig.flashbrowserwindowwidth //flash浏览器窗口宽度
fckconfig.flashbrowserwindowheight //flash浏览器窗口高度
fckconfig.linkupload = true ; //是否开启文件上传的功能
fckconfig.linkuploadurl //指定默认上传文件的地址
fckconfig.linkuploadallowedextensions //设置允许上传文件的扩展名
fckconfig.linkuploaddeniedextensions = "" ; //设置允许上传脚本文件的扩展名
fckconfig.imageupload = true ; //是否开启图片上传功能
fckconfig.imageuploadurl //指定默认上传图片文件的地址
fckconfig.imageuploadallowedextensions //设置允许上传图片文件的扩展名
fckconfig.imageuploaddeniedextensions = "" ; //设置允许上传图片脚本文件的扩展名
fckconfig.flashupload = true ; //是否开启flash上传功能
fckconfig.flashuploadurl //flash上传文件的地址
fckconfig.flashuploadallowedextensions //设置允许上传flash文件的扩展名
fckconfig.flashuploaddeniedextensions = "" ; //设置允许上传flash脚本文件的扩展名
fckconfig.smileypath //插入表情图标的路径
fckconfig.smileyimages //表情图标的文件名称
fckconfig.smileycolumns = 8 ; //表情窗口显示表情列数
fckconfig.smileywindowwidth = 320 ; //表情窗口显示宽度,此窗口会因为表情文件的改变而作调整
fckconfig.smileywindowheight = 210 ; //表情窗口显示高度,此窗口会因为表情文件的改变而作调整
fckconfig.backgroundblockercolor = '#ffffff' ; //编辑器弹出窗口时,背景遮照住的颜色
fckconfig.backgroundblockeropacity = 0.50 ; //编辑器弹出窗口时,背景遮照住的透明度
fckconfig.mswebbrowsercontrolcompat = false ;
fckconfig.preventsubmithandler = false ;