CKSource

Latest revision as of 13:29, 8 January 2008

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:

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

Step 2

Now the FCKeditor class is available and ready to use. There are three 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 <HEAD> add the "onload" method:

<script type="text/javascript">
window.onload = function()
{
var oFCKeditor = new FCKeditor( 'MyTextarea' ) ;
oFCKeditor.BasePath = "/fckeditor/" ;
oFCKeditor.ReplaceTextarea() ;
}
</script>

In <BODY> add the below code to replace an existing TEXTAREA in the page:

<textarea id="MyTextarea" name="MyTextarea">This is <b>the</b> initial value.</textarea>

Method 3

The CreateHtml() method (for AJAX): For an AJAX application, you'll be setting the inner html dynamically; for example:

var div = document.getElementById("myFCKeditor");
var fck = new FCKeditor("myFCKeditor");
div.innerHTML = fck.CreateHtml();

Sample code

Sample code 1

<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>

Sample code 2

<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>

@@ Line 17: / Line 17: @@
 <pre>&lt;script type="text/javascript"&gt;
 var oFCKeditor = new FCKeditor('FCKeditor1');
-oFCKeditor.BasePath = "fckeditor/";
+oFCKeditor.BasePath = "/fckeditor/";
 oFCKeditor.Create();
 &lt;/script&gt;
 </pre>
 ==== Method 2 ====
@@ Line 30: / Line 31: @@
 {
 var oFCKeditor = new FCKeditor( 'MyTextarea' )&nbsp;;
-oFCKeditor.BasePath = "fckeditor/"&nbsp;;
+oFCKeditor.BasePath = "/fckeditor/"&nbsp;;
 oFCKeditor.ReplaceTextarea()&nbsp;;
 }
@@ Line 37: / Line 38: @@
 * In &lt;BODY&gt; add the below code to replace an existing TEXTAREA in the page:
 <pre>&lt;textarea id="MyTextarea" name="MyTextarea"&gt;This is &lt;b&gt;the&lt;/b&gt; initial value.&lt;/textarea&gt;
 </pre>
 ==== Method 3 ====
@@ Line 59: / 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 65: / Line 67: @@
 &lt;/body&gt;
 &lt;/html&gt;
 </pre>
 ==== Sample code 2 ====
 <pre>&lt;html&gt;
@@ Line 77: / Line 80: @@
 {
 var oFCKeditor = new FCKeditor( 'MyTextarea' )&nbsp;;
-oFCKeditor.BasePath = "fckeditor/"&nbsp;;
+oFCKeditor.BasePath = "/fckeditor/"&nbsp;;
 oFCKeditor.ReplaceTextarea()&nbsp;;
 }