使用页面上的添加按钮在 codeigniter 中添加另一个 ckeditor
每当您单击添加按钮时，我想添加另一个 ckeditor 将添加另一个带有 ckeditor 的文本字段。单击它时，它已经添加了新字段，但我无法使用 ckeditor 在新字段上输入。这是我的代码：
* 看法 *
<div id="addanother">
<?php echo $this->ckeditor->editor("textheading_lead[]",""); ?>
<br>
<div class="form-group">
<label for="sel1">小見出し</label>
<select class="form-control" name="subheading[]">
<option value="">監修 one</option>
<option value="">監修 two</option>
<option value="">監修 three</option>
<option value="">監修 four</option>
</select>
</div>
<input type="text" class="form-control" name="subheading_text[]">
</div>
<div id="addnewdiv"></div>
<a href="" class="btn btn-info addfields" >+</a>
* javascript *
$('.addfields').on('click', addfields);
function addfields(e) {
var new_input = $('#addanother').html();
var aaa = new_input + '<br>';
$('#addnewdiv').append(new_input);
e.preventDefault();
}
* 控制器 *
public function add_special(){
$this->load->library('ckeditor');
$this->load->library('ckfinder');
$this->ckeditor->basePath = base_url().'asset/ckeditor/';
$this->ckeditor->config['language'] = 'en';
$this->ckeditor->config['width'] = '730px';
$this->ckeditor->config['height'] = '300px';
$this->ckfinder->SetupCKEditor($this->ckeditor,'../../asset/ckfinder/');
$this->load->view('common/header');
$this->load->view('admin/special/add_special');
$this->load->view('common/footer');
}
CKEditor 包的链接
https://ckeditor.com/ckeditor-4/download/
小怪兽爱吃肉1回答
-
MM们
不幸的是，ckeditor插件用于为编辑器面板创建动态 ID。在附加 div 时，插件会找到具有相同 ID 的重复编辑器实例，textheading_lead[]并且在您的情况下抛出错误。在这里，我做了一些改动，将为您服务。<?phpdefined('BASEPATH') OR exit('No direct script access allowed');?><html> <head> <title>How to Integrate CKeditor in Codeigniter using Bootstrap</title> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <script type="text/javascript" src="<?php echo base_url(); ?>assets/ckeditor/ckeditor.js"></script> <script type="text/javascript" src="<?php echo base_url(); ?>assets/ckfinder/ckfinder.js"></script></head><body><div class="container"><form method="post" action="<?php echo base_url(); ?>/Test57619322/here"> <div class="row"> <div class="col-lg-12"> <div id="addanother"> <br> <?php echo $this->ckeditor->editor("textheading_lead[0]",""); ?> <br> <div class="form-group"> <label for="sel1">小見出し</label> <select class="form-control" name="subheading[]"> <option value="">監修 one</option> <option value="">監修 two</option> <option value="">監修 three</option> <option value="">監修 four</option> </select> </div> <input type="text" class="form-control" name="subheading_text[]"> </div> <div id="addnewdiv"></div> </div> </div> <div class="row" style="margin-top:20px;"> <div class="col-lg-12"> <a href="" class="btn btn-info addfields" >+ Add Fields</a> <input type="submit" name="submitBtn" value="Submit" class="btn btn-success"> </div> </div> </form></div><script type="text/javascript"> $('.addfields').on('click', addfields); var i=0; function addfields(e) { e.preventDefault(); var copy = $('#addanother').clone(); var oneplus=i+1; $(copy).find('div#cke_textheading_lead\\[0\\]').remove(); $(copy).find('script').remove(); $(copy).find('textarea[name=textheading_lead\\[0\\]]').attr('name', 'textheading_lead['+oneplus+']'); $('#addnewdiv').append($(copy).html()+ '<br>'); CKEDITOR.replace('textheading_lead['+oneplus+']'); i++; }</script></body></html>您可以在您的控制器中接收响应，例如$_POST["textheading_lead"]Codeigniter post 方法，并且像往常一样，它以数组的形式获取。
随时随地看视频慕课网APP
PHP