1.首先登录官网下载文件包 如:FCKeditor_2.6.4.1.zip
2.解压后生成一个目录fckeditor将该目录拷贝到工程的根目录下
3.在页面中引用工具包,这里使用使用Javascript引用,还可以使用FCK的标签引用
<script type="text/javascript" src="fckeditor/fckeditor.js"></script>
4.定义一个文本编译域,并在窗体加载时加载事件:
<script type="text/javascript">
window.onload=function(){
var oFCKeditor = new FCKeditor( 'myData' ) ;
//编译器基本路径
oFCKeditor.BasePath = "/fckeditor/fckeditor/";
//高度
oFCKeditor.Width=600;
//宽度
oFCKeditor.Height=400;
//初始化内容
oFCKeditor.value="WRITE YOU MESSAGE HERE!";
oFCKeditor.ReplaceTextarea() ;
}
</script>
<textarea rows="10" cols="20" name="myData" id="myData">
</textarea>
1.修改工具条的内容
在引用文件里有一个fckconfig.js文件,打开后找到
FCKConfig.ToolbarSets["Default"]的配置,引用默认使用的是Default
一共63个属性,分别对在页面中看到的功能,自己定制想要的功能即可。
2.修改增加可应用的字体
同样在fckconfig.js文件中找到
FCKConfig.FontNames属性,然后进行增加如:
FCKConfig.FontNames = '宋体;楷体;Arial;Comic Sans MS;Courier New;Tahoma;Times New Roman;Verdana' ;
就增加了宋体和楷体两种样式
3.修改回车样式
同样在fckconfig.js文件中找到
FCKConfig.EnterMode = 'p' ; // p | div | br
FCKConfig.ShiftEnterMode = 'br' ; // p | div | br
定义了回车和SHIFT+回车的样式,默认是P,后面列出了可以使用的值,改为BR即可
4.增加表情图片
同样在fckconfig.js文件中找到
FCKConfig.SmileyPath = FCKConfig.BasePath + 'images/smiley/msn/' ;
FCKConfig.SmileyImages = ['paisini.JPG','regular_smile.gif'] ;
FCKConfig.SmileyColumns = 8 ;
FCKConfig.SmileyWindowWidth = 320 ;
FCKConfig.SmileyWindowHeight = 210 ;
以上属性意思分别为,图片地址,图片,每行显示几个表情,表情窗口的宽度,高度
只要将图片复制到指定的文件内,然后在FCKConfig.SmileyImages内注册一下即可
注意:当我们添加的图片太多时,显示将出现不尽人意的地方,以下为如何显示滚动条
打开表情窗口看窗口属性可以得知,该窗口实际上是一个页面,该页面在
Fckeditor/ editor/ dialog/ fck_smiley.html ,找到文件做如下修改:
(1)在该页面加载时调用了一个函数
window.onload = function ()
{
// First of all, translate the dialog box texts
oEditor.FCKLanguageManager.TranslatePage(document) ;
//dialog.SetAutoSize( true ) ;
}
注释掉第二句内容
(2)在页面中有该属性
<body style="overflow: hidden">
Overflow的意思可以参考CSS手册,默认是不显示滚动条,可选值还有 auto 需要时显示;scroll 总是显示,设置为 auto 即可
5.去除浏览器服务器按钮功能
我们在点击图片时可以看到有一个浏览服务器的功能,我们现在要将其去除,同样在该页面看属性,找到对应的文件,这个窗口对应的文件为:
fckeditor/editor/dialog/fck_image.html
在页面里找到对应按钮,注释即可!另外,该窗口的预览中带有大量问题,如果想去除或更改以同样方式找到对应的页面,修改或删除即可,注意是在文本框内右键看属性