Finding textarea by id no longer works when implementing CKEDITOR

Question

I have a table of information where the user is allowed to edit it. In one cell, there is text information. Should the user click on that cell, a bootstrap modals appears with a textarea containing the current text retrieved from the database.

Here is part of the table:

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

Here is part of the javascript launching the modal:

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

The modal looks like the following:

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

The text is shown inside the textarea. However, if I implement the CKEDITOR, the text is no longer shown. I only see the textarea empty.

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

Until here, the CKEDITOR works fine but now the textarea is empty. When I inspect the textarea element without the CKEDITOR, I see that the textarea id is indeed #observations. However, with the CKEDITOR, I don't see the id anymore.

A possible solution

I have just found here that you can set text into the CKEDITOR textarea as follows:

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

score 0 · Answer 1 · edited May 23 '17 at 11:58

Ok, I found the solution. I hope this helps someone else in the near future:

I just added the following code when opening the modal:

/*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);
});

CKEDITOR.replace('observations');
CKEDITOR.instances.observations.setData(previousValue);

And that was it.

I had another problem when clicking many modals. Solution is here.

Finding textarea by id no longer works when implementing CKEDITOR

1 Answers1

Linked