I have a button which opens up the dialogue box. Inside dialogue box i have a form in which i have a button, on clicking this button i append another form into this form. So I have to add ckeditor to all the textareas i append. But it is not working for me. The textarea are not editable.

This is my form which I append on clicking the button

<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>

This is Javascript function to add the form.

$('.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++;

});

Main form is this. on which a button is there which add the form to this form.

<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>

So its kind of giving error like : instance of CKeditor already exists

I have a button which opens up the dialogue box. Inside dialogue box i have a form in which i have a button, on clicking this button i append another form into this form. So I have to add ckeditor to all the textareas i append. But it is not working for me. The textarea are not editable.

This is my form which I append on clicking the button

<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>

This is Javascript function to add the form.

$('.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++;

});

Main form is this. on which a button is there which add the form to this form.

<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>

So its kind of giving error like : instance of CKeditor already exists

• javascript
• jquery
• html
• forms
• ckeditor

4 Answers 4

try this

<textarea id="first_textarea" name="first_textarea" class="form-control editor">
<textarea id="another_textarea" name="another_textarea" class="form-control editor">

<script>
    $(".editor").each(function () {
        let id = $(this).attr('id');
        CKEDITOR.replace(id, options);
    });
</script>

It looks like you are adding elements with duplicate ID's when you add the second form. Make sure every ID is unique and call the CKEDITOR.replace function for every textarea that needs to be an editor.

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

Easy Way To Make

<textarea  name="Text1" id="editor1"></textarea>
<textarea  name="Text2" id="editor2"></textarea>
<textarea  name="Text3" id="editor3"></textarea>
<textarea  name="Text4" id="editor4"></textarea>

<script src="https://ajax.googleapis./ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="//cdn.ckeditor./4.9.2/full/ckeditor.js"></script>

<script> 
CKEDITOR.replace( 'editor1' );
CKEDITOR.replace( 'editor2' );
CKEDITOR.replace( 'editor3' );
CKEDITOR.replace( 'editor4' );
</script>

For multiple items with options you can use:

<script>
    $(document).ready(function () {
        $(".editor").each(function () {
            let id = $(this).attr('id');

            CKEDITOR.replace(id, {
                toolbar: [{
                    name: 'clipboard',
                    items: ['Undo', 'Redo']
                },
                {
                    name: 'styles',
                    items: ['Styles', 'Format']
                },
                {
                    name: 'basicstyles',
                    items: ['Bold', 'Italic', 'Strike', '-', 'RemoveFormat']
                },
                {
                    name: 'paragraph',
                    items: ['NumberedList', 'BulletedList', '-', 'Outdent', 'Indent', '-', 'Blockquote']
                },
                {
                    name: 'links',
                    items: ['Link', 'Unlink']
                },
                {
                    name: 'tools',
                    items: ['Maximize']
                },
                {
                    name: 'editing',
                    items: ['Scayt']
                }
                ],
          });
      });
   });
</script>