在进行下拉选择时获取 CKEDITOR 的内容以显示

Question

以前，用户会 select 从下拉菜单 select 更新一个页面。 javascript onchange 事件会导致文本区域填充数据库中的相应内容。我现在已经用 CKEDITOR 替换了文本区域并且 javascript 现在不再填充 CKEDITOR，除非我刷新页面。

如何让 CKEDITOR 自动刷新，从而在从下拉列表生成 selection 时填充数据库中的内容？

<?php 
if(!isset($_SESSION['user']))
{
 header("Location: login.php");
}  
//$vbCrLf = chr(13).chr(10);
$vbCrLf = "";

require ('mysqli.php');

//create and execute query
$query = 'SELECT PageId, PageTitle, PageContent, PageContent2 FROM pages ORDER BY PageId';
$result = $conn->query($query);
//create selection list
$DropDownList = "<select name='PageId' id='PageId' onchange='SelectChanged();'> ".$vbCrLf;
//Code below may need to be deleted
$DropDownList .= "<option value=''>--SELECT PAGE--</option> ".$vbCrLf;
// as it could give an error

while($row = mysqli_fetch_row($result))
{
    $heading = htmlentities($row[0]);
    $DropDownList .= "<option value='$heading'>".json_encode($row[1])."</option> ".$vbCrLf;
    $PageTitlePhp .= 'PageTitleArray['.$heading.']='.json_encode($row[1]).';'.$vbCrLf;
    $PageContentPhp .= 'PageContentArray['.$heading.']='.json_encode($row[2]).';'.$vbCrLf;
    $PageContent2Php .= 'PageContent2Array['.$heading.']='.json_encode($row[3]).';'.$vbCrLf;
}

$DropDownList .= "</select> ".$vbCrLf;
$conn->close();
?>

<html>
<head>
<title>Update Page</title>


<script src="//cdn.ckeditor.com/4.5.7/standard/ckeditor.js"></script>
</head>

<body>


<br>
<!-- php below; Creates a form to update database content -->
<form  method="post"  action="update_website_page_handle.php">
<table width="943" height="528">
<tr>
<td align="right">&nbsp;</td>
<td height="32" colspan="2" align="left"><h1> Update Page </h1></td>
</tr>
<tr>
<td width="60" align="left">&nbsp;</td>
<td width="134" height="32" align="left"><p>Select Page ID:</p></td>
<td width="733">
    <?php echo $DropDownList; ?>
</td>
</tr>
<tr>
<td align="left" valign="top">&nbsp;</td>
<td align="left" valign="top"><p>Page Title:</p></td>
<td><textarea style="width: 500px; height: 50px;" name="PageTitle" id="PageTitle" class="heading"></textarea></td>
</tr>
<tr>
<td align="left" valign="top">&nbsp;</td>
<td align="left" valign="top"><p>Page Content:</p></td>
<td>
  <textarea style="width: 500px; height: 200px;" name="PageContent" id="PageContent" class="date"></textarea>

                    <script>
                    CKEDITOR.replace( 'PageContent' );
                    </script>   

</td>
</tr>
<tr>
<td align="left" valign="top">&nbsp;</td>
<td align="left" valign="top"><p>Extra Page Content:</p></td>
<td>
        <textarea style="width: 500px; height: 200px;" name="PageContent2" id="PageContent2" class="details"></textarea>

                <script>
                CKEDITOR.replace('PageContent2');               
                </script>

</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>
  <input name="update" type="submit"  id="update" value="Update">
</td>
</tr>
</table>
</form>
<script language="Javascript" type="text/javascript">
var PageTitleArray = new Array();
<?php echo $PageTitlePhp; ?>
var PageContentArray = new Array();
<?php echo $PageContentPhp; ?>
var PageContent2Array = new Array();
<?php echo $PageContent2Php; ?>
function SelectChanged()
{
    var PageId = document.getElementById('PageId').value;
    document.getElementById('PageTitle').value = PageTitleArray[PageId];
    document.getElementById('PageContent').value = PageContentArray[PageId];
    document.getElementById('PageContent2').value = PageContent2Array[PageId];
}
SelectChanged(); // added to execute the function after loading to select first value.
</script>
</body>
</html>

您可以在下图中看到我必须刷新页面之前表单的样子，以及刷新页面之后的样子。目的是让 ckeditor 自动刷新，这样用户就不必手动刷新。

Answer 1

您可以使用 CKEDITOR's API，它有一个 setData 方法将内容放入先前初始化的编辑器中：

function SelectChanged()
{
    var PageId = document.getElementById('PageId').value;
    document.getElementById('PageTitle').value = PageTitleArray[PageId];
    CKEDITOR.instances["PageContent"].setData(PageContentArray[PageId]);
    CKEDITOR.instances["PageContent2"].setData(PageContent2Array[PageId]);
}

在进行下拉选择时获取 CKEDITOR 的内容以显示

Get contents of CKEDITOR to appear when dropdown selection is made

html

javascript

php

jquery

ckeditor