FCKeditor配置及操作详解1

一、JavaScript进行安装

第一步:将编辑器的脚本文件引入到需放置编辑器的页面当中的头部。

    <script type="text/javascript"  src="fckeditor/fckeditor.js"></script>

 

第二步:通过引入脚本文件,就得到了这个文本编辑器的类,我们要得到文本编辑器只要实例化这个类就行了。而创建实例有两种方式

 方式一:

     <script type="text/javascript">

          var oFCKeditor=new FCKeditor("FCKeditor1");

          oFCKeditor.BasePath='/fckeditor/';

          oFCKeditor.Create();

     </script>

我们只要在需要放置编辑器的地方引入这里脚本就可以得到一个默认的编辑器了。

 

 方式二:

     <script type="text/javascript">

           window.onload=function()

           {

                var oFCKeditor=new FCKeditor('MyTextarea');

                 oFCKeditor.BathPath='/fckeditor/';

                 oFCKeditor.ReplaceTextarea();

            }

     </script>

 

在页面的的body当中,在需要放置编辑器的地方放置:<textarea name="MyTextarea"></textarea>

这样,编辑器就会将<textarea>的标签所覆盖。

 

二、了解编辑器的配置文件

    编辑器有一系列丰富的配置使得它可以被我们自定义它的外表、特征以及行为。它的主配置文件 是“fckconfig.js”。

   可选配置项(就选几项来举例):
1、编辑器的行为:
· AutoDetectPasteFromWord:如果我们试着粘贴来时Micsoft word的文本,这个配置项将会进行检测,这 时它就会弹出一个窗口,将文本拷贝到这个窗口中,将代码进行过滤,然后放入到编辑器中。如果我们不想要这个配置项功能,我们就可以将其设置为false。FCKConfig.AutoDetectPasteFromWord=false;

 

· BaseHref:这个配置项的功能类似于<base href="">。它定义的就是加载到编辑区中的资源的基地址。这在跨域当中是很有用的。假设,我们在“http://www/mysite.com/”下有一张图片的地址指向“/images/myimage.jpg”,但是我们的编辑器是在另一个域下“http://bo.mysystem.org”,这张图片将从"http://www.mysite.com/images/myimage.jpg"进行加载。FCKConfig.BaseHref="http://www.mysite.com/"

 

2、编辑器样式:
· EditorAreaCss:这个配置项能够精确的设置在FCKeditor进行编辑的内容在网页上显示的样式,包括背景颜 
色,文字样式和大小以及自定义CSS。要达到这种目的,只需要将这个配置项指向我们需要用的CSS文件。


· FCKConfig.EditorAreaCSS=‘/mycssstyles/editorstyle.css’
默认情况下,编辑器用了一个非常简单的文件放在“editor/css/fck_editorarea.css”

 

3、HTMLM输出:
· EnterMode:当回车键按下时触动的编辑器行为。接受的HTML标签有:‘p’、'div'、和'br'。
它默认属性为'p'。因此当我们按下回车键时,是跳到下一段。而我们的习惯是换行‘br’。


· ShiftEnterMode:当同时按下Shift+Enter键时,触发的事件。接受的属性有:‘p’、'div'、和'br'。
默认情况下是"br",而我们一般将其设置成"p"。

 

4、用户界面:
· ToolbarSets:这个配置项决定了通过工具栏获得哪些功能以及在工具栏上呈现什么样的控件。
它的配置控件是放在数组当中的['Source'],这就在工具栏上呈现了一个显示源码的按钮;在配置属性当中控 
件与控件之间可以用‘-’进行分割,在网页上显示的即是‘|’。一个数组当中可以放置一组控件,如果控件 
要分为几行放置,可以用‘/’进行换行。

 

5、文件浏览和上传:
· ImageBrowser:这个配置项能使用户在浏览服务器当中的图片时,弹出一个窗口,对服务器当中的图片进行浏览

· ImageUpload:这个配置项使得用户点击上传按钮时,能够弹出一个呈现文件属性的窗口,然后选择相应的文件进行上传。 

 

三、对配置属性进行自定义

     当然可以在主配置文件当中进行直接的修改,但我们一般不要求这么做。一个值得提倡的做法就是,新建一个 配置文件,将需要进行重新配置的配置项放到这个自定的配置文件(myconfig.js)中,这样,我们只要告诉编 辑器要使用我们自定义的配置文件就行了。有两种方案:

 Method1:
   在主配置文件(fckconfig.js)当中:
FCKConfig.CustomConfigurationsPath="/myconfig.js"
这种方案,使得各种页面中的编辑器都使用了我们自定义的这种配置。

Method2:
   在每个调用编辑器的页面当中:
var oFCKeditor=new FCKeditor("FCKeditor1");
oFCKeditor.Config["CustomConfigurationsPath"]=“/myconfig.js”
oFCKeditor.Create();

配置文件的加载顺序:
· 主配置文件中的配置项进行加载
· 主配置文件当中的配置项被自定义文件当中的配置项所覆盖
· 配置项最终都会被页面当中进行的配置所覆盖

 

四、浏览器缓存的问题

 当我们更改了配置项时,我们要清理浏览器的缓存,否则我们看不到改变的效果。
 如果我们使用的是IE浏览器,CTRL+F5将会强制刷新到最新版本的js文件,而不需手动清理缓存
 如果我们用的是火狐或者其他的Mozilla子版本强制刷新快捷键:Shift+CTRL+R

 







posted on 2013-12-04 12:53  飞机说之代码也疯狂  阅读(316)  评论(0编辑  收藏  举报