Javascript 使用页面上的“添加”按钮在codeigniter中添加另一个ckeditor
每当单击“添加”按钮时,我想添加另一个ckeditor,将添加另一个带有ckeditor的文本字段。单击时,已添加新字段,但我无法使用ckeditor键入新字段。这是我的密码: *查看*Javascript 使用页面上的“添加”按钮在codeigniter中添加另一个ckeditor,javascript,php,jquery,codeigniter,ckeditor,Javascript,Php,Jquery,Codeigniter,Ckeditor,每当单击“添加”按钮时,我想添加另一个ckeditor,将添加另一个带有ckeditor的文本字段。单击时,已添加新字段,但我无法使用ckeditor键入新字段。这是我的密码: *查看* <div id="addanother"> <?php echo $this->ckeditor->editor("textheading_lead[]",""); ?>
<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>
$('.addfields').on('click', addfields);
function addfields(e) {
var new_input = $('#addanother').html();
var aaa = new_input + '<br>';
$('#addnewdiv').append(new_input);
e.preventDefault();
}
编辑包链接
不幸的是
ckeditor
插件用于为编辑器面板创建动态id。在追加div时,插件会发现具有相同id的重复编辑器实例textheading\u lead[]
,并在您的案例中抛出错误。这里我做了一些修改,将为您工作
<?php
defined('BASEPATH') OR exit('No direct script access allowed');
?><html lang="en">
<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>
如何使用Bootstrap将CKeditor集成到Codeigniter中
添加图书馆文档链接。@MohammedShafeek是什么?从哪里下载了图书馆编辑?@MohammedShafeek从他们的网站siri也面临着这个问题,它拯救了我的一天你太棒了^ ^它工作得很好!非常感谢你,先生。
<?php
defined('BASEPATH') OR exit('No direct script access allowed');
?><html lang="en">
<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>