Display FCKeditor HTML input on the same page as user types?
I am currently playing around with FCKEditor and I am trying to replicate how stack overflow shows how your post will look in HTML as you type it. My FCKEditor builds just fine, I just don't know how to access the editor data after it is created. I want to get html from editor and then put it in <p id="inputText"></p>
. Trying to access it with jQuery using $ ("# fckEdtr") doesn't work, which is what I expect, because it's created on the fly with javascript. I know the IsDirty () method in the FCKeditor JavaScript API, I just haven't seen solid examples of how to get the current editor instance and use this method. Can anyone please 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>
a source to share
I just found the answer to this question in another question on SO:
How to enable Live preview for FCKeditor on 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>
a source to share
It's good you found the answer already, but I'm wondering why you need a preview window when you're dealing with a WYSIWYG editor. I am guessing that the look you get in the editor is different from what you get, due to the CSS being applied to the latter. If I am wrong, ignore the following tip.
If so, you might want to consider copying the most important parts of your CSS into \ fckeditor \ editor \ css \ fck_editorarea.css so that they are applied in the editor window. Of course, sometimes you want a difference. For example, spoilers should be hidden when published, but visible in the editor.
a source to share