CKeditor with multiple textareas

Question

我有一个打开对话框的按钮。在对话框里面我有一个表单，我有一个按钮，点击这个按钮后，我将另一个表单添加到这个表单中。所以我必须添加ckeditor到我追加的所有textareas。但它不适合我。 textarea不可编辑。

这是我的形式，我在点击按钮

<form id="q_options"> 

    <div class="rightcontact"> 
     <button type="submit">Remove</button> 
    </div> 

    <div class="leftcontact"> 
     <div class="form-group"> 
      <p>Score<span>*</span></p> 
      <span class="icon-case"><i class="fa fa-male"></i></span> 
      <input type="number" name="q_score" id="q_score"/> 
     </div> 

    </div> 

    <div class="form-group"> 
     <p>Option-text<span>*</span></p> 
     <span class="icon-case"><i class="fa fa-male"></i></span> 
     <textarea name="option_text" id="option_text" rows="10" cols="100"></textarea> 
    </div> 

</form> 

追加这是JavaScript函数来添加表单。

$('.add_options').click(function(event){ 
event.preventDefault(); 
CKEDITOR.replace('option_text'); 
var $temp = ($('#q_options').show()).clone().removeClass('q_options'); 
$('#q_option_div').append($temp); 
currentchild++; 

}); 

主要形式是这样的。在其上有一个按钮，将表单添加到此表单中。

<form id="question"> 
<h1>Question</h1> 

<div class="leftcontact"> 
    <p>Difficulty<span>*</span></p> 
    <div class="check-boxes"> 
     {% for obj in q_diff_objects %}  
      <input type="radio" name="ques_difficulty" value={{obj.id}}>{{obj.name}}</input><br> 
     {% endfor %} 
    </div> 
</div> 

<div class="form-group"> 
    <p>Question-text<span>*</span></p> 
    <span class="icon-case"><i class="fa fa-male"></i></span> 
    <textarea name="question_text" id="question_text" rows="10" cols="100"></textarea>   
    <div class="validation"></div> 
</div> 

<div class="form-group"> 
    <p>Media-url<span>*</span></p> 
    <span class="icon-case"><i class="fa fa-male"></i></span> 
    <textarea name="option_text" id="option_text" rows="10" cols="10"></textarea> 
    <div class="validation"></div> 
</div> 

<button type="submit" class="add_options">Add Option</button> 
<div id="q_option_div"> 
    <p>option</p> 
</div>  
<button type="submit" class="bouton-contact">Send</button> 

所以它的那种给人错误，如：CKEDITOR的实例已存在

Answer 1

它看起来像你当你添加第二种形式添加具有重复ID的元素。确保每个ID都是唯一的，并为每个需要成为编辑器的textarea调用CKEDITOR.replace函数。

<textarea name="option_text_1" id="option_text_1" rows="10" cols="100"></textarea> 
<textarea name="option_text_2" id="option_text_2" rows="10" cols="100"></textarea> 

CKEDITOR.replace('option_text_1'); 
CKEDITOR.replace('option_text_2');