Question

我有一个信息表，允许用户编辑它。在一个单元格中，有文本信息。如果用户单击该单元格，则会出现一个带有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 -->

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

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

直到这里，CKEDITOR工作正常，但现在textarea是空的。当我在没有CKEDITOR的情况下检查textarea元素时，我看到textarea id确实是#observations。但是，对于CKEDITOR，我再也看不到身份了。

可能的解决方案

我刚刚找到here您可以将文本设置为CKEDITOR textarea，如下所示：

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

Answer 1

好的，我找到了解决方案。我希望这可以在不久的将来帮助其他人：

我在打开模态时添加了以下代码：

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

就是这样。

点击多个模态时我遇到了另一个问题。解决方案是here。

在实施CKEDITOR时，通过id查找textarea不再有效

1 个答案: