JavaScript

This website contains links to software which is either no longer maintained or will be supported only until the end of 2019 (CKFinder 2). For the latest documentation about current CKSource projects, including software like CKEditor 4/CKEditor 5, CKFinder 3, Cloud Services, Letters, Accessibility Checker, please visit the new documentation website.

If you look for an information about very old versions of CKEditor, FCKeditor and CKFinder check also the CKEditor forum, which was closed in 2015. If not, please head to StackOverflow for support.

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:

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:

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

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

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