现在的位置: 首页 > 综合 > 正文

Fckeditor自学笔记二

2013年07月20日 ⁄ 综合 ⁄ 共 5311字 ⁄ 字号 评论关闭

 

接上篇。。。

五、FCKeditor一般需要修改的配置
   1、自定义ToolbarSet,去掉一些不需要的功能
  2、加上几种常用的字体
  3、修改“回车”和“Shift+回车”的换行行为
     *它的默认回车是一个段落,而不是一行。而“Shift+回车”才是真正的换行。
     *所以我们要把这两个操作功能调换过来。
  4、修改编辑区的样式文件
  5、更换表情图片(默认的太少) 
 
 问题一:如何去掉一些不需要的功能呢?
    首先:我们要在配置文件中定义个自定义的工具集。只包含有对外提供的功能。
    其次:在生成FCKeditor实例的时候指定要使用这个工具集。
    可以参考文档:
    fckconfig.js中默认配置为:

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','Blockquote'],
['JustifyLeft','JustifyCenter','JustifyRight','JustifyFull'],
['Link','Unlink','Anchor'],
['Image','Flash','Table','Rule','Smiley','SpecialChar','PageBreak'],
'/',
['Style','FontFormat','FontName','FontSize'],
['TextColor','BGColor'],
['FitWindow','ShowBlocks','-','About'] // No comma for the last row.
] ;

其中每個‘**’引起來的每个短语都對應視圖中的一個功能。‘-’表示|分隔符,‘/’表示回車
编辑器有三行,因为有两个‘/’所以就分成了三行。

所以我们就要把上边的代码定义到我们的自己定义的配置文件中,让它覆盖主配置文件中相应的属性。
   例如可以在myfckconfig.js中这样写:

FCKConfig.ToolbarSets["zhangxiangrong"] = [
['Source','DocProps','-'],
['Form','Checkbox','Radio','TextField','Textarea','Select','Button','ImageButton','HiddenField'],
['Bold','Italic','Underline','StrikeThrough','-','Subscript','Superscript'],
['OrderedList','UnorderedList','-','Outdent','Indent','Blockquote'],
['JustifyLeft','JustifyCenter','JustifyRight','JustifyFull'],
['Link','Unlink','Anchor'],
['Image','Flash','Table','Rule','Smiley','SpecialChar','PageBreak'],
'/',
['Style','FontFormat','FontName','FontSize'],
['TextColor','BGColor'],
['FitWindow','ShowBlocks','-','About'] // No comma for the last row.
] ;
   
    注意: 这些其实就是一个数组,所以我们修改时不能破坏它的结构。
    
     然后我们再调用FCKeditor的时候可以指定工具集:
     要指定我们自己的配置文件。
     可以在主配置文件(fckconfig.js)中指定:
     FCKConfig.CustomConfigurationsPath='/mypro/myfckconfig.js';
     在调用时指定我们自定义的工具集:
     var oFCKeditor =new FCKeditor("myEditor");
     oFCKeditor.ToolbarSet("zhangxiangrong");//我们自定义的工具集
         
问题二:如何加上常用的字体?

看主配置文件fckconfig.js文件中的属性:
FCKConfig.FontNames
所以我们就可以在指定的配置文件中修改它,(即让它覆盖主配置文件中相应属性)
在我们指定的配置文件(myfckconfig.js)中加入:
FCKConfig.FontNames = '宋体;楷体_GB2312;黑体;隶书;Times New Roman;Aral;'

注意在保存时会出现错误:无法保存(因为含有中文,而它的默认编码是ISO-8859-1);
所以我们要把它的编码格式修改一下,注意只能修改成"UTF-8"这种编码格式。
然后我们就可以编辑想要的字体了。

问题三: 如何修改“Enter”和“shif+Enter”的换行功能呢?

默认是:“Enter”-------------->一个段落
默认是:“shift+Enter”----------->换行
一般这样不符合我们的实际应用,所以要将其功能调换。

也在fckconfig.js中查看默认的项设置:
FCKConfig.EnterMode = 'p';       //可以设置的值:p | div | br

FCKConfig.ShiftEnterMode = 'br'; //可以设置的值:P | div | br

然后把这两个项拷贝粘贴到我们指定的配置文件中:

修改为:

FCKConfig.EnterMode = 'br';       //可以设置的值:p | div | br
FCKConfig.ShiftEnterMode = 'p'; //可以设置的值:P | div | br

这样我们就在编辑器中编辑时按下“Enter”就会是换行,“shift+Enter”就是一个段落

问题三:如何修改编辑区样式文件呢?

