FCKeditor的Javascript 创建和使用方法

最新推荐文章于 2025-08-22 13:39:56 发布

fest

最新推荐文章于 2025-08-22 13:39:56 发布

阅读量2k

点赞数

分类专栏： Html、Script、CSS 文章标签： fckeditor javascript collections constructor properties class

Html、Script、CSS 专栏收录该内容

11 篇文章

订阅专栏

本文详细介绍了如何在网页中使用JavaScript集成FCKeditor富文本编辑器。包括将必要的脚本引入页面头部、创建编辑器实例并通过内联或替换TEXTAREA方式展现编辑器，最后展示编辑器并提供额外的配置选项。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

The "JavaScript Integration Module" is the client side option to include FCKeditor in your web pages. It is quite easy to use and configure.

Step 1

Suppose that the editor is installed in the /FCKeditor/ path of your web site. The first thing to do is to include the "JavaScript Integration Module" scripts inside the <HEAD> of your page, just like this:

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

Step 2

Now the FCKeditor class is available and ready to use. There are two ways to create an FCKeditor in your page:

Method 1: The inline method (preferred): Go to the body of your page, to the place you want the editor to be (usually inside a form) and place the following script there:

<script type="text/javascript">
  var oFCKeditor = new FCKeditor('FCKeditor1');
  oFCKeditor.BasePath = "/FCKeditor/";
  oFCKeditor.Create();
</script>

Method 2: The TEXTAREA replacement method: In the "onload" method of your page, add the following code to replace an existing TEXTAREA in the page:

<html>
  <head>
    <script type="text/javascript" src="/FCKeditor/fckeditor.js"></script>
    <script type="text/javascript">
      window.onload = function()
      {
        var oFCKeditor = new FCKeditor( 'MyTextarea' ) ;
        oFCKeditor.BasePath = "/FCKeditor/" ;
        oFCKeditor.ReplaceTextarea() ;
      }
    </script>
  </head>
  <body>
    <textarea id="MyTextarea" name="MyTextarea">This is <b>the</b> initial value.</textarea>
  </body>
</html>

Step 3

The editor is now ready to be used. Just open the page in your browser to see it at work.

Other Usage Ways

You can ReplaceAllTextareas at once. This lets you leave your <textarea> code intact to support disabled browsers, and easily retrofit existing forms to use FCKeditor without lots of tweaking for each field.

The FCKeditor Class

This is the main class used to create an instance of FCKeditor in a web page.

Constructor

Properties

InstanceName

Width Height ToolbarSet Value BasePath CheckBrowser DisplayErrors Collections

Config

Methods

Create

ReplaceTextarea

Constructor

FCKeditor( instanceName[, width, height, toolbarSet, value] )

instanceName: the unique name that represents the editor instance. width: the width of the editor in pixels or percents. (Optional, Default: "100%"). height: the height of the editor in pixels or percents. (Optional, Default: "200"). toolbarSet: the name of the Toolbar set to use. (Optional, Default: "Default"). value: the initial value (HTML) of the editor. (Optional)

Example:

var oFCKeditor = new FCKeditor( 'FCKeditor1' ) ;

Properties

InstanceName

The name of the this editor instance.

Width

The width of the editor in pixels or percent. Numeric values are handled as pixels.

Default Value: "100%"

Examples:

oFCKeditor.Width = 400 ; // 400 pixels

oFCKeditor.Width = "250" ; // 250 pixels

oFCKeditor.Width = "80%" ; // 80 percent

Height

The height of the editor in pixels or percent. Numeric values are handled as pixels.

Default Value: "200"

Examples:

oFCKeditor.Height = 400 ; // 400 pixels

oFCKeditor.Height = "250" ; // 250 pixels

oFCKeditor.Height = "100%" ; // 100 percent

ToolbarSet

The Toolbar set to use. Refers to the configuration set in the fckconfig.js file.

Default Value: "Default"

Example:

oFCKeditor.ToolbarSet = "MyToolbar" ;

Value

The initial value (the HTML) to show in the editor at startup.

Default Value: <empty>

Example:

oFCKeditor.Value = "<h1>Testing</h1>This is a <b>sample</b>." ;

This value can not contain new line characters such as "/n" and "/r". So you need to strip them out before you assign a string to oFCKeditor.Value. You also have to escape each " with a /.

see below

oFCKeditor.Value = "The book is called /"The Last Minute/"" ;

BasePath

The path used by the editor to find its code base. In other words, the directory where the editor’s package has been installed in your site (the directory containing the editor directory and fckconfig.js, fckeditor.js, etc.).

Default Value: "/fckeditor/"

Example:

oFCKeditor.BasePath = "/Components/FCKeditor/" ;

Remarks: Avoid using relative paths. It is preferable to set the base path starting from the root (/). Always finish the path with a slash (/).

CheckBrowser

Tells this class instance to check the browser compatibility when rendering the editor.

Default Value: true

Example:

oFCKeditor.CheckBrowser = true ;

Remarks:

This option could be useful if the check was made at the server side.

DisplayErrors

Tells this class instance to show error messages on errors while rendering the editor.

Default Value: true

Example:

oFCKeditor.DisplayErrors = false ;

Collections

Config[ key ] = value

This collection holds all configuration settings set in the editor instance.

Example:

oFCKeditor.Config[ "AutoDetectLanguage" ] = false ;
oFCKeditor.Config[ "DefaultLanguage" ] = "pt-BR" ;

Methods

Create()

Builds and outputs the editor in the exact place where it's called.

Example:

oFCKeditor.Create() ;

ReplaceTextarea()

Replaces an existing <TEXTAREA> in the page with the FCKeditor instance. The Textarea must have its "id" set to the editor InstanceName. If the "id" is not found, the editor uses the TEXTAREA "name" for the replacement.

Example:

window.onload = function()
{
var oFCKeditor = new FCKeditor( 'MyTextarea ' ) ;
oFCKeditor.ReplaceTextarea() ;
}
...
<textarea id="MyTextarea" name= "MyTextarea">This is <b>the</b> initial value.</textarea>

If you intend to post the editor contents through a form (the most obvious use of the editor), you must set the "name" attribute of the TEXTAREA. It is useful, to not get confused, to use the same value as used for the "id" attribute.

转摘自网上，仅供学习