|
From: Joe S. <joe...@us...> - 2004-10-28 20:17:49
|
Update of /cvsroot/phpslash/phpslash-dev/public_html/scripts/fckeditor/_documentation/Using FCKeditor In directory sc8-pr-cvs1.sourceforge.net:/tmp/cvs-serv16237/phpslash-dev/public_html/scripts/fckeditor/_documentation/Using FCKeditor Added Files: Javascript.html Log Message: added fckeditor to comment submittal. --- NEW FILE: FCKeditor Javascript.html --- <!-- * FCKeditor - The text editor for internet * Copyright (C) 2003-2004 Frederico Caldeira Knabben * * Licensed under the terms of the GNU Lesser General Public License: * http://www.opensource.org/licenses/lgpl-license.php * * For further information visit: * http://www.fckeditor.net/ * * Version: 2.0 Beta 1 * Modified: 2004-05-28 18:27:57 --> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <title>FCKeditor - Using FCKeditor with JavaScript</title> <meta content="http://schemas.microsoft.com/intellisense/ie5" name="vs_targetSchema"> <meta content="Microsoft Visual Studio .NET 7.1" name="GENERATOR"> <meta content="VisualStudio.HTML" name="ProgId"> <meta content="Microsoft Visual Studio .NET 7.1" name="Originator"> <LINK href="../fck_docs.css" type="text/css" rel="stylesheet"> </head> <body> <H1>Using FCKeditor with JavaScript</H1> <P>The "JavaScript Integration Module" is the client side option to include FCKeditor in your web pages. It is quite easy to use and configure.</P> <H3>Step 1</H3> <P>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:</P> <code><script type="text/javascript" src="<STRONG>/FCKeditor/fckeditor.js</STRONG>"></script></code> <H3>Step 2</H3> <P>Now the FCKeditor class is available and ready to use. There are two ways to create an FCKeditor in you page:</P> <P>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:</P> <code><script type="text/javascript"><BR> <STRONG> var oFCKeditor = new FCKeditor( 'FCKeditor1' ) ;<BR> oFCKeditor.Create() ;<BR> </STRONG></script></code> <P>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:</P> <code><html><BR> <head><BR> <script type="text/javascript"><BR> window.onload = function()<BR> {<BR> <STRONG>var oFCKeditor = new FCKeditor( 'MyTextarea' ) ;<BR> oFCKeditor.ReplaceTextarea() ;<BR> </STRONG> }<BR> </script><BR> </head><BR> <body><BR> <textarea id="<STRONG>MyTextarea</STRONG>" name="MyTextarea">This is <b>the</b> initial value.</textarea><BR> </body><BR> </html></code> <H3>Step 3</H3> <P>The editor is now ready to be used. Just open the page in your browser to see it at work.</P> <H2>The FCKeditor Class</H2> <P>This is the main class used to create an instance of FCKeditor in a web page.</P> <div class="classDefinition"> <P><A href="#Constructor">Constructor</A></P> <P><A href="#Properties">Properties</A></P> <BLOCKQUOTE dir="ltr" style="MARGIN-RIGHT: 0px"> <P><A href="#pInstanceName">InstanceName</A><BR> <A href="#pWidth">Width</A> <BR> <A href="#pHeight">Height</A> <BR> <A href="#pToolbarSet">ToolbarSet</A> <BR> <A href="#pValue">Value</A> <BR> <A href="#pBasePath">BasePath</A> <BR> <A href="#pCheckBrowser">CheckBrowser</A> <BR> <A href="#pDisplayErrors">DisplayErrors</A></P> </BLOCKQUOTE> <P><A href="#Collections">Collections</A></P> <BLOCKQUOTE dir="ltr" style="MARGIN-RIGHT: 0px"> <P><A href="#cConfig">Config</A></P> </BLOCKQUOTE> <P><A href="#Methods">Methods</A></P> <BLOCKQUOTE dir="ltr" style="MARGIN-RIGHT: 0px"> <P><A href="#mCreate">Create</A><BR> <A href="#mReplaceTextarea">ReplaceTextarea</A></P> </BLOCKQUOTE> </div> <H3 id="Constructor">Contructor</H3> <P class="classPropMeth">FCKeditor( instanceName[, width, height, toolbarSet, value] )</P> <P> <TABLE class="paramsDefinition" id="Table1" cellSpacing="0" cellPadding="0" border="0"> <TR> <TD>instanceName </TD> <TD>The unique name that represents the editor instance.</TD> </TR> <TR> <TD>width</TD> <TD>the width of the editor in pixels or percents. (Optional, Default: "100%").</TD> </TR> <TR> <TD>height</TD> <TD>the height of the editor in pixels or percents. (Optional, Default: "200").</TD> </TR> <TR> <TD>toolbarSet</TD> <TD>the name of the Toolbar set to use. (Optional, Default: "Default").</TD> </TR> <TR> <TD>value</TD> <TD>the initial value (HTML) of the editor. (Optional)</TD> </TR> </TABLE> </P> <P>Example:</P> <code>var oFCKeditor = new <STRONG>FCKeditor( 'FCKeditor1' )</STRONG> ;</code> <H3 id="Properties">Properties</H3> <P class="classPropMeth" id="pInstanceName">InstanceName</P> <P>The name of the this editor instance.</P> <P class="classPropMeth" id="pWidth">Width</P> <P>The width of the editor in pixels or percent. Numeric values are handled as pixels.</P> <P>Default Value: "100%"</P> <P>Examples:<BR> <code>oFCKeditor.<STRONG>Width</STRONG> = 400 ; // 400 pixels</code> <code>oFCKeditor.<STRONG>Width</STRONG> = "250" ; // 250 pixels</code> <code>oFCKeditor.<STRONG>Width</STRONG> = "80%" ; // 80 percent</code> </P> <P class="classPropMeth" id="pHeight">Height</P> <P>The height of the editor in pixels or percent. Numeric values are handled as pixels.</P> <P>Default Value: "200"</P> <P>Examples:<BR> <code>oFCKeditor.<STRONG>Height</STRONG> = 400 ; // 400 pixels</code> <code>oFCKeditor.<STRONG>Height</STRONG> = "250" ; // 250 pixels</code> <code>oFCKeditor.<STRONG>Height</STRONG> = "100%" ; // 100 percent</code> </P> <P class="classPropMeth" id="pToolbarSet"> ToolbarSet</P> <P>The Toolbar set to use. Refers to the configurations set at the fckconfig.js file.</P> <P>Default Value: "Default"</P> <P>Example:<BR> <code>oFCKeditor.<STRONG>ToolbarSet</STRONG> = "MyToolbar" ;</code></P> <P class="classPropMeth" id="pValue">Value</P> <P>The initial value (the HTML) to show in the editor at startup.</P> <P>Default Value: <empty></P> <P>Example:<BR> <code>oFCKeditor.<STRONG>Value</STRONG> = "<h1>Testing</h1>This is a <b>sample</b>." ;</code></P> <P class="classPropMeth" id="pBasePath"> BasePath</P> <P>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.</P> <P>Default Value: "/fckeditor/"</P> <P>Example:<BR> <code>oFCKeditor.<STRONG>BasePath</STRONG> = "/Components/FCKeditor/" ;</code></P> <P>Remarks:<BR> Avoid using relative paths. It is preferable to set the base path starting from the root (/). Always finish the path with a slash (/).</P> <P class="classPropMeth" id="pCheckBrowser"> CheckBrowser</P> <P>Tells this class instance to check the browser compatibility when rendering the editor.</P> <P>Default Value: true</P> <P>Example:<BR> <code>oFCKeditor.<STRONG>CheckBrowser</STRONG> = true ;</code></P> <P>Remarks:<BR> This option could be useful if the check was made at the server side.</P> <P class="classPropMeth" id="pDisplayErrors"> DisplayErrors</P> <P>Tells this class instance to show error messages on errors while rendering the editor.</P> <P>Default Value: true</P> <P>Example:<BR> oFCKeditor.<STRONG>DisplayErrors</STRONG> = false ;</CODE></P> <H3 id="Collections">Collections</H3> <P class="classPropMeth" id="cConfig">Config[ key ] = value</P> <P>This collection holds all configurations set in the editor instance.</P> <P>Example:<br> <code>oFCKeditor.<STRONG>Config[ "AutoDetectLanguage" ]</STRONG> = false ;<BR> oFCKeditor.<STRONG>Config[ "DefaultLanguage" ]</STRONG> = "pt-BR" ;</code></P> <H3 id="Methods">Methods</H3> <P class="classPropMeth" id="mCreate"> Create()</P> <P>Builds and outputs the editor in the exact place where its called.</P> <P>Example:<BR> <code>oFCKeditor.<STRONG>Create()</STRONG> ;</code></P> <P class="classPropMeth" id="mReplaceTextarea"> ReplaceTextarea()</P> <P>Replaces an existing <TEXTAREA> in the page with the FCKeditor instance. The Textarea must has its ID set to the editor InstanceName.</P> <P>Example:<BR> <code>window.onload = function()<BR> {<BR> var oFCKeditor = new FCKeditor( '<STRONG>MyTextarea</STRONG> ' ) ;<BR> oFCKeditor.<STRONG>ReplaceTextarea()</STRONG> ;<BR> }<BR> ...<BR> <textarea id="<STRONG>MyTextarea</STRONG>" name=" MyTextarea">This is <b>the</b> initial value.</textarea></code> </P> </body> </html> |
