views:

2038

answers:

2

I am currently playing around with the FCKEditor, and I am trying to replicate how stack overflow shows exactly how your post will look in HTML as you type it up. My FCKEditor creates just fine, I just don't know how to go about accessing the editor data once it is created. What I want to do is get the html from the editor and then put it into the <p id="inputText"></p>. Trying to access it with jQuery using $("#fckEdtr") doesn't work, which I expect is because it's created on the fly with javascript. I am aware of the IsDirty() method in the FCKeditor JavaScript API, I just haven't seen any solid examples of how to get the current instance of the editor and use the method. Can anyone help? My code is below:

<html>
<head>
<title>FCKeditor Test</title>
<script type="text/javascript" src="fckeditor/fckeditor.js"></script>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript"> 
    $(document).ready(function() {
          ...code to output editor data as user types
    }); 
</script>
</head>
<body>
<form>
<script type="text/javascript">
    var oFCKeditor = new FCKeditor('fckEdtr');
    oFCKeditor.BasePath = "./fckeditor/";
    oFCKeditor.ToolbarSet = 'Default';
    oFCKeditor.Create();
</script><br/><br/>
<input type="submit" value="Post" />
<p id="inputText">
</p>
</form>
</body>
</html>
+1  A: 

I just found the answer to this in another question on SO:

http://stackoverflow.com/questions/293854/how-can-i-enable-live-preview-for-fckeditor-in-an-asp-net-site

Also, when I use a div element instead of a paragraph element, it works. Here's my final working code for anyone it might help:

<html>
<head>
<title>FCKeditor - Sample</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="fckeditor/fckeditor.js"></script>
<script type="text/javascript">   
    function FCKeditor_OnComplete( oFCKeditor )
    {  
         oFCKeditor.Events.AttachEvent( 'OnSelectionChange', function() {        
              document.getElementById("postText").innerHTML = 
                    oFCKeditor.GetHTML(true); 
         }) ;
    }
</script>
</head>
<body>
<form method="post" action="process.php">
<script type="text/javascript">
    var oFCKeditor = new FCKeditor('fckEdtr');
    oFCKeditor.BasePath = "./fckeditor/";
    oFCKeditor.ToolbarSet = 'Custom' ;
    oFCKeditor.Create();
</script><br/><br/>
<input type="submit" value="Post" />
<div id="postText">
</div>
</form>
</body>
</html>
ryanulit
+1  A: 

It's good that you found the answer already, but I wonder why do you need preview window when you are dealing with WYSIWYG editor. My guess is that the look you are getting in the editor is different from the resulting look because of CSS applied to the latter. If I am wrong, disregard the advice that follows.

If that is the case, you may think of copying the most relevant parts of your CSS to \fckeditor\editor\css\fck_editorarea.css so that they are applied in the editor window. Of course, sometimes you do want the difference. For example, spoilers should be hidden when posted but visible in the editor.

buti-oxa
I guess I never really thought about that. The editor area does in fact look the same as it looked on the page, haha. Thanks for the insight.
ryanulit