Question

我正在使用ckeditor来编辑屏幕上显示的文字。信息从数据库中获取并以div元素写入屏幕，可以通过双击编辑信息。但是，经过编辑后，我无法获得编辑过的信息。这是我的代码，我试图添加一个包含div元素的表单，但它不起作用。

<form  method="post">
                            <p>
                                Double-click any of the following <code>&lt;div&gt;</code> elements to transform them into
                                editor instances.</p>

                            <?php 
                                $makeleSql = 'SELECT * FROM makale';
                                $makaleRs = $con->func_query($makeleSql);
                                while ($makaleRow = mysql_fetch_array($makaleRs)) {
                                ?>
                                    <div class = "editable" id = <?php echo "content".$makaleRow['id'];?> style="display:none">
                                    <?php
                                        $contentSql = 'SELECT * FROM content WHERE makale_id ='.$makaleRow['id'];
                                        $contentRs = $con->func_query($contentSql);
                                        while ($contentRow = mysql_fetch_array($contentRs)) {
                                            echo $contentRow['icerik'].$makaleRow['id'];
                                        }
                                    ?>
                                    </div>

                            <?php } 
                            ?>
                            <button type="submit" value="Submit" onclick="getDiv();"/>

                        </form>

我应该怎么做才能获取div元素中的信息？而且，我正在使用这个例子。 http://nightly.ckeditor.com/7484/_samples/divreplace.html

感谢。

Answer 1

对于保存表单的数据，您需要在input / select / textarea中存储信息。不存储Div和其他非形式的元素。

您必须将数据存储在隐藏字段中：

<form  method="post">
    <p>
        Double-click any of the following <code>&lt;div&gt;</code> elements to transform them into
        editor instances.</p>

    <?php 
        $makeleSql = 'SELECT * FROM makale';
        $makaleRs = $con->func_query($makeleSql);
        while ($makaleRow = mysql_fetch_array($makaleRs)) {
        ?>
            <div class="editable" id="<?php echo "content".$makaleRow['id'];?>">
            <?php
                $contentSql = 'SELECT * FROM content WHERE makale_id ='.$makaleRow['id'];
                $contentRs = $con->func_query($contentSql);
                while ($contentRow = mysql_fetch_array($contentRs)) {
                    echo $contentRow['icerik'].$makaleRow['id'];
                    // store original text
                    echo '<input type="hidden" name="'.$makaleRow['id'].'" value="'.htmlspecialchars($contentRow['icerik'].$makaleRow['id']).'">;
                }
            ?>
            </div>

    <?php } 
    ?>
    <button type="submit" value="Submit" onclick="getDiv(this);"/>

</form>
<script>
var getDiv = function(btn) {
  for(var el in btn.form.elements) {
    var d = document.getElementById(btn.form.elements[el].name);
    btn.form.elements[el].value = d.innerHTML;
  }
  return true;
}
</script>

Answer 2

通常将<input type="hidden">添加到具有<div>属性的任何addToForm，将内容复制到其中（请参阅下面的注释）：

<form method="post" id="f">
<div id="txt" addToForm="1" contenteditable spellcheck="true" style="height:100px;width:300px;font-family:arial,sans serif;border:1px solid black;font-weight:normal;overflow-y:auto;"
    </div><br />
<input type="button" value="Go" id="btnGo">
</form>
<script type="text/javascript">
$(document).ready(function(){
    $("#btnGo").click(function(){
        $("div[addToForm]").each(function(){
            var tId=$(this).prop("id");
            $(this).after("<input type='hidden' name='"+tId+"' id='hdn"+tId+"'>");
            $("#hdn"+tId).val($(this).html());
        });
        $("#f").submit();
    });
});
</script>

注1）如果您要删除内容的HTML格式，请使用<textarea>代替<input> 注2）确保首先成功完成验证，或者最终得到多个具有相同名称的隐藏输入

如何在表单中提交div

2 个答案: