Question

我目前正在玩FCKEditor，我正在尝试复制堆栈溢出如何在您输入时准确显示您的帖子在HTML中的外观。我的FCKEditor创建得很好，我只是不知道如何在创建后访问编辑器数据。我想要做的是从编辑器中获取html，然后将其放入<p id="inputText"></p>。尝试使用$（“＃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>

Answer 1

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

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

此外，当我使用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>

Answer 2

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

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

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

2 个答案: