使用页面上的添加按钮在 codeigniter 中添加另一个 ckeditor

Question

我想添加另一个 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');
    }

link 的 CKEditor 包

https://ckeditor.com/ckeditor-4/download/

Answer 1

不幸的是ckeditor 用于为编辑器面板创建动态 ID 的插件。在附加 div 时，插件会找到具有相同 ID textheading_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>

您可以在控制器中接收响应，例如 $_POST["textheading_lead"] 或 Codeigniter post 方法，并且像往常一样以数组形式获取响应。

使用页面上的添加按钮在 codeigniter 中添加另一个 ckeditor

Add another ckeditor in codeigniter using add button on the page

javascript

php

jquery

codeigniter

ckeditor