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