Question

这是与Passing MySQL data to Modal Form via PHP有关的一些方法，因为我正在使用该文章中提到的方法来编辑记录。

但现在我的问题非常令人惊讶。我正在使用ckeditor来编辑产品详细信息，但是当我在那里使用它时，它只显示在第一条记录中。在接下来的记录中，出现了简单的textarea。

这是循环时出现的代码。

  <div class="modal" id="modaledit<?=$id; ?>">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
          <h4 class="modal-title">Edit Product</h4>
        </div>
        <div class="modal-body">

          <div class="formleft">Name:</div>
          <div class="formright"><input type="text" name="prod_name" value="<?=$r["prod_name"]; ?>" /></div>

          <div class="formleft">Details:</div>
          <div class="formright">
            <textarea name="prod_details" cols="40" rows="10" id="editor1"><?=$r["prod_details"]; ?></textarea>
            <script type="text/javascript">
            //<![CDATA[
                CKEDITOR.replace( 'editor1',
                {
                    filebrowserBrowseUrl :'js/ckeditor/filemanager/browser/default/browser.html?Connector=<?php echo $url;?>js/ckeditor/filemanager/connectors/php/connector.php',
                    filebrowserImageBrowseUrl : 'js/ckeditor/filemanager/browser/default/browser.html?Type=Image&Connector=<?php echo $url;?>js/ckeditor/filemanager/connectors/php/connector.php',
                    filebrowserFlashBrowseUrl :'js/ckeditor/filemanager/browser/default/browser.html?Type=Flash&Connector=<?php echo $url;?>js/ckeditor/filemanager/connectors/php/connector.php',
                    filebrowserUploadUrl  :'<?php echo $url;?>js/ckeditor/filemanager/connectors/php/upload.php?Type=File',
                    filebrowserImageUploadUrl : '<?php echo $url;?>js/ckeditor/filemanager/connectors/php/upload.php?Type=Image',
                    filebrowserFlashUploadUrl : '<?php echo $url;?>js/ckeditor/filemanager/connectors/php/upload.php?Type=Flash'
                });

            //]]>
            </script>
          </div>

        </div>
        <div class="modal-footer">
          <a href="#" class="btn btn-default" style="color:#ffffff;" data-dismiss="modal">Close</a>
          <a href="#" class="btn btn-primary" onclick="$('#formprod').submit();">Submit</a>
        </div>
      </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
  </div><!-- /.modal -->

这对我来说已经成为一个令人头疼的问题，因为我首先尝试使用外部页面模式，但是ckeditor没有显示任何记录。它确实出现了，但仅限于第一个记录。怪异!!!

修改

我注意到的另一件事，实际上ckeditor只在模态中显示一次。基本上，我在同一页面上使用两个模态，一个用于添加新记录，一个用于编辑。而且因为编辑模式在显示所有产品的循环中，所以它在页面上更早出现。然后，ckeditor仅显示第一个记录编辑。现在我注意到ckeditor也没有出现在添加新记录模式中（在我编写模态代码之前它完美地工作）。

Answer 1

这是错误控制台中显示的内容：

Uncaught [CKEDITOR.editor] The instance "editor1" already exists.

如果您打算在页面上使用多个CKEditor实例，请执行以下操作：

A）为您要替换的每个textarea元素分配不同的ID。这样的事情应该可以解决你的问题：

<textarea name="prod_details" cols="40" rows="10" id="editor<?=$id; ?>">

以后：

CKEDITOR.replace( 'editor<?=$id; ?>',

OR

B）或者在关闭模态对话框窗口时调用CKEDITOR.instances.editor1.destroy();之类的东西

请注意，此示例页面上有不同的错误，HTTP 404请求和

Uncaught TypeError: Cannot read property 'length' of undefined

可能导致CKEditor无法加载等。

Answer 2

如果你使用的是BootStrap而不是Jquery，那说你可以添加这种代码（例子）

<script>
$('.modal').on('shown.bs.modal', function (e) {
 //<![CDATA[
            CKEDITOR.replace( 'editor1',
            {
                filebrowserBrowseUrl :'js/ckeditor/filemanager/browser/default/browser.html?Connector=<?php echo $url;?>js/ckeditor/filemanager/connectors/php/connector.php',
                filebrowserImageBrowseUrl : 'js/ckeditor/filemanager/browser/default/browser.html?Type=Image&Connector=<?php echo $url;?>js/ckeditor/filemanager/connectors/php/connector.php',
                filebrowserFlashBrowseUrl :'js/ckeditor/filemanager/browser/default/browser.html?Type=Flash&Connector=<?php echo $url;?>js/ckeditor/filemanager/connectors/php/connector.php',
                filebrowserUploadUrl  :'<?php echo $url;?>js/ckeditor/filemanager/connectors/php/upload.php?Type=File',
                filebrowserImageUploadUrl : '<?php echo $url;?>js/ckeditor/filemanager/connectors/php/upload.php?Type=Image',
                filebrowserFlashUploadUrl : '<?php echo $url;?>js/ckeditor/filemanager/connectors/php/upload.php?Type=Flash'
            });

        //]]>
})
</script>

请注意，此示例代码绑定到模态类，如果您仅使用模态，则可以尝试。但是，如果你有100行，你不需要100个模态，你可以简单地使用1个模态，并在需要时用Javascript / Jquery更改内容。

编辑：添加了部分。

ckeditor的Bootstrap模态问题

2 个答案: