Question

以前，用户会从下拉列表中选择要更新的页面。 javascript onchange事件会导致textarea填充数据库中的相应内容。我现在用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">&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>

Answer 1

使用CKEDITOR的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

1 个答案: