在用户类型的同一页面上以HTML格式显示FCKeditor输入数据？

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:

我目前正在玩FCKEditor,我正在尝试复制堆栈溢出如何在您输入时准确显示您的帖子在HTML中的外观。我的FCKEditor创建得很好,我只是不知道如何在创建后访问编辑器数据。我想要做的是从编辑器中获取html,然后将其放入

。尝试使用$(“#fckEdtr”)使用jQuery访问它不起作用,我期望这是因为它是使用javascript动态创建的。我知道FCKeditor JavaScript API中的IsDirty()方法,我还没有看到任何有关如何获取编辑器的当前实例并使用该方法的可靠示例。有人可以帮忙吗?我的代码如下:

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

2 个解决方案

#1

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

我刚刚在SO的另一个问题上找到了答案:

How can I enable live preview for FCKeditor in an ASP.Net site?

如何在ASP.Net站点中为FCKeditor启用实时预览?

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:

此外,当我使用div元素而不是段落元素时,它的工作原理。这是我可能帮助的任何人的最终工作代码:

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

#2

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.

你已经找到了答案,这很好,但我想知道为什么你在处理WYSIWYG编辑器时需要预览窗口。我的猜测是,你在编辑器中得到的外观与产生的外观不同,因为CSS应用于后者。如果我错了,请忽略后面的建议。

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.

如果是这种情况,您可以考虑将CSS的最相关部分复制到\ fckeditor \ editor \ css \ fck_editorarea.css,以便在编辑器窗口中应用它们。当然,有时候你确实想要与众不同。例如,破坏者应该在发布时隐藏,但在编辑器中可见。

#1