Using FCKeditor with JavaScript

來源:互聯網
上載者:User
Using FCKeditor with JavaScript

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 you page:

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

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

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

<html>
  <head>
    <script type="text/javascript">
      window.onload = function()
      {
        var oFCKeditor = new FCKeditor( 'MyTextarea' ) ;
        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.

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

Contructor

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 configurations set at 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>." ;

BasePath

The path used by the editor to find its code base. In other words, the directory where the editors package has been installed in your site.

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 configurations 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 its called.

Example:
oFCKeditor.Create() ;

ReplaceTextarea()

Replaces an existing <TEXTAREA> in the page with the FCKeditor instance. The Textarea must has its ID set to the editor InstanceName.

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

 

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.