如何通过一个按钮动态的添加富文本编辑框

Question

```

                <div style='width: 40%; height: 15px;float:left;'>
                        <font color='red' size='4'>文本规则说明:</font>
                        <div style='height: 200px; width: 95%;float:left;'>
                            <div>
                                <textarea id='ruleIntroduction' name='ruleIntroduction' rows='25' cols='80' ></textarea>
                                <script type='text/javascript'>CKEDITOR.replace('ruleIntroduction');</script>
                            </div>
                            <div style='height: 15px; float: left; width: 80%; margin-top: 12px;'></div>
                        </div>
                </div>  

                <div style='width: 40%; height: 15px;float:left;'>
                        <font color="red"  size="4">问题:</font>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                        <div style='height: 200px; width: 95%;float:left;'>
                            <div>
                                <textarea id='rulequestion' name='rulequestion' rows='25' cols='80' ></textarea>
                                <script type='text/javascript'>CKEDITOR.replace('rulequestion');</script>
                            </div>
                             <div style='height: 15px; float: left; width: 80%; margin-top: 12px;'></div>
                        </div>
                </div>  

                <div style='width: 15%; height: 15px;float:left;'>
                    <div style='width: 100%; float: left;'>
                        <font color='red'  size='4'>规则答案：</font><br>
                        <input id='ruleanswer' name='ruleanswer' class='easyui-textbox' style='width: 100%;' />
                    </div>
                </div>

                <div style='width: 5%; height: 15px;float:right;'>
                    <div style='width: 25%; float: right; text-align: right;'>
                        <a href='javascript:void(0)' id='moreTextDiv' data-options='iconCls:"icon-add"' class='easyui-linkbutton'></a>
                    </div>
                </div>
            </div>
        </div>

$('#moreTextDiv').click(function() {
addnum++;
$('#textDiv').append("

"
+"

"
+"文本规则说明:

"
+"

"
+"CKEDITOR.replace(&#39;ruleIntroduction&#39;);&lt;\/script&gt;&quot;<br> +&quot;</div>&quot;<br> +&quot;<div style='height: 15px; float: left; width: 80%; margin-top: 12px;'></div>&quot;<br> +&quot;</div></div>&quot;<br> +&quot;<div style='width: 40%; height: 15px;float:left;'>&quot;<br> +&quot;<font color='red' size='4'>问题:</font>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</font><div style='height: 200px; width: 95%;float:left;'>&quot;<br> +&quot;<div><textarea class='rulequestion' name='rulequestion' rows='25' cols='80' ></textarea>&quot;<br> +&quot;<script type='text/javascript'>CKEDITOR.replace(&#39;rulequestion&#39;);&lt;\/script&gt;&quot;<br> +&quot;</div>&quot;<br> +&quot;<div style='height: 15px; float: left; width: 80%; margin-top: 12px;'></div>&quot;<br> +&quot;</div></div>&quot;<br> +&quot;<div style='width: 15%; height: 15px;float:left;'><div style='width: 100%; float: left;'><font color='red' size='4'>规则答案：</font><br><input class='ruleanswer' name='ruleanswer' class='easyui-textbox' style='width: 100%;' /></div></div>&quot;<br> +&quot;<div style='width: 5%; height: 15px;float:right;'><div style='width: 25%; float: right; text-align: right;'>&quot;<br> +&quot;<a href='javascript:void(0)' id='lessDiv "<br> + addnum<br> +"' onclick='lessDiv(textDiv"<br> + addnum<br> + ")'></a></div></div>&quot;);<br> $(&#39;.ruleIntroduction&#39;).textarea();<br> $(&#39;.rulequestion&#39;).textarea();<br> $(&#39;.ruleanswer&#39;).textbox();<br> $(&#39;#lessDiv&#39; + addnum).linkbutton({<br> iconCls : &#39;icon-no&#39;<br> }); <br> });</p> <pre><code> 通过点击后面的加号去动态的添加前面两个富文本编辑框和一个input，现在的问题是我点击后不会出现富文本编辑框里面的富文本编辑功能，只会添加一个textarea文本框。求大神给个思路 </code></pre>

Answer 1

会添加textarea就说明你的js应该是正确的（具体没看）。但是不出现编辑器就说明的编辑器没配置好。你的页面里面引用了编辑器的js和css吗？，
给你一个链接配置下在JSP里使用CKEditor和CKFinder