无法从ckeditor jquery插件中检索数据

时间:2012-10-26 21:04:29

标签: php javascript jquery html ckeditor

我花了最后几个小时试图简单地将在ckeditor(textarea)中输入的数据(text / html)发布到PHP文件中。

他们的API声称数据会自动在表单提交上发布数据,但它没有,它什么都不返回。

编辑:这是真正的代码:

    <?php
    require("fns.php");
    // grab tab content from database
    $tab = array();
    $query ="SELECT * FROM tabs";
    $db_conn = db_connect();
    $results = mysql_query($query,$db_conn);
    while($row = mysql_fetch_array($results))
    {
    $tab[]= $row;
    }

// form validation
if($_POST['btnSave'])
{
    // grab selected tab ID
    $tabId = $_POST['tabId'];
    $title = $_POST['txtTitle'];
    $content = $_POST['ckeditor'];


    // all fields required
    if(isset($tabId) && isset($title) && isset($content))
    {   
        // update recorde where id = tabId
        $query = "UPDATE tabs SET title = '$title', content = '$content' WHERE id = $tabId";
        if($content !== "")
        {
            if(mysql_query($query,$db_conn))
            {
                $message = "<h3 style='color:#003300;'>Changes Saved!</h3><br /><p>".$content."</p>";
                header("Location:testtabs.php");
            }
        }
        else
        {
            $message ="<h3 style='color: #950000;'>Content cannot be blank!</h3>";
        }
    }
}

&GT;

    <!-- in head section -->
      <script type="text/javascript">  
    $(document).ready(function() {
    // inflate ckeditor
    $('#ckeditor').ckeditor();
    //track selected tab
    var currentId = -1; 
        // Tab initialization
        var $tabs = $('#tabs').tabs({
         select: function(event, ui){
        /*
        ui.index: zero based index selected tab 
        ui.tab: anchor element of the selected tab
        ui.panel: element containing the content for the selected tab
        */

        // get current tab ID for php script
        var currentId = ui.index + 1;
        $("#tabId").val(currentId);
        var tabName = $(ui.tab).text();
        var content = $(ui.panel).html();
        // swap title
        $( '#title' ).val( tabName );
        // swap content
        $("#ckeditor").val(content);
    }   
});

});

    <body>
    <?php  echo $message; ?>
<div id="tabs">
    <ul>
        <li><a href="#tabs-1"><?php echo $tab[0]['title'];?></a></li>
        <li><a href="#tabs-2"><?php echo $tab[1]['title'];?></a></li>
        <li><a href="#tabs-3"><?php echo $tab[2]['title'];?></a></li>
    </ul>
    <div id="tabs-1">
        <div class="content"> 
               <?php echo $tab[0]['content'];  ?>
        </div>
    </div>
    <div id="tabs-2">
        <div class="content"> 
               <?php echo $tab[1]['content'];  ?>
        </div>
    </div>
    <div id="tabs-3">
        <div class="content"> 
               <?php echo $tab[2]['content'];  ?>
        </div>
    </div>
</div>

<?php 
    if (isset($_SESSION['valid_user']) && ($_SESSION['account_type'] == 'ADMIN')) 
    {
        // display editor with tab 1 content
        ?>
        <table id="tab-editor">
            <form action = 'testtabs.php' method ='post'>
            <input type="hidden" id="tabId" name ="tabId" value="-1"/>
                <tr><td>Title: <input type='text' name='txtTitle' id='title' value='<?php echo $tab[0]['title'];?>'/></td></tr>
                <tr><td>Tab Content:</td></tr><tr><td> <textarea name='ckeditor' id='ckeditor' class='tab-editor'><?php //echo $tab[0]['content'];?></textarea></td></tr>
                <tr><td><input type='submit' name='btnSave' value='Save Changes' /></td>
            </form>
        </table>
        <?php
    }
    ?>

2 个答案:

答案 0 :(得分:0)

CKEditor使用textarea的内容来填充编辑器,从textarea(甚至可能来自其他元素,我不知道)创建CKEditor的istance。 无论如何,当你使用jQuery时:

$('#ckeditor').val("Initial text (test)");

您将文本放在textarea标记内。 创建CKEditor实例后,您需要使用CKEditor方法来获取数据: http://docs.cksource.com/ckeditor_api/

具体来说,我认为你需要:

http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.editor.html#getData

PS:抱歉我的英文不好

编辑:没看过编辑,对不起

答案 1 :(得分:0)

恢复到传统的ckeditor javascript,现在工作正常......

    CKEDITOR.replace( 'ckeditor' );
    // Tab initialization
// Tab initialization
var $tabs = $('#tabs').tabs({
    select: function(event, ui){
        /*
        ui.index: zero based index selected tab 
        ui.tab: anchor element of the selected tab
        ui.panel: element containing the content for the selected tab
        */

        // get current tab ID for php script
        var currentId = ui.index + 1;
        $("#tabId").val(currentId);
        var tabName = $(ui.tab).text();
        var content = $(ui.panel).html();
        // swap title
        $( '#title' ).val( tabName );
        // swap content
        CKEDITOR.instances['ckeditor'].setData(content);

    }   
});