CKEditor下的添加按钮不可见答案

【问题标题】：Add button under CKEditor is not visibleCKEditor下的添加按钮不可见
【发布时间】：2020-05-23 00:00:18
【问题描述】：

我在 form modal 中使用了 CKEditor django 插件。但是当我尝试在 CKEditor 下方显示添加按钮时，该按钮根本不会出现在 UI 中。

如下图所示，我目前保留了CKEditor文本框顶部的添加按钮，因为它放在底部时没有出现。

下面是html代码sn-p

   <div class="row">
              <div class="col-md-12">
                <div class="form-group">
                  <label for="">Driver Name</label>
              <input type="text" class="form-control" name="dn" id="dnn" required="True" />
            </div>

            <div class="form-group">
              <label for="st">Driver Description</label>
              <textarea name="editor1" id="editor1"></textarea>
              <script>
                  CKEDITOR.replace( 'editor1' );
              </script>
            </div>
            <div class="modal-footer">
              <button type="submit" class="btn btn-primary up">
                ADD
              </button>
            </div>

          </div>
   </div>

<script src="https://cdn.ckeditor.com/4.5.6/standard/ckeditor.js"></script>

有人可以建议如何使添加按钮显示在ckeditor下方。

【问题讨论】：

您的按钮可能隐藏在编辑器下方。如果你给 editor1 textarea 一个 CSS 高度，你应该可以按下编辑器 textarea 下方的“添加”按钮，并且可见。
当我检查元素时，按钮 div 根本不可见....奇怪！
尝试注释掉CKEDITOR.replace( 'editor1' );，如果您应该能够看到您的按钮。一旦您调整了将按钮向下移动的 css，然后取消注释该行并且您的按钮应该可见，因为您已将其向下移动得足够远。

标签： javascript html django ckeditor django-ckeditor

【解决方案1】：

如果您使用的是 Bootstrap 4，如果您的元素包装在弹性容器中，则可以使用 Order 功能。

您的代码应如下所示：

<div class="row">
  <div class="d-flex">
    <div class="col-md-12">

      <div class="form-group">
        <label for="">Driver Name</label>
        <input
          type="text"
          class="form-control"
          name="dn"
          id="dnn"
          required="True"
        />
      </div>

      <div class="form-group">
        <label for="st">Driver Description</label>
        <textarea name="editor1" id="editor1"></textarea>
        <script>
          CKEDITOR.replace("editor1");
        </script>
      </div>

      <div class="modal-footer order-1">
        <button type="submit" class="btn btn-primary up">
          ADD
        </button>
      </div>

    </div>
  </div>
</div>

<script src="https://cdn.ckeditor.com/4.5.6/standard/ckeditor.js"></script>

【讨论】：