这个样式文件也是在主配置文件(fckconfig.js)中指定的:
默认指定为:
FCKConfig.EditorAreaCSS = FCKConfig.BasePath + 'css/fck_editorarea.css';

注意这里的FCKConfig.BasePath和我们的FCKeditor.BasePath是不一样的。
 这里我们可以用alert(FCKConfig.BasePath)来看它指的是什么?(它指到fckeditor/editor这个文件夹) 
 找到这个样式文件我们可以把我们的样式加进去。这样就可以了。
 
问题四:如何更换表情图片?

默认的表情图片不够丰富,所以我们可以修改成更多丰富的表情。
也是在主配置文件(fckconfig.js)中找到相应的配置项,复制到我们指定的配置文件中进行修改。
默认为:
//表情图片所在的文件夹路径
FCKConfig.SmileyPath = FCKConfig.BasePath + 'images/smiley/msn/' ;
//要显示文件夹中那些图片
FCKConfig.SmileyImages = ['regular_smile.gif','sad_smile.gif','wink_smile.gif','teeth_smile.gif','confused_smile.gif','tounge_smile.gif','embaressed_smile.gif','omg_smile.gif','whatchutalkingabout_smile.gif','angry_smile.gif','angel_smile.gif','shades_smile.gif','devil_smile.gif','cry_smile.gif','lightbulb.gif','thumbs_down.gif','thumbs_up.gif','heart.gif','broken_heart.gif','kiss.gif','envelope.gif'] ;
//每行显示几个图片
FCKConfig.SmileyColumns = 8 ;
//显示表情图片的宽度和高度
FCKConfig.SmileyWindowWidth  = 320 ;
FCKConfig.SmileyWindowHeight = 210 ;

我们可以把我们自己的表情图片拷贝到表情图片的文件中,并且在 FCKConfig.SmileyImages数组中加入名称。

注意在这其中如果显示的格式不好的话,可以查看表情图片的源文件,进行修改:
它的默认是不显示滚动条的,而且我们设置的宽度和高度不起作用,所以我们就得在源文件中修改成合适我们的。

我们可以点击(窗口)右键---》属性 --看到它的具体位置,找到它打开修改。
(应该是fckeditor/editor/dialog/fck_smiley.html)
在他处理onload事件中有这么一句代码:
window.onload = function ()
{
 // First of all, translate the dialog box texts
 oEditor.FCKLanguageManager.TranslatePage(document) ;
//注意这个方法是FCKeditor自己定义的(作用:根据当前的内容调整合适的窗口大小)
//我们就把这行给注释掉,负责影响我们自定义窗口大小
 dialog.SetAutoSize( true ) ;
}
将上边的  dialog.SetAutoSize( true ) ;代码注释掉。
但我们的表情图片窗口还是没滚动条,如果图片过多,就显示不完。
继续查看它的源文件:
在<body>中它设置了<body style="overflow: hidden">这种样式,因此我们就得查查style="overflow: hidden"是什么意思呢?
查询CSS手册可知道了:(CSS手册中这样解释)

overflow

说明:检索或设置对象的内容超过其指定高度及宽度时如何管理内容。

语法:
overflow:visible |auto |hidden |scroll

取值:
visible: 默认值。不剪切内容也不添加滚动条。假如显式声明此默认值,对象将以包含对象的window或frame的尺寸裁切。并且clip属性设置将失效。
auto:在必需时对象内容才会被裁切或显示滚动条
hidden:不显示超过对象尺寸的内容
scroll:总是显示滚动条

看完手册,我们明白了,就应该把 <body style="overflow: hidden">修改成:<body style="overflow: auto">

问题五:最后一个问题:我们的自定义配置文件的路径问题!
  因为我们的应用程序的发布目录是不确定的。
  所以我们在主配置文件中不能这么写:
    FCKConfig.CustomConfigurationsPath='/mypro/myfckconfig.js';
 解决方法一:
 那么我们可以把自定义配置文件放到fckeditor/editor/下边:
 这样的话我们知道它有个BasePath是指到这个目录的。所以可以这样指定:
 FCKConfig.CustomConfigurationsPath = FCKConfig.BasePath + "myfckconfig.js";
 解决方法二(推荐):
 另外我们也可以把自定义配置文件放到fckeditor这个文件夹下面:
 它还有一个属性可以指定到fckeditor这个文件夹,那么我们就可以这样指定:
 FCKConfig.CustomConfigurationsPath = FCKConfig.EditorPath + "myfckconfig.js";
 
 总结注意点:
           1、要使用UTF-8编码保存配置文件。
           2、FCKConfig.BasePath和调用fckeditor时指定的BasePath(FCKeditor.BasePath)不是同一个,其值也不一样。

抱歉!评论已关闭.