FCKeditor 2.x/Developers Guide/Integration/JavaScript - Revision history

W.olchawa at 11:29, 8 January 2008

2008-01-08T11:29:16Z

W.olchawa at 11:28, 8 January 2008

2008-01-08T11:28:58Z

W.olchawa at 11:28, 8 January 2008

2008-01-08T11:28:36Z

W.olchawa at 11:28, 8 January 2008

2008-01-08T11:28:17Z

W.olchawa at 11:27, 8 January 2008

2008-01-08T11:27:22Z

W.olchawa: New page: The "JavaScript Integration Module" is the client side option to include FCKeditor in your web pages.It is quite easy to use and configure. Just follow these steps. == Configuring step by...

2008-01-08T11:06:00Z

New page: The "JavaScript Integration Module" is the client side option to include FCKeditor in your web pages.It is quite easy to use and configure. Just follow these steps. == Configuring step by...

New page

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

== Configuring step by step ==

=== Step 1 ===

The first thing to do is to include the "JavaScript Integration Module" scripts inside the <HEAD> of your page, just like this:
<pre><script type="text/javascript" src="fckeditor/fckeditor.js"></script>
</pre>
=== Step 2 ===

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

==== Methode 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:
<pre><script type="text/javascript">
var oFCKeditor = new FCKeditor('FCKeditor1');
oFCKeditor.BasePath = "fckeditor/";
oFCKeditor.Create();
</script>
</pre>
==== Methode 2 ====

'''The TEXTAREA replacement method''':

* In <HEAD> add the "onload" method:
<pre><script type="text/javascript">
window.onload = function()
{
var oFCKeditor = new FCKeditor( 'MyTextarea' ) ;
oFCKeditor.BasePath = "fckeditor/" ;
oFCKeditor.ReplaceTextarea() ;
}
</script>
</pre>
* In <BODY> add the below code to replace an existing TEXTAREA in the page:
<pre><textarea id="MyTextarea" name="MyTextarea">This is <b>the</b> initial value.</textarea>
</pre>
==== Methode 3 ====

'''The CreateHtml() method (for AJAX)''': For an AJAX application, you'll be setting the inner html dynamically; for example:
<pre>var div = document.getElementById("myFCKeditor");
var fck = new FCKeditor("myFCKeditor");
div.innerHTML = fck.CreateHtml();
</pre>
=== Sample code ===

==== Sample code 1 ====
<pre><html>
<head>
<title>FCKeditor - Sample</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="robots" content="noindex, nofollow">
<script type="text/javascript" src="fckeditor/fckeditor.js"></script>
</head>
<body>
<form>
<script type="text/javascript">
var oFCKeditor = new FCKeditor('FCKeditor1');
oFCKeditor.BasePath = "FCKeditor/";
oFCKeditor.Create();
</script>
</form>
</body>
</html>
</pre>
==== Sample code 2 ====
<pre><html>
<head>
<title>FCKeditor - Sample</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="robots" content="noindex, nofollow">
<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>
</pre>

@@ Line 80: / Line 80: @@
+{
 var oFCKeditor = new FCKeditor( 'MyTextarea' )&nbsp;;
-oFCKeditor.BasePath = "fckeditor/"&nbsp;;
+oFCKeditor.BasePath = "/fckeditor/"&nbsp;;
 oFCKeditor.ReplaceTextarea()&nbsp;;
+}

@@ Line 12: / Line 12: @@
 Now the FCKeditor class is available and ready to use. There are three ways to create an FCKeditor in your page:
-==== Methode 1 ====
+==== 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:
@@ Line 21: / Line 21: @@
 &lt;/script&gt;
 </pre>
-==== Methode 2 ====
+==== Method 2 ====
 '''The TEXTAREA replacement method''':
@@ Line 38: / Line 38: @@
 <pre>&lt;textarea id="MyTextarea" name="MyTextarea"&gt;This is &lt;b&gt;the&lt;/b&gt; initial value.&lt;/textarea&gt;
 </pre>
-==== Methode 3 ====
+==== Method 3 ====
 '''The CreateHtml() method (for AJAX)''': For an AJAX application, you'll be setting the inner html dynamically; for example:

@@ Line 61: / Line 61: @@
 &lt;script type="text/javascript"&gt;
 var oFCKeditor = new FCKeditor('FCKeditor1');
-oFCKeditor.BasePath = "FCKeditor/";
+oFCKeditor.BasePath = "/fckeditor/";
 oFCKeditor.Create();
 &lt;/script&gt;
@@ Line 67: / Line 67: @@
 &lt;/body&gt;
 &lt;/html&gt;
 </pre>
 ==== Sample code 2 ====
 <pre>&lt;html&gt;