通过id查找textarea在实现CKEDITOR时不再工作 [英] Finding textarea by id no longer works when implementing CKEDITOR
问题描述
我有一个信息表，其中允许用户编辑它。在一个单元格中，有文本信息。如果用户点击那个单元格，引导模式会出现一个包含从数据库检索的当前文本的文本区域。
这是表的一部分：
< table class =table table-striped table-hoverid =table_id>
< thead>
< tr>
< th> Event< / th>
< th>笔记< / 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！当前注释是：'+ previousValue）;
var result = input_id.split（' - '）;
var notes_id = result [1];
console.log（'选择的事件ID是：'+ notes_id）;
/ *打开模态* /
$（'＃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-notesclass =modal fade>
< div class =modal-dialog>
< div class =modal-content>
< div class =modal-header>
< button type =buttonclass =closedata-dismiss =modalaria-label =关闭>< span aria-hidden =true>& times; ; / span>< / button>
< h4 class =modal-title>编辑活动记事< / h4>
< / div>
< div class =modal-body>
< form action =id =form-notes-eventname =form-notes-eventclass =form-horizontalmethod =post>
< div class =form-horizontal>
< fieldset>
< legend>编辑数据< / legend>
< div class =form-group>
< label for =observationsclass =col-lg-2 col-md-2 col-sm-2 col-xs-2 control-label>注意< / label&
< div class =col-lg-10 col-md-10 col-sm-10 col-xs-10>
< textarea class =form-controlrows =2id =observationsname =observations>< / textarea>
< span class =help-block>完成后按下保存按钮。< / span>
< / div>
< / div>
< / fieldset>
< / div>
< / form>
< / div>
< div class =modal-footer>
< button type =buttonclass =btn btn-primarydata-dismiss =modal>取消< / button>
< button type =buttonclass =btn btn-success>保存更改< / button>
< / div>
< / div><！ - /.modal-content - >
< / div><！ - /.modal-dialog - >
< / div><！ - /.modal - >
文本显示在textarea内。但是，如果我实现CKEDITOR，文本不再显示。我只看到textarea为空。
< script> CKEDITOR.replace（'observations'）;< / script&
直到这里，CKEDITOR工作正常，但现在textarea是空的。当我检查textarea元素没有CKEDITOR，我看到textarea id的确是#observations。
$ b
我刚刚找到这里，您可以将文本设置为CKEDITOR文本区域如下：
CKEDITOR.instances.observaciones.setData（'< p&数据。< / p>'）;
我希望这在不久的将来可以帮助别人：
我刚刚在打开模态时添加了以下代码：
/ *打开模态* /
$（'＃modal-notes'）。
$（'＃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）;
就是这样。
有点另一个问题，当点击许多模态。解决方案是此处。
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">×</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>' );
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.
这篇关于通过id查找textarea在实现CKEDITOR时不再工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
