实现CKEDITOR时，按ID查找textarea不再起作用

问题描述

我有一个信息表，允许用户对其进行编辑。 在一个单元格中，有文本信息。 如果用户单击该单元格，则会出现一个引导程序模态，其中包含一个文本区域，其中包含从数据库中检索到的当前文本。

这是表格的一部分：

<table class="table table-striped table-hover" id="table_id">
<thead>
    <tr>
        <th>Event</th>
        <th>Notes</th>
    </tr>
</thead>
<tbody>
    <tr>
        @foreach($events as $event)
            <td>{{$event->Event}}</td>
            <td><div id="notes-{{$event->id}}">{{$event->notes}}</div></td>
            </tr>
        @endforeach
</tbody>
</table>

这是启动模式的javascript的一部分：

$('[id^="notes"]').on("click", function(){
    var input_id = $(this).attr('id');
    var previousValue = $('#'+input_id).html(); console.log('clicked! The current notes are: '+previousValue);
    var result = input_id.split('-');
    var notes_id = result[1];
    console.log('The event id selected is: '+notes_id);

    /*Open a modal*/
    $('#modal-notes').modal('show');
    $('#modal-notes').on('shown.bs.modal', function() {
            console.log('Modal has been opened.');
            $(this).find('#observations').text(previousValue);
        });
});

模态如下所示：

<div id="modal-notes" class="modal fade">
  <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">Edit event's notes</h4>
      </div>
      <div class="modal-body">
        <form action="" id="form-notes-event" name="form-notes-event" class="form-horizontal" method="post">
            <div class="form-horizontal">
                <fieldset>
                    <legend>Edit data</legend>
                    <div class="form-group">
                        <label for="observations" class="col-lg-2 col-md-2 col-sm-2 col-xs-2 control-label">Notes</label>
                        <div class="col-lg-10 col-md-10 col-sm-10 col-xs-10">
                            <textarea class="form-control" rows="2" id="observations" name="observations"></textarea>
                            <span class="help-block">Clic on save button when done.</span>
                        </div>
                    </div>
                </fieldset>
            </div>
        </form> 

      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-primary" data-dismiss="modal">Cancel</button>
        <button type="button" class="btn btn-success">Save changes</button>
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

文本显示在文本区域内。 但是，如果实现了CKEDITOR，则不再显示该文本。 我只看到textarea为空。

<script>CKEDITOR.replace('observations');</script>

在此之前，CKEDITOR可以正常工作，但现在textarea为空。 当我检查没有CKEDITOR的textarea元素时，我发现textarea id确实是#observations。 但是，使用CKEDITOR，我不再看到该ID。

可能的解决方案

我刚刚在发现，可以将文本设置为CKEDITOR textarea，如下所示：

CKEDITOR.instances.observaciones.setData( '<p>This is the editor data.</p>' );