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');