以前，用户可以从下拉选项中选择要更新的页面。 javascript onchange 事件将导致文本区域填充数据库中的相应内容。我现在已经用 CKEDITOR 替换了文本区域，并且 javascript 现在不再填充 CKEDITOR，除非我刷新页面。
当从下拉列表中进行选择时，如何使 CKEDITOR 自动刷新，从而填充数据库中的内容？
<?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"> </td>
<td height="32" colspan="2" align="left"><h1> Update Page </h1></td>
</tr>
<tr>
<td width="60" align="left"> </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"> </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"> </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"> </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> </td>
<td> </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自动刷新，这样用户就不必手动刷新。
最佳答案
您可以使用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]);
}
关于javascript - 获取下拉选择时显示的 CKEDITOR 内容，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35987766/