javascript - 当用户输入时,在同一页面上以 HTML 格式显示 FCKeditor 输入数据?

标签 javascript jquery fckeditor

我目前正在使用 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>

最佳答案

我刚刚在 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>

关于javascript - 当用户输入时,在同一页面上以 HTML 格式显示 FCKeditor 输入数据?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/830579/

相关文章:

javascript - 使用动画将一系列 div 向左移动

javascript - 尝试在 for 循环 jquery 中使用 inner.HTML 生成一个 div

jquery - 如何从markerclustererplus获取点击事件

javascript - 禁用右键单击特定 <div> 或类 =""

javascript - 基于下拉列表在 Canvas 上进行缓动的动画圆圈

jquery - 使用 .each() 迭代 HTML5 <figure> 和 <figcaption> 的选择

javascript - 如何根据用户选择获取 JSON 中的子值

javascript - 咕噜声 : abstracting away some tasks

asp.net-mvc - 带有 Ckeditor 的 MVC2 应用程序“具有潜在危险的 Request.Form

jquery - 如何将 CKEditor 集成到 Asp.net MVC 中