Question

我正在使用Django编写一个简单的笔记应用程序，并且遇到django-markdownx。简而言之，这很棒，而且正是我所需要的，但是我在将预览小部件布局到所需位置时遇到了问题。因此，当前，渲染的文本显示在我的文本区域下方，我希望它们并排显示。我找到了this，但尚未成功量身定制，因此无法满足我的需求。小部件似乎相互依赖，即它们必须进入相同的模板，我想按照自己想要的方式在自己的模板中对它们进行布局，该模板大致如下所示：

<div class="form-wrapper">
  <div class="form-header">
    Create a new note
  </div>
  [...]
  <form method="POST">
      [...]
  </form>
</div>
<div class="preview">
  <!-- Preview widget should go here -->
</div>

我能以某种方式克服这个问题吗？

Answer 1

将这些行粘贴到widget.html

    {% load i18n %}
<div class="d-block w-100">
    <nav>
        <div class="nav nav-tabs">
            <a class="nav-item nav-link active" id="{{widget.name}}-write-tab" href="#{{widget.name}}-tab-write"
               data-toggle="tab" role="tab" aria-controls="write" aria-selected="true">
                {% trans "Write" %}
            </a>
            <a class="nav-item nav-link" id="{{widget.name}}-preview-tab" href="#{{widget.name}}-tab-preview"
               data-toggle="tab" role="tab" aria-controls="preview" aria-selected="true">
                {% trans "Preview" %}
            </a>
        </div>
    </nav>
    <div class="markdownx tab-content" id="{{widget.name}}-tabs">
        <div class="tab-pane fade show active" id="{{widget.name}}-tab-write" role="tabpanel"
             aria-labelledby="{{widget.name}}-tab-write">
            {% include 'django/forms/widgets/textarea.html' %}
        </div>
        <div class="tab-pane fade" id="{{widget.name}}-tab-preview" role="tabpanel"
             aria-labelledby="{{widget.name}}-tab-preview">
            <div class="markdownx-preview"></div>
        </div>
    </div>
</div>

将django-markdownx预览小部件放置在其他位置

1 个答案: