search

pylixm / django-mdeditor

Django-mdeditor is Markdown Editor plugin application for django base on Editor.md.
https://pypi.org/project/django-mdeditor/
GNU General Public License v3.0
481 stars 103 forks source link

I'm Really Hoping You Will Help Me Out - Editor Not Loading When Using Bootstrap 4 Nav Tabs [GIF] #158

Closed jaradc closed 1 year ago

jaradc commented 2 years ago

I am running your mdeditor_demo example and my forms.html looks like this:

{% load static %}<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
          integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

  </head>
  <body>

    <div class="container p-5">
      <div class="row">
        <div class="col">

          <nav class="py-3">
            <div class="nav nav-tabs" id="nav-tab" role="tablist">
              <a class="nav-item nav-link active" id="nav-home-tab" data-toggle="tab" href="#nav-home" role="tab"
                 aria-controls="nav-home" aria-selected="true">Home
              </a>
              <a class="nav-item nav-link" id="nav-profile-tab" data-toggle="tab" href="#nav-profile" role="tab"
                 aria-controls="nav-profile" aria-selected="false">Profile
              </a>
              <a class="nav-item nav-link" id="nav-contact-tab" data-toggle="tab" href="#nav-contact" role="tab"
                 aria-controls="nav-contact" aria-selected="false">Contact
              </a>
            </div>
          </nav>
          <div class="tab-content" id="nav-tabContent">
            <div class="tab-pane fade show active" id="nav-home" role="tabpanel" aria-labelledby="nav-home-tab">You are on the HOME tab...
            </div>
            <div class="tab-pane fade" id="nav-profile" role="tabpanel" aria-labelledby="nav-profile-tab">Now the PROFILE tab..</div>
            <div class="tab-pane fade" id="nav-contact" role="tabpanel" aria-labelledby="nav-contact-tab">
              <form method="post">
                {% csrf_token %} {{ form.media }} {{ form.as_p }}
                <p>
                  <input type="submit" value="post">
                </p>
              </form>
            </div>
          </div>
        </div>
      </div>
    </div>
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"
            integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
            crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
            integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
            crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
            integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
            crossorigin="anonymous"></script>
  </body>
</html>

Note that the form is rendered on the third tab in the tabbed nav.

editormd-not-initialized-properly

My Question

What do I need to do to load EditorMD - do I need to call a CodeMirror function? Do I need custom Javascript?

My Observation

When I resize the dev tools window when the editor isn't loaded, something triggers the editor to resize correctly. What is that exactly and how can I trigger that?

pylixm commented 2 years ago

It may conflict with your bootstrap4 jquery, it is suggested that you can put it on a separate page.

jaradc commented 2 years ago

I figured it out. I don't have the solution in front of me at-the-moment, but it had to do with adding an event listener to the tabs and initializing EditorMD once with a special unique ID, then redefining the function after initialization to be a no-op. It was tough.

pylixm commented 1 year ago

长时间没有回应，如有需要可再次开启本issue。