Search code examples
hiddenfckeditor

fckeditor does not show the textarea

I am doing admin panel for my project, but the textarea, edited with FCKEDITOR doesn't show.

I get the following source:

<input type="hidden" id="text" name="text" value="here shows the text itself....." style="display:none" />
<input type="hidden" id="text___Config" value="" style="display:none" />
<iframe id="text___Frame" src="fckeditor/editor/fckeditor.html?InstanceName=text&amp;Toolbar=Default" width="890" height="600" frameborder="0" scrolling="no">
</iframe><br>
Solution

  • Integrate FCKEditor

    Step 1
    The first thing to do is to include the "JavaScript Integration Module" scripts inside the 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 add the "onload" method:

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

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

    Source site