I am using ckeditor in bootstrap modal. The data in ckeditor should be loaded dynamically after ajax call. I am not able to load the data in ckeditor. Code :

<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            <h4 class="modal-title" id="exampleModalLabel">Thank you Message</h4>
          </div>
          <div class="modal-body">
            <form>
              <div class="form-group">
                <label for="recipient-name" class="control-label">Recipient:</label>
                <input type="text" class="form-control" id="recipient-name">
              </div>
              <div class="form-group">
                <label for="recipient-name" class="control-label">Subject:</label>
                <input type="text" class="form-control" id="subject">
              </div>
              <div class="form-group">
                <label for="message-text" class="control-label">Message:</label>
                <?php $ckeditor->editor('message', '', array('id'=>'editor1')); ?>
              </div>
            </form>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            <button type="button" class="btn btn-primary">Send message</button>
          </div>
        </div>
      </div>
    </div>

Script

$(document).on('click', '#sendemail', function(){
    var target = $('#hidden_send_email_url').val();
    var id = $(this).find('#hidden_id').val();
    $.ajax({
        url : target,
        data : {id : id},
        type : 'POST',
        dataType: "json",
        success : function(data){
            var modal = $('#exampleModal').modal('show');
            modal.find('.modal-body input#recipient-name').val(data.to)
            modal.find('.modal-body input#subject').val(data.subject)
            CKEDITOR.instances.editor1.setData(data.message)
            
            
        },
        error : function(){
            alert('Error occured');
        }
    })
})

Error is:Uncaught TypeError: Cannot read property 'setData' of undefined How to solve this? Any help/suggstion is wele. Thanks.

I am using ckeditor in bootstrap modal. The data in ckeditor should be loaded dynamically after ajax call. I am not able to load the data in ckeditor. Code :

<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            <h4 class="modal-title" id="exampleModalLabel">Thank you Message</h4>
          </div>
          <div class="modal-body">
            <form>
              <div class="form-group">
                <label for="recipient-name" class="control-label">Recipient:</label>
                <input type="text" class="form-control" id="recipient-name">
              </div>
              <div class="form-group">
                <label for="recipient-name" class="control-label">Subject:</label>
                <input type="text" class="form-control" id="subject">
              </div>
              <div class="form-group">
                <label for="message-text" class="control-label">Message:</label>
                <?php $ckeditor->editor('message', '', array('id'=>'editor1')); ?>
              </div>
            </form>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            <button type="button" class="btn btn-primary">Send message</button>
          </div>
        </div>
      </div>
    </div>

Script

$(document).on('click', '#sendemail', function(){
    var target = $('#hidden_send_email_url').val();
    var id = $(this).find('#hidden_id').val();
    $.ajax({
        url : target,
        data : {id : id},
        type : 'POST',
        dataType: "json",
        success : function(data){
            var modal = $('#exampleModal').modal('show');
            modal.find('.modal-body input#recipient-name').val(data.to)
            modal.find('.modal-body input#subject').val(data.subject)
            CKEDITOR.instances.editor1.setData(data.message)
            
            
        },
        error : function(){
            alert('Error occured');
        }
    })
})

Error is:Uncaught TypeError: Cannot read property 'setData' of undefined How to solve this? Any help/suggstion is wele. Thanks.

• javascript
• jquery
• twitter-bootstrap
• ckeditor

• 2 Try checking the output from console.log(CKEDITOR.instances). Either the editor has not been instantiated yet or it's name is set to something other than 'editor1` – mark.monteiro Commented May 18, 2015 at 3:20
• @mark.monteiro Thanks solved the problem. – samjhana joshi Commented May 18, 2015 at 5:07
• where can I check editor name – rajana sekhar Commented Sep 9, 2015 at 6:10

2 Answers 2

I just fixed this issue by removing the id attribute from the textarea

You need to wait until the editor is "Ready" find out how to listen for the ready event then do ur value assigning in there. I had similar issue in vue and my ready event is called ready <ckeditor @ready="onEditorReady" v-model="editorValue"></ckeditor>

So i run my assignment in that listerner. Im sure its similarish outside vue context too.

  methods:{
    onEditorReady() {
      const note = UserLessonNote.query().where("id", parseInt(this.$route.params.lessonId)).first()
      if (note?.content) {
        this.UserLessonNoteContent = note.content
      }
    }
  }