javascript 为什么以及如何解决“未捕获的TypeError:无法读取ckeditor的未定义的属性“setData”

hivapdat  于 2023-04-04  发布在  Java
关注(0)|答案(2)|浏览(142)

我使用的是bootstrap模式的ckeditor, AJAX 调用后应该动态加载ckeditor中的数据,我无法加载ckeditor中的数据。代码:

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

脚本

$(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');
        }
    })
})

错误是:未捕获的类型错误:无法读取未定义的属性“setData”如何解决这个问题?欢迎任何帮助/建议。谢谢。

uqxowvwt

uqxowvwt1#

我只是通过从textarea中删除id属性来修复此问题

cngwdvgl

cngwdvgl2#

你需要等到编辑器“就绪”,找出如何监听就绪事件,然后在那里赋值。我在vue中遇到了类似的问题,我的就绪事件被称为ready <ckeditor @ready="onEditorReady" v-model="editorValue"></ckeditor>
所以我在那个listerner中运行我的作业。我相信在Vue环境之外也是类似的。

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

相关问题