Question

我是Javascript的新手。我正在尝试创建一个用于撰写评论的页面。我陷入了困境。

应该有一个按钮来添加一个复制整个div部分的部分，以允许用户写另一个部分。

以下是我的代码。我使用CKeditor插件允许最终用户按照自己的意愿格式化文本。

当前代码在创建新部分时，不允许用户写入创建的文本区域。请指导我哪里弄错了。

    <?php
    include 'settings.php';

    if (!isset($dbc)){
        $dbc = new mysqli(DB_HOST , DB_USER , DB_PASSWORD , DB_NAME);
    }

    if ($dbc -> connect_error){
        die ("Cannot connect to the database");
    }

?>
<html>
    <head>
        <title>Write a new Review.</title>
        <script type="text/javascript" src="ckeditor/ckeditor.js"></script>
    </head>
    <body>
        <form id = "new_review" action = "form.php" method = "post">
            <div id = "header">
                <h2> Header Section. </h2>
                Author : <input type = "text" id = "author"> <br>
                Title: <input type = "text" id = "title"> <br>
                Tagline: <input type = "text" id = "tagline" > <br>
                Score: <input type = "text" id = "score" > <br>
                Pros:   <textarea class = "ckeditor" id = "pros">
                            Please enter the pro's of the product here.
                        </textarea>
                Cons:   <textarea class = "ckeditor" id = "cons">
                            Please enter the cons of the product here.
                        </textarea>
                Verdict:<textarea class = "ckeditor" id = "verdict">
                            Enter your vedict here.
                        </textarea>
            </div>              

            <div id = "sections">
                <h2> Sections. </h2>

                <input type = "button" id="button" onclick="duplicate()">Add a section</button>
                <div class = "section_base" id = "section">
                    Section Icon: <input type="file" id="icon" accept="image/*"> <br>
                    Section Title: <input type = "text" id = "section_title" > <br>
                    Section Text:   <textarea class = "ckeditor" id = "section_text">
                                    Enter you text here.
                                    </textarea>
                    Section Score: <input type = "text" id = "section_score">

                </div>

            </div>

            <div id = "conclusion">
                <h2> Conclusion: </h2>
                <textarea class = "ckeditor" id = "conclusions">
                    Enter your conclusion here.
                </textarea>
            </div>

            <input type = "submit" value="submit">
        </form>
        <script type="text/javascript">
                var i = 0;
                var original = document.getElementById('section');

                function duplicate() {
                    var clone = original.cloneNode(true); // "deep" clone
                    clone.id = "section" + ++i;
                    // or clone.id = ""; if the divs don't need an ID
                    original.parentNode.appendChild(clone);
                }
            </script>
    </body>
</html>

以下是我从中获取信息的链接，以便我做的事情。

http://ckeditor.com/ckeditor_4.3_beta/samples/replacebyclass.html

How can i duplicate a div onclick with javascript?

Answer 1

试试你的javascript

<script type="text/javascript">
    var i = 1;

    function duplicate() {
        var clone = '<div class = "section_base" id = "section">Section Icon: <input type="file" id="icon" accept="image/*"> <br> Section Title: <input type = "text" id = "section_title" > <br> Section Text:   <textarea id = "section_text'+i+'"> Enter you text here. </textarea>Section Score: <input type = "text" id = "section_score"> </div>';
        var div = document.getElementById('sections');
        var newdiv = document.createElement('div');
        newdiv.innerHTML = clone;
        div.appendChild(newdiv);

        CKEDITOR.replace('section_text'+i);
        i++;
   }
</script>

Answer 2

似乎CKEditor在绑定动态添加元素的控件方面遇到了一些问题。您可以参考此问题，其中包含面临类似问题的人员及其解决方案的讨论。

CKEDITOR inline on dynamic created element ( droppable/sortable )

还找到了jsfiddle demo，它将CKEditor内联到

CKEDITOR.inline( el.get( 0 ) );

这家伙还在how to add inline ckeditor on dynamically created elements

上写了一篇很好的教程

看看它是否有帮助......

动态复制表单textarea

2 个答案: