asp.net中FCKeditor详细介绍

最新推荐文章于 2017-11-13 02:42:00 发布

LYG105504

最新推荐文章于 2017-11-13 02:42:00 发布

阅读量963

点赞数

分类专栏： WEB开发文章标签： fckeditor asp.net templates 工具 qq dialog

本文链接：https://blog.csdn.net/lyg105504/article/details/5873286

版权

WEB开发专栏收录该内容

41 篇文章 0 订阅

订阅专栏

http://shenzhoulong.blog.51cto.com/1191789/366058

添加表情的方法：

FCKeditor默认给我们提供的图片，说实话，个人感觉真是丑的个无法形容。幸好，我们还可以修改这些丑的无法形容的表情，下面大家就跟着我做吧。

首先我们要下载我们喜欢的表情图片，我也懒的上网找，QQ的表情已经很丰富可爱了，我就用它来举例吧。我们到QQ安装目录下face文件夹中挑选出我们喜欢的表情图片，然后在项目的fckeditor/editor/images/smiley文件夹中新建一个文件夹，名为myface，将我们的QQ表情复制到myface文件夹中待用。

然后在fckconfig.js中找到下面代码：
FCKConfig.SmileyPath = FCKConfig.BasePath + 'images/smiley/msn/' ;/*表情图片路径，默认为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 ;/*表情窗口高度，我们可以修改*/

每句配置的意思我已经注明了，聪明的你现在应该知道该怎么做了吧，^_^。对了，首先得吧表情图片路径给改了，这里将msn改成myface;下面修改每张图片的名字，比如我们myface文件夹下有张0.gif的图片，我们就需要这样修改：FCKConfig.SmileyImages =['0.gif']，这里工作量有点大了哦，慢慢来吧。修改完了我们来试试。OK，如果你照这我做的话效果因该出来了，恭喜……

这里有一点需要提出，QQ表情图片的大小比叫小（长和宽），如果换成比较大的图片，或者你的图片比较多的话你的编辑器表情弹出窗口就会跟着增大，导致整个屏幕无法全部显示，我们来给编辑器表情弹出窗口增加一个功能——显示下拉条。
在fckeditor/editor/dialog目录下找到fck_smiley.html修改他的代码，找到：
window.onload = function ()
{
// First of all, translate the dialog box texts
oEditor.FCKLanguageManager.TranslatePage(document) ;

dialog.SetAutoSize( true ) ;
}

和

1.将第一段代码的dialog.SetAutoSize( true ) 删除掉，
2.将overflow:hidden改为overflow:scroll
Ok,现在我们的修改已经完全做好了，刷新一下页面，在点击表情，就可以看到弹出的窗口有下拉条了。

精简的方法：fckconfig.js为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']
] ;
这段代码就是FckEditor的菜单数组，想要去掉相应的工具栏按钮，只需要找到其数组中对应的元素即可，比如我不想要粗体编辑功能，则去掉'Bold'即可。其中有两个特殊的字符串'-','/'。其中'-'为工具栏中的分隔符，'/'为工具栏的换行。

自定义一下工具栏就好了。