php - ckeditor 的 Bootstrap 模式问题

Question

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

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

这是 while 循环中的代码。

  <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 只在模态中显示一次。基本上，我在同一页面上使用两种模式，一种用于添加新记录，另一种用于编辑。因为编辑模式在显示所有产品的 while 循环中，所以它在页面上出现得更早。然后，ckeditor 仅在第一次记录编辑时出现。现在我注意到 ckeditor 也没有出现在添加新记录模式中(在我编写编辑模式代码之前它工作得很好)。

Answer 1

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

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

如果您计划在页面上使用多个 CKEditor 实例，请执行以下操作:

A) 为您计划替换的每个文本区域元素分配不同的 ID。像这样的事情应该可以解决您的问题:

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

及以后:

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

或

B) 或者调用类似 CKEDITOR.instances.editor1.destroy(); 的方式每当您关闭模态对话框窗口时

---

请记住，您在此示例页面、HTTP 404 请求和

Uncaught TypeError: Cannot read property 'length' of undefined 

这可能会导致 CKEditor 无法加载等。