先简单介绍一下dnn里边的富文本编辑器(Rich TextEditor)的渊源,也就是我们常说的web在线编辑器,最先dnn版本是集成了FreeTextbox的,但后来由于FreeTextbox商业化了,而且本身FreeTextbox也不是特别的好用,故由于dnn本身的开源性质,最终替换了如今的FckEditor,以下就是FckEditor的一些特性:
1) 多种浏览器兼容,其中包括IE 5.5+ (Windows), Firefox 1.0+, Mozilla 1.3+和Netscape 7+以上浏览器
2) 支持 XHTML 1.0
3) 支持CSS
4) 字体属性编辑
5) 剪切、粘贴、撤销、重复
6) 从word中粘贴文档并自动清理 格式
7) 插入图片，上传图片
8) 表格编辑
9) 插入表单域及其子元素
10) 支持右键菜单
11) 可定制工具栏
12) 皮肤支持
13) 插件(Plugins)模式支持
14) 拼写检查程序
15) 多语言支持以及自动用户语言侦查。
16) 轻量级和快速
17) 自动浏览器侦查和定制
18) 支持多种编程语言,其中包括ASP，CGI，PHP，ASP.NET，Java，ColdFusion，Python等脚本
19) 支持开发者安装和API编程
20) 简单易用!
21) 开源
这里先着重提及如何定制dnn的FckEditor,在此之前先简单说明一下在dnn中FckEditor的目录结构,目前FckEditor在dnn是作为一个HtmlEditorProviders的形式出现的,也就是dnn已集成了FckEditor并为此提供一个默认的Providersl来管理,将来如果需要替换其他Providers的话也是及其方便的,我想这是dnn里Providers的魅力所在,开发过dnn的程序员都比较清楚,而其FckEditor的根目录就是$rootWebsite/Providers/HtmlEditorProviders/Fck,其中关系到我们如何定制FckEditor比较主要的目录就是默认的FCKeditor和dnn核心添加的Custom这两个目录,如果打开这两个目录看看,你就会比较清楚了,其实FCKeditor这里目录主要就是包含默认的FCKeditor所有的东西,比如skins,plugins,lang(语言包)等等,而Custom这是dnn对默认FCKeditor定制的一些修改配置.比如增加了dnn默认的编辑器工具栏属性:
- FCKConfig.ToolbarSets["DNNDefault"] = [
- ['Source','Preview','-','Templates'],
- ['Cut','Copy','Paste','PasteText','PasteWord','-','Print','SpellCheck'],
- ['Undo','Redo','-','Find','Replace','-','SelectAll','RemoveFormat'],
- ['Bold','Italic','Underline','StrikeThrough','-','Subscript','Superscript'],
- ['OrderedList','UnorderedList','-','Outdent','Indent'],
- ['JustifyLeft','JustifyCenter','JustifyRight','JustifyFull'],
- ['Link','Unlink','Anchor'],
- ['Image','Flash','Table','Rule','Smiley','SpecialChar','PageBreak'],
- ['Style','FontFormat'],['FontName','FontSize'],
- ['TextColor','BGColor'],
- ['FitWindow','-','About']
- ] ;
好了,到此介绍的部分就基本完成了,接下来就是我们如何定制dnn的FckEditor:
Note:如果修改后刷新页面没有变化,请重启IIS或关闭浏览器,重新加载页面即可.
1)如何修改自动生成的<P></P>标签:
FCKeditor编辑时回车默认添加<P></P>标签,有时会导致我们文章段落间隔很大,影响排版,故此我们不妨替换为Web 2.0下宠儿标签<div>.
解决方案:
打开Custom目录下的fckconfig.js,查找"EnterMode",将如下代码修改:
- FCKConfig.EnterMode = 'p' ;
- FCKConfig.ShiftEnterMode = 'br' ;
- FCKConfig.EnterMode = 'div' ;
- FCKConfig.ShiftEnterMode = 'br' ;
2)如何修改样式,这里我推荐一篇文章,作者对此有比较详细的讲解:
3)如何定制工具栏:
首先我们先来看看FCKeditor默认的工具栏菜单:
- FCKConfig.ToolbarSets["Default"] = [
- ['Source','DocProps','-','Save','NewPage','Preview','-','Templates'],
- ['Cut','Copy','Paste','PasteText','PasteWord','-','Print','SpellCheck'],
- ['Undo','Redo','-','Find','Replace','-','SelectAll','RemoveFormat'],
- ['Form','Checkbox','Radio','TextField','Textarea','Select','Button','ImageButton',
- 'HiddenField'],
- '/',
- ['Bold','Italic','Underline','StrikeThrough','-','Subscript','Superscript'],
- ['OrderedList','UnorderedList','-','Outdent','Indent'],
- ['JustifyLeft','JustifyCenter','JustifyRight','JustifyFull'],
- ['Link','Unlink','Anchor'],
- ['Image','Flash','Table','Rule','Smiley','SpecialChar','PageBreak'],
- '/',
- ['Style','FontFormat','FontName','FontSize'],
- ['TextColor','BGColor'],
- ['FitWindow','-','About']
- ] ;
稍微解析一下,一组"[]"代表菜单中的某一大类功能组，"-"代表功能组中的小类分隔线，"/"代表按钮图标的换行. 接下来我们再看看还有一组名为FCKConfig.ToolbarSets["Basic"]的工具栏菜单
- FCKConfig.ToolbarSets["Basic"] = [
- ['Bold','Italic','-','OrderedList','UnorderedList','-','Link','Unlink','-','FontFormat','-','About']
- ] ;
这一组工具栏比较适合网页的前台编辑,如留言本的回复,Blog评论,论坛发帖回帖等等,也就是我们只保留一些基本的功能菜单方便用户操作,但又不给予更多的权限,比如图象,链接,脚本等等,如此一来可防止对站点的入侵等等问题.我们也可以根据自己的需要，按上面的格式自已修改，需要注意的是在前台的应用上，尽量不采用图像、链接、flash、图像域添加功能.比如说我们想增加取消回滚的菜单,那我们可以修改上边的格式为:
- FCKConfig.ToolbarSets["Basic"] = [
- ['Undo','Redo','-','Bold','Italic','-','OrderedList','UnorderedList','-','About']
- ] ;
然后需要注意的是dnn编辑器默认使用的是FCKConfig.ToolbarSets["DNNDefault"],也就是如果你想在某一模块中的FCKeditor应用FCKConfig.ToolbarSets["Basic"],那需要作一些设置,有2种方式:
1)全局方式,修改web.config中的FCKeditor的配置项(这不是很可取)
2)实例方式,这里推荐一篇文章讲述如何修改,如何运用,感兴趣者不如看看:
4)如何增加中文字体的支持
记得有过好些人问我如何在dnn的FCKeditor增加中文字体的支持,我当时就尝试了一下,最后Google到一个解决方案,步骤如下:
打开Custom目录下的fckconfig.js,查找"FontNames",将如下代码修改:
- 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' ;
之后应用了一下,发现字体显示是乱码,^_^,这就是文件格式的问题,你不妨把fckconfig.js另存为UTF-8格式即可. 我想这是你重新刷页面应该出来就是你想要的字体了.
最后提一下,还要很多很多地方我们可以对FCKeditor进行配置修改以符合我们的需求.比如默认语言,默认字体大小,自定义右键菜单等等,网上也有不少文章对此有所提及,只是单独对dnn的很少.
下一篇文章,我将详细说明在dnn的FCKeditor如何使得代码高亮(插件安装